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.
67 lines
1.7 KiB
67 lines
1.7 KiB
4 years ago
|
<template>
|
||
|
|
<el-card class="box-card">
|
||
|
|
<el-empty v-if="noData" description="暂无数据"></el-empty>
|
||
|
|
<div id="realtimeContainer"></div>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { defineExpose, defineProps, onMounted, ref } from 'vue';
|
||
|
|
import { generateChartOption } from 'utils/statistical';
|
||
|
|
import * as echarts from 'echarts/core';
|
||
|
|
import { DataZoomComponent, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
|
||
|
|
import { LineChart } from 'echarts/charts';
|
||
|
|
import { UniversalTransition } from 'echarts/features';
|
||
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
||
|
|
|
||
|
|
echarts.use([
|
||
|
|
ToolboxComponent,
|
||
|
|
TooltipComponent,
|
||
|
|
GridComponent,
|
||
|
|
LegendComponent,
|
||
|
|
LineChart,
|
||
|
|
CanvasRenderer,
|
||
|
|
UniversalTransition,
|
||
|
|
DataZoomComponent,
|
||
|
|
]);
|
||
|
|
|
||
|
|
const props = defineProps({ searchHeight: Number });
|
||
|
|
|
||
|
|
const show = ref(false);
|
||
|
|
const noData = ref(true);
|
||
|
|
let myChart = null;
|
||
|
|
|
||
|
|
// 设置图表
|
||
|
|
onMounted(() => {
|
||
|
|
show.value = true;
|
||
|
|
initChart();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 初始化chart
|
||
|
|
function initChart() {
|
||
|
|
const chartDom = document.getElementById('realtimeContainer');
|
||
|
|
const canvasHeight = document.documentElement.clientHeight - props.searchHeight - 150;
|
||
|
|
console.log(canvasHeight, document.documentElement.clientHeight, props.searchHeight);
|
||
|
|
chartDom.style.height = `${canvasHeight}px`;
|
||
|
|
myChart && myChart.dispose();
|
||
|
|
myChart = echarts.init(chartDom);
|
||
|
|
}
|
||
|
|
|
||
|
|
function render(data) {
|
||
|
|
myChart && myChart.clear();
|
||
|
|
if (!data || !data.length) {
|
||
|
|
noData.value = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
noData.value = false;
|
||
|
|
|
||
|
|
if (!myChart) {
|
||
|
|
initChart();
|
||
|
|
}
|
||
|
|
const option = generateChartOption(data);
|
||
|
|
option && myChart.setOption(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({ render });
|
||
|
|
</script>
|