fix: responsive chart (update chart for http response)

lbwa · Oct 1, 2018 · 1425140 · 1425140
1 parent 8256cc2
commit 1425140
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 66 deletions.
diff --git a/src/components/AnalysisSalesList.vue b/src/components/AnalysisSalesList.vue
@@ -3,16 +3,16 @@
     <li
       class="analysis__sales__list-item"
       v-for="(goods, index) of salesList"
-      :key="goods.goods"
+      :key="goods.name"
     >
       <span
         class="item__dot"
         :style="colorDot(index)"
       ></span>
-      <h4 class="item__title">{{goods.x}}</h4>
+      <h4 class="item__title">{{goods.name}}</h4>
       <span class="item__divider"></span>
       <span class="item__percent">{{percentValue(goods.percent)}}</span>
-      <span class="item__sales">{{formatPrice(goods.y)}}</span>
+      <span class="item__sales">{{formatPrice(goods.value)}}</span>
     </li>
   </ul>
 </template>
@@ -35,8 +35,8 @@ export default {
       default () {
         return [
           {
-            x: 'default',
-            y: 10000,
+            name: 'default',
+            value: 10000,
             percent: 0.1
           }
         ]

diff --git a/src/components/ChartBar.js b/src/components/ChartBar.js
@@ -28,32 +28,47 @@ export default {
     }
   },
 
-  mounted () {
-    this.renderChart({
-      labels: this.labels,
-      datasets: [
-        {
-          backgroundColor: `#2693f8`,
-          data: this.datasets
-        }
-      ]
-    }, {
-      // hide data label
-      legend: {
-        display: false
-      },
-
-      // hide axis and its labels
-      scales: {
-        xAxes: [{
-          display: false
-        }],
-        yAxes: [{
+  methods: {
+    handleUpdate () {
+      this.$data._chart.destroy()
+      this.rendering()
+    },
+
+    rendering () {
+      this.renderChart({
+        labels: this.labels,
+        datasets: [
+          {
+            backgroundColor: `#2693f8`,
+            data: this.datasets
+          }
+        ]
+      }, {
+        // hide data label
+        legend: {
           display: false
-        }]
-      },
-      scaleShowLabels: false,
-      ...this.options
-    })
+        },
+
+        // hide axis and its labels
+        scales: {
+          xAxes: [{
+            display: false
+          }],
+          yAxes: [{
+            display: false
+          }]
+        },
+        scaleShowLabels: false,
+        ...this.options
+      })
+    }
+  },
+
+  mounted () {
+    this.rendering()
+  },
+
+  watch: {
+    datasets: 'handleUpdate'
   }
 }
diff --git a/src/components/ChartLine.js b/src/components/ChartLine.js
@@ -38,42 +38,56 @@ export default {
     }
   },
 
-  mounted () {
-    this.renderChart({
-      labels: this.labels,
-      datasets: [
-        {
-          backgroundColor: this.backgroundColor,
-          borderColor: this.borderColor === '' ? '' : this.borderColor,
-          data: this.datasets
-        }
-      ]
-    }, {
-      // hide data label
-      legend: {
-        display: false
-      },
-
-      // hide axis and its labels
-      scales: {
-        xAxes: [{
-          display: false
-        }],
-        yAxes: [{
+  methods: {
+    handleUpdate () {
+      this.$data._chart.destroy()
+      this.rendering()
+    },
+    rendering () {
+      this.renderChart({
+        labels: this.labels,
+        datasets: [
+          {
+            backgroundColor: this.backgroundColor,
+            borderColor: this.borderColor === '' ? '' : this.borderColor,
+            data: this.datasets
+          }
+        ]
+      }, {
+        // hide data label
+        legend: {
           display: false
-        }]
-      },
-      scaleShowLabels: false,
+        },
 
-      // hide line dots
-      // 需要在极其精确的 hover 状态下才能触发 dot 样式
-      elements: {
-        point: {
-          radius: 1,
-          hoverRadius: 4
-        }
-      },
-      ...this.options
-    })
+        // hide axis and its labels
+        scales: {
+          xAxes: [{
+            display: false
+          }],
+          yAxes: [{
+            display: false
+          }]
+        },
+        scaleShowLabels: false,
+
+        // hide line dots
+        // 需要在极其精确的 hover 状态下才能触发 dot 样式
+        elements: {
+          point: {
+            radius: 1,
+            hoverRadius: 4
+          }
+        },
+        ...this.options
+      })
+    }
+  },
+
+  watch: {
+    datasets: 'handleUpdate'
+  },
+
+  mounted () {
+    this.rendering()
   }
 }