监听数据变化重渲染echarts

src/components/companySummary/business.vue

@@ -17,6 +17,14 @@ export default {
   data() {
     return {
     }
+  },
+    watch: {
+    chartData: {
+      deep: true,
+      handler: function () {
+        this.getEchartLeft1()
+      }
+    }
   },
   mounted() {
     setTimeout(() => {

src/components/companySummary/talent.vue

@@ -38,12 +38,21 @@ export default {
   name: "talent",
   data() {
     return {
-     sum:0,
+      sum: 0,
     }
   },
   created() {
 
   },
+  watch: {
+    chartData: {
+      deep: true,
+      handler: function () {
+        this.getEchartLeft2()
+      }
+    }
+  },
+
   mounted() {
     setTimeout(() => {
       // console.log(this.chartData)
@@ -53,7 +62,7 @@ export default {
   },
   methods: {
     GetPercent(num, total) {
-      this.sum=this.chartData.alipayPayAmount+this.chartData.weixinPayAmount+this.chartData.casePayAmount+this.chartData.robotPayAmount+this.chartData.unionPayAmount
+      this.sum = this.chartData.alipayPayAmount + this.chartData.weixinPayAmount + this.chartData.casePayAmount + this.chartData.robotPayAmount + this.chartData.unionPayAmount
       num = parseFloat(num);
       total = parseFloat(total);
       if (isNaN(num) || isNaN(total)) {

src/components/ringPie/index.vue

@@ -49,6 +49,14 @@ export default {
         this.shenRate=100-this.dataRate
         this.getEchart();
     }, 800);
+  },
+    watch: {
+    chartData: {
+      deep: true,
+      handler: function () {
+        this.getEchart()
+      }
+    }
   },
   methods: {
     getEchart() {

src/components/scrollArc/index.vue

@@ -38,6 +38,14 @@ export default {
       dataIn: [],
       dataOut: [],
     }
+  },
+      watch: {
+    chartData: {
+      deep: true,
+      handler: function () {
+        this.getEchart()
+      }
+    }
   },
   mounted() {
          setTimeout(() => {

src/components/szBar/index.vue

@@ -10,14 +10,14 @@
       </div> 
     </div>   
   </div> -->
-   <div class="income-container"> 
-    <div class="chart" id="chart_bar"></div>  
+  <div class="income-container">
+    <div class="chart" id="chart_bar"></div>
   </div>
 </template>
 
 <script>
 export default {
-       props: {
+  props: {
     chartData: {
       required: true,
     },
@@ -30,47 +30,56 @@ export default {
       yData1: [],
     }
   },
+  watch: {
+    chartData: {
+      deep: true,
+      handler: function () {
+        this.getEchart()
+      }
+    }
+  },
   mounted() {
-      setTimeout(() => {
+    setTimeout(() => {
       // console.log(this.chartData)
-             for(var i= 0;i<this.chartData.inStatistics.length;i++){
-            this.xAxisData.push(this.chartData.inStatistics[i].timeUnit)
-            this.yData1.push(this.chartData.inStatistics[i].num)
-       }
-        this.getEchart();
+      for (var i = 0; i < this.chartData.inStatistics.length; i++) {
+        this.xAxisData.push(this.chartData.inStatistics[i].timeUnit)
+        this.yData1.push(this.chartData.inStatistics[i].num)
+      }
+      this.getEchart();
     }, 800);
   },
+
   methods: {
     getEchart() {
       let myChart = echarts.init(document.getElementById('chart_bar'));
       let barWidth = '15%';
       let dataCoord = [
-        {coord: [0, 9]},
-        {coord: [1, 12]},
-        {coord: [2, 15]},
-        {coord: [3, 18]},
-        {coord: [4, 15]},
-        {coord: [5, 12]},
-        {coord: [6, 9]},
-        {coord: [7, 12]},
-        {coord: [8, 15]},
-        {coord: [9, 18]},
-        {coord: [10, 15]},
-        {coord: [11, 12]},
+        { coord: [0, 9] },
+        { coord: [1, 12] },
+        { coord: [2, 15] },
+        { coord: [3, 18] },
+        { coord: [4, 15] },
+        { coord: [5, 12] },
+        { coord: [6, 9] },
+        { coord: [7, 12] },
+        { coord: [8, 15] },
+        { coord: [9, 18] },
+        { coord: [10, 15] },
+        { coord: [11, 12] },
       ];
       let dataCoord2 = [
-        {coord: [0, -9]},
-        {coord: [1, -12]},
-        {coord: [2, -15]},
-        {coord: [3, -18]},
-        {coord: [4, -15]},
-        {coord: [5, -12]},
-        {coord: [6, -9]},
-        {coord: [7, -12]},
-        {coord: [8, -15]},
-        {coord: [9, -18]},
-        {coord: [10, -15]},
-        {coord: [11, -12]},
+        { coord: [0, -9] },
+        { coord: [1, -12] },
+        { coord: [2, -15] },
+        { coord: [3, -18] },
+        { coord: [4, -15] },
+        { coord: [5, -12] },
+        { coord: [6, -9] },
+        { coord: [7, -12] },
+        { coord: [8, -15] },
+        { coord: [9, -18] },
+        { coord: [10, -15] },
+        { coord: [11, -12] },
       ];
 
       this.option = {
@@ -82,7 +91,7 @@ export default {
           },
           axisTick: {
             show: false
-          }, 
+          },
           axisLine: {
             show: true,
             lineStyle: {
@@ -90,16 +99,16 @@ export default {
             }
           },
         },
-              tooltip: {
+        tooltip: {
           trigger: 'axis',
           showContent: true,
-          axisPointer: { 
+          axisPointer: {
             type: 'shadow',
             shadowStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 1,
                 color: '#5d83ff'
-              },{
+              }, {
                 offset: 0,
                 color: 'rgba(255, 255, 255, 0)'
               }])
@@ -112,7 +121,7 @@ export default {
           },
           axisTick: {
             show: false
-          }, 
+          },
           splitLine: {
             show: false
           },
@@ -138,23 +147,23 @@ export default {
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                  offset: 1, 
+                  offset: 1,
                   color: 'rgba(0, 0, 0, 0)'
-                },{
-                  offset: 0.6, 
+                }, {
+                  offset: 0.6,
                   color: '#466e71'
-                },{
-                  offset: 0, 
+                }, {
+                  offset: 0,
                   color: '#43FFFF'
                 }]),
-                    label: {
-                      position:"top",
-                        show: true, //开启显示
-                        textStyle: { //数值样式
-                            color: '#fff',
-                            fontSize: 10
-                        }
-                    }
+                label: {
+                  position: "top",
+                  show: true, //开启显示
+                  textStyle: { //数值样式
+                    color: '#fff',
+                    fontSize: 10
+                  }
+                }
               }
             },
             barWidth: barWidth,
@@ -173,7 +182,7 @@ export default {
             // },
             data: this.yData1
           },
-      
+
         ]
       };
       myChart.setOption(this.option, true);
@@ -184,7 +193,7 @@ export default {
     }
   },
   beforeDestroy() {
-    
+
   }
 };
 </script>
@@ -195,11 +204,13 @@ export default {
     height: 3rem;
   }
 }
+
 .sn-container {
   left: 975px;
   top: 690px;
   width: 895px;
   height: 400px;
+
   .chartsdom {
     width: 100%;
     height: 95%;