You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.1 KiB
54 lines
1.1 KiB
4 years ago
|
<template>
|
||
|
|
<el-card class="box-card">
|
||
|
|
<div class="text-sm">月累计湿润时间（h）</div>
|
||
|
|
<el-empty description="暂无数据" v-if="noData"></el-empty>
|
||
|
|
<div id="moistTimeDataContainer"></div>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { onMounted, ref, defineExpose } from 'vue';
|
||
|
|
import { Column } from '@antv/g2plot';
|
||
|
|
|
||
|
|
const show = ref(false);
|
||
|
|
const noData = ref(true);
|
||
|
|
let bar = null;
|
||
|
|
|
||
|
|
// 设置图表
|
||
|
|
onMounted(() => {
|
||
|
|
show.value = true;
|
||
|
|
});
|
||
|
|
|
||
|
|
const setDate = data => {
|
||
|
|
noData.value = false;
|
||
|
|
if (bar) {
|
||
|
|
bar.destroy();
|
||
|
|
}
|
||
|
|
bar = new Column('moistTimeDataContainer', {
|
||
|
|
data,
|
||
|
|
layout: 'vertical',
|
||
|
|
xField: 'time',
|
||
|
|
yField: 'value',
|
||
|
|
// height: 200,
|
||
|
|
padding: [30, 16, 60, 50],
|
||
|
|
color: '#C280FF',
|
||
|
|
columnWidthRatio: 0.6, // 宽度占比
|
||
|
|
yAxis: {
|
||
|
|
title: {
|
||
|
|
text: '月累计湿润时间',
|
||
|
|
spacing: 20,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
slider: {
|
||
|
|
start: 0.1,
|
||
|
|
end: 0.5,
|
||
|
|
},
|
||
|
|
meta: { value: { alias: '月累计湿润时间（h）' } },
|
||
|
|
});
|
||
|
|
|
||
|
|
bar.render();
|
||
|
|
};
|
||
|
|
|
||
|
|
defineExpose({ setDate });
|
||
|
|
</script>
|