折线图

src/views/modules/visual/communityGovern/cpt/issue-info.vue

@@ -80,7 +80,8 @@
               </div>
             </div>
 
-            <line-chart :list="issueChartData" />
+            <line-chart ref="lineChart"
+                        :list="null" />
           </div>
         </div>
       </cpt-card>
@@ -215,6 +216,8 @@ export default {
           );
         });
         this.issueChartData = chartData;
+        this.$refs.lineChart.setList(this.issueChartData)
+
       } else {
         this.$message.error(msg);
       }

src/views/modules/visual/cpts/line-chart.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="m-chart">
-    <canvas id="myChart" :width="width" :height="height" />
+    <canvas id="myChart"
+            :width="width"
+            :height="height" />
   </div>
 </template>
 
@@ -26,7 +28,7 @@ const addTextShape = () => {
   const group = canvas.addGroup();
   const shapes = {};
 
-  function addFn(list) {
+  function addFn (list) {
     const listLength = list.length;
     list.forEach(function (obj, index) {
       // 避免显示太多，乱七八糟
@@ -130,7 +132,7 @@ const iniChart = function (config, srcData) {
     items: [
       {
         name: "支持",
-        marker(x, y, r, ctx) {
+        marker (x, y, r, ctx) {
           ctx.lineWidth = 10;
           ctx.strokeStyle = supColor;
           ctx.moveTo(x - r - 15, y);
@@ -141,7 +143,7 @@ const iniChart = function (config, srcData) {
       },
       {
         name: "反对",
-        marker(x, y, r, ctx) {
+        marker (x, y, r, ctx) {
           ctx.lineWidth = 10;
           ctx.strokeStyle = oppColor;
           ctx.moveTo(x - r - 15, y);
@@ -198,24 +200,32 @@ export default {
       default: 260,
     },
   },
-  data() {
+  data () {
     return {
       iniLoading: false,
     };
   },
   watch: {
-    list(data) {
+    list (data) {
       chart.changeData(data);
       srcData = data;
       addTextShape();
     },
   },
-  async created() {
+  async created () {
     await nextTick(200);
     iniChart(this.config, this.list);
     await nextTick(200);
     this.iniLoading = true;
   },
+
+  methods: {
+    setList (data) {
+      chart.changeData(data);
+      srcData = data;
+      addTextShape();
+    },
+  }
 };
 </script>