优化水房大屏

src/views/Waterhouse/index.vue

@@ -93,8 +93,11 @@ let mathList = reactive([
     { color: '#EE6666', name: '用电量', max: 100, min: 0, avg: 50 }
 ])
 
-function init() {
+function initChart(date,inChart, outChart, currentChart) {
+    if (!chart) {
         chart = proxy.$echarts.init(mainChart.value, 'dark');
+    }
+    
     let option = {
         // title: {
         //     text: '水房数据大屏',
@@ -115,15 +118,7 @@ function init() {
         xAxis: {
             type: 'category',
             boundaryGap: false,
-            data: [
-                "2023-06-11",
-                "2023-06-12",
-                "2023-06-13",
-                "2023-06-14",
-                "2023-06-15",
-                "2023-06-16",
-                "2023-06-17"
-            ]
+            data: date
         },
         yAxis: [
             {
@@ -134,7 +129,6 @@ function init() {
                 type: 'value',
                 name: '电量',
                 position: 'right',
-                alignTicks: true,
                 axisLine: {
                     show: true,
                     lineStyle: {
@@ -148,21 +142,21 @@ function init() {
                 name: '进水量',
                 type: 'line',
                 smooth: true,
-                data: [0, 2, 1, 1, 2, 0, 1]
+                data: inChart
             },
             {
                 name: '出水量',
                 type: 'line',
                 smooth: true,
                 yAxisIndex: 0,
-                data: [0, 0, 0, 0, 0, 0, 0]
+                data: outChart
             },
             {
                 name: '用电量',
                 type: 'line',
                 smooth: true,
                 yAxisIndex: 1,
-                data: [1.0907, 0.595, 0.9884, 1.625, 1.7888, 1.9918, 1.6647]
+                data: currentChart
             }
         ]
     };
@@ -180,28 +174,8 @@ async function getWaterFlowInfoFun() {
         allData.currentCount = data.currentCount
         allData.xl = data.xl.toFixed(1)
         allData.xy = data.xy.toFixed(1)
-        chart.setOption({
-            xAxis: { data: data.date },
-            series: [
-                {
-                    name: '进水量',
-                    type: 'line',
-                    data: data.inChart
-                },
-                {
-                    name: '出水量',
-                    type: 'line',
-                    yAxisIndex: 0,
-                    data: data.outChart
-                },
-                {
-                    name: '用电量',
-                    type: 'line',
-                    yAxisIndex: 1,
-                    data: data.currentChart
-                }
-            ]
-        })
+        initChart(data.date, data.inChart, data.outChart, data.currentChart)
+
         mathList[0].max = data.math.WaterInflow.max
         mathList[0].min = data.math.WaterInflow.min
         mathList[0].avg = data.math.WaterInflow.avg
@@ -218,7 +192,6 @@ async function getWaterFlowInfoFun() {
 
 }
 onMounted(() => {
-    init()
     getWaterFlowInfoFun()
 })
 </script>