From 0c496e7063f67a8b1af9ff3e2680d896e8d9d158 Mon Sep 17 00:00:00 2001 From: zhouwenxuan <1175765986@qq.com> Date: 星期一, 09 十月 2023 10:00:52 +0800 Subject: [PATCH] 更新图表 --- src/views/monitorData/weatherData/index.vue | 14 +++++++++----- 1 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/views/monitorData/weatherData/index.vue b/src/views/monitorData/weatherData/index.vue index 4a90727..b76f938 100644 --- a/src/views/monitorData/weatherData/index.vue +++ b/src/views/monitorData/weatherData/index.vue @@ -64,7 +64,7 @@ </template> <script setup lang="ts"> -import {reactive, ref,onMounted} from "vue"; +import {reactive, ref, onMounted, shallowRef} from "vue"; import * as echarts from "echarts"; import { ElMessage, ElMessageBox } from 'element-plus' import {TableWeatherState} from "/@/types/monitorData"; @@ -112,6 +112,7 @@ const dataZoomEnd = ref(); const xData = ref([]); const yData = ref([]); +const myChart = shallowRef(null) const chooseTime = (val: any) => { console.log("val",val) @@ -228,7 +229,10 @@ } const initCharts = () => { - const myChart = echarts.init(document.getElementById('gasChart')); + if (myChart.value != null && myChart.value != "" && myChart.value != undefined) { + myChart.value.dispose(); + } + myChart.value = echarts.init(document.getElementById('gasChart')); // 指定图表的配置项和数据 const option = { tooltip: { @@ -269,10 +273,10 @@ ] }; // 使用刚指定的配置项和数据显示图表。 - myChart.setOption(option,true); + myChart.value.setOption(option,true); //自适应宽度 window.addEventListener('resize', function () { - myChart.resize(); + myChart.value.resize(); }) } </script> @@ -295,4 +299,4 @@ box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); padding: 3px } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.2