11

psdc-ui/src/views/emonitor/db/index.vue

@@ -35,7 +35,7 @@
         <div class="mid1-1">
           当前功率
         </div>
-        <div id="myEcharts" style="width: 100%; height: 88.6%"></div>
+        <div id="myEcharts1" style="width: 100%; height: 88.6%"></div>
       </div>
       <div class="mid2">
         <div class="mid2-1">
@@ -56,17 +56,16 @@
 </template>
 
 <script  name="Index">
-import { onMounted } from "vue";
+import { onMounted ,onUnmounted } from "vue";
 import * as echarts from 'echarts';
 export default {
   name: "db",
   setup() {
+
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
-      let myChart = echarts.init(document.getElementById("myEcharts"));
+      echarts.init(document.getElementById("myEcharts1")).dispose()
-      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      let myChart1 = echarts.init(document.getElementById("myEcharts1"));
-      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      let option1 = {
-      // 绘制图表
-      myChart.setOption({
         series: [
           {
             type: 'gauge',
@@ -118,11 +117,16 @@ export default {
             ]
           }
         ]
-      });
+      }
+      myChart1.setOption(option1);
       window.onresize = function () {//自适应大小
-        myChart.resize();
+        myChart1.resize();
       };
-      myChart3.setOption({
+
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      let myChart2 = echarts.init(document.getElementById("myEcharts2"));
+      // 绘制图表
+      myChart2.setOption({
         title: {},
         tooltip: {},
         textStyle:{
@@ -139,7 +143,7 @@ export default {
         },
         yAxis: {
           type: 'value',
-          name: "kWh",
+          name: "kW",
           splitLine:{
             show:true,
             lineStyle:{
@@ -157,8 +161,8 @@ export default {
         },
         series: [
           {
-            name: "今日用电量",
+            name: "当前功率",
-            type: "bar",
+            type: "line",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
               color:'#2F8EE0'
@@ -167,9 +171,12 @@ export default {
         ],
       });
       window.onresize = function () {//自适应大小
-        myChart3.resize();
+        myChart2.resize();
       };
-      myChart2.setOption({
+
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      let myChart3 = echarts.init(document.getElementById("myEcharts3"));
+      myChart3.setOption({
         title: {},
         tooltip: {},
         textStyle:{
@@ -186,7 +193,7 @@ export default {
         },
         yAxis: {
           type: 'value',
-          name: "kW",
+          name: "kWh",
           splitLine:{
             show:true,
             lineStyle:{
@@ -204,8 +211,8 @@ export default {
         },
         series: [
           {
-            name: "当前功率",
+            name: "今日用电量",
-            type: "line",
+            type: "bar",
             data: [5, 20, 36, 10, 10, 20],
             itemStyle:{
               color:'#2F8EE0'
@@ -214,8 +221,9 @@ export default {
         ],
       });
       window.onresize = function () {//自适应大小
-        myChart2.resize();
+        myChart3.resize();
       };
+
     });
   },
   components: {},

psdc-ui/src/views/emonitor/drgl/index.vue

@@ -73,6 +73,10 @@ export default {
   name: "drgl",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      echarts.init(document.getElementById("myEcharts4")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       let myChart2 = echarts.init(document.getElementById("myEcharts2"));
       let myChart3 = echarts.init(document.getElementById("myEcharts3"));

psdc-ui/src/views/emonitor/frdl/index.vue

@@ -69,6 +69,10 @@ export default {
   name: "frdl",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      echarts.init(document.getElementById("myEcharts4")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       let myChart2 = echarts.init(document.getElementById("myEcharts2"));
       let myChart3 = echarts.init(document.getElementById("myEcharts3"));

psdc-ui/src/views/emonitor/kqyrb/index.vue

@@ -73,6 +73,10 @@ export default {
   name: "kqyrb",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      echarts.init(document.getElementById("myEcharts4")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       let myChart2 = echarts.init(document.getElementById("myEcharts2"));
       let myChart3 = echarts.init(document.getElementById("myEcharts3"));

psdc-ui/src/views/emonitor/wdcgq/index.vue

@@ -77,6 +77,7 @@ export default {
   name: "wdcgq",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       // 绘制图表
       myChart.setOption({

psdc-ui/src/views/emonitor/xrgl/index.vue

@@ -73,6 +73,10 @@ export default {
   name: "xrgl",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
+      echarts.init(document.getElementById("myEcharts")).dispose()
+      echarts.init(document.getElementById("myEcharts2")).dispose()
+      echarts.init(document.getElementById("myEcharts3")).dispose()
+      echarts.init(document.getElementById("myEcharts4")).dispose()
       let myChart = echarts.init(document.getElementById("myEcharts"));
       let myChart2 = echarts.init(document.getElementById("myEcharts2"));
       let myChart3 = echarts.init(document.getElementById("myEcharts3"));