[feature]{Chart}: 修改部分命名

BoBoooooo · Apr 25, 2019 · 5172e3d · 5172e3d
1 parent 5b0561e
commit 5172e3d
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 56 deletions.
diff --git a/src/components/Charts/lineChart.vue b/src/components/Charts/lineChart.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import echarts from 'echarts'
-import 'echarts/theme/macarons'
+import echarts from 'echarts';
+import 'echarts/theme/macarons';
 
 export default {
   props: {
@@ -64,30 +64,30 @@ export default {
   data() {
     return {
       chart: null,
-    }
+    };
   },
 
   mounted() {
-    this.initChart()
-    this.__resizeHanlder = () => {
+    this.initChart();
+    this.resizeHanlder = () => {
       if (this.chart) {
-        this.chart.resize()
+        this.chart.resize();
       }
-    }
-    window.addEventListener('resize', this.__resizeHanlder)
+    };
+    window.addEventListener('resize', this.resizeHanlder);
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    window.removeEventListener('resize', this.__resizeHanlder)
-    this.chart.dispose()
-    this.chart = null
+    window.removeEventListener('resize', this.resizeHanlder);
+    this.chart.dispose();
+    this.chart = null;
   },
 
   methods: {
     initChart() {
-      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
+      this.chart = echarts.init(document.getElementById(this.id));
 
 
       this.chart.setOption({
@@ -165,8 +165,8 @@ export default {
           },
           data: this.data[1],
         }],
-      })
+      });
     },
   },
-}
+};
 </script>
diff --git a/src/components/Charts/mapChart.vue b/src/components/Charts/mapChart.vue
@@ -1,7 +1,7 @@
 <!--
  * @Author: BoBo
  * @Date: 2019-01-04 17:53:03
- * @Description: 封装的一个基于echarts的饼图组件
+ * @Description: 封装的一个基于echarts的地图组件
 
   porps{
    className : 自定义容器css
@@ -23,10 +23,10 @@
 </template>
 
 <script>
-import echarts from 'echarts'
-import 'echarts/theme/macarons'
-import chartData from './data/Charts_Fake'
-import mapJson from './data/jiangsu.json'
+import echarts from 'echarts';
+import 'echarts/theme/macarons';
+import chartData from './data/Charts_Fake';
+import mapJson from './data/jiangsu.json';
 
 export default {
   props: {
@@ -63,39 +63,39 @@ export default {
       chart: null,
       chartData,
       mapJson,
-    }
+    };
   },
   computed: {
     legand() {
-      const arr = []
+      const arr = [];
       this.data.forEach((item) => {
-        arr.push(item.name)
-      })
-      return arr
+        arr.push(item.name);
+      });
+      return arr;
     },
   },
   mounted() {
-    this.initChart()
-    this.__resizeHanlder = () => {
+    this.initChart();
+    this.resizeHanlder = () => {
       if (this.chart) {
-        this.chart.resize()
+        this.chart.resize();
       }
-    }
-    window.addEventListener('resize', this.__resizeHanlder)
+    };
+    window.addEventListener('resize', this.resizeHanlder);
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    window.removeEventListener('resize', this.__resizeHanlder)
-    this.chart.dispose()
-    this.chart = null
+    window.removeEventListener('resize', this.resizeHanlder);
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
       echarts.registerMap('jiangsu', this.mapJson);
 
-      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
+      this.chart = echarts.init(document.getElementById(this.id), 'macarons');
 
 
       this.chart.setOption(
@@ -139,8 +139,8 @@ export default {
             top: 'top',
           },
         }, true,
-      )
+      );
     },
   },
-}
+};
 </script>
diff --git a/src/components/Charts/pieChart.vue b/src/components/Charts/pieChart.vue
@@ -23,8 +23,8 @@
 </template>
 
 <script>
-import echarts from 'echarts'
-import 'echarts/theme/macarons'
+import echarts from 'echarts';
+import 'echarts/theme/macarons';
 
 export default {
   props: {
@@ -59,40 +59,53 @@ export default {
   data() {
     return {
       chart: null,
-    }
+    };
   },
   computed: {
     legand() {
-      const arr = []
+      const arr = [];
       this.data.forEach((item) => {
-        arr.push(item.name)
-      })
-      return arr
+        arr.push(item.name);
+      });
+      return arr;
     },
   },
   mounted() {
-    this.initChart()
-    this.__resizeHanlder = () => {
+    this.initChart();
+    this.resizeHanlder = () => {
       if (this.chart) {
-        this.chart.resize()
+        this.chart.resize();
       }
-    }
-    window.addEventListener('resize', this.__resizeHanlder)
+    };
+    window.addEventListener('resize', this.resizeHanlder);
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    window.removeEventListener('resize', this.__resizeHanlder)
-    this.chart.dispose()
-    this.chart = null
+    window.removeEventListener('resize', this.resizeHanlder);
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(document.getElementById(this.id), 'macarons')
+      this.chart = echarts.init(document.getElementById(this.id));
 
 
       this.chart.setOption({
+        color: [
+          '#1890FF',
+          '#13C2C2',
+          '#2FC25B',
+          '#FACC14',
+          '#F04864',
+          '#8543E0',
+          '#CA8622',
+          '#CBB6B0',
+          '#6E7074',
+          '#C4CCD3',
+
+        ],
         title: {
           text: this.title,
           subtext: this.subtitle,
@@ -157,8 +170,8 @@ export default {
             },
           },
         ],
-      })
+      });
     },
   },
-}
+};
 </script>