监听数据变化重渲染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

@@ -30,47 +30,56 @@ export default {
       yData1: [],
     }
   },
+  watch: {
+    chartData: {
+      deep: true,
+      handler: function () {
+        this.getEchart()
+      }
+    }
+  },
   mounted() {
     setTimeout(() => {
       // console.log(this.chartData)
-             for(var i= 0;i<this.chartData.inStatistics.length;i++){
+      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: [0, 9] },
-        {coord: [1, 12]},
+        { coord: [1, 12] },
-        {coord: [2, 15]},
+        { coord: [2, 15] },
-        {coord: [3, 18]},
+        { coord: [3, 18] },
-        {coord: [4, 15]},
+        { coord: [4, 15] },
-        {coord: [5, 12]},
+        { coord: [5, 12] },
-        {coord: [6, 9]},
+        { coord: [6, 9] },
-        {coord: [7, 12]},
+        { coord: [7, 12] },
-        {coord: [8, 15]},
+        { coord: [8, 15] },
-        {coord: [9, 18]},
+        { coord: [9, 18] },
-        {coord: [10, 15]},
+        { coord: [10, 15] },
-        {coord: [11, 12]},
+        { coord: [11, 12] },
       ];
       let dataCoord2 = [
-        {coord: [0, -9]},
+        { coord: [0, -9] },
-        {coord: [1, -12]},
+        { coord: [1, -12] },
-        {coord: [2, -15]},
+        { coord: [2, -15] },
-        {coord: [3, -18]},
+        { coord: [3, -18] },
-        {coord: [4, -15]},
+        { coord: [4, -15] },
-        {coord: [5, -12]},
+        { coord: [5, -12] },
-        {coord: [6, -9]},
+        { coord: [6, -9] },
-        {coord: [7, -12]},
+        { coord: [7, -12] },
-        {coord: [8, -15]},
+        { coord: [8, -15] },
-        {coord: [9, -18]},
+        { coord: [9, -18] },
-        {coord: [10, -15]},
+        { coord: [10, -15] },
-        {coord: [11, -12]},
+        { coord: [11, -12] },
       ];
 
       this.option = {
@@ -99,7 +108,7 @@ export default {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 1,
                 color: '#5d83ff'
-              },{
+              }, {
                 offset: 0,
                 color: 'rgba(255, 255, 255, 0)'
               }])
@@ -140,15 +149,15 @@ export default {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 1,
                   color: 'rgba(0, 0, 0, 0)'
-                },{
+                }, {
                   offset: 0.6,
                   color: '#466e71'
-                },{
+                }, {
                   offset: 0,
                   color: '#43FFFF'
                 }]),
                 label: {
-                      position:"top",
+                  position: "top",
                   show: true, //开启显示
                   textStyle: { //数值样式
                     color: '#fff',
@@ -195,11 +204,13 @@ export default {
     height: 3rem;
   }
 }
+
 .sn-container {
   left: 975px;
   top: 690px;
   width: 895px;
   height: 400px;
+
   .chartsdom {
     width: 100%;
     height: 95%;