修改地图相关

src/page/bigscreen/components/echartsMap.vue

@@ -38,9 +38,9 @@
 </template>
 
 <script>
-let Echarts = require('echarts/lib/echarts');
-let wuhan = require('@/assets/map/wuhan.json');
-// let china = require('echarts/map/json/china');
+import * as echarts from 'echarts';
+import wuhan from '@/assets/map/wuhan.json'
+
 export default {
   data() {
     return {
@@ -68,9 +68,8 @@ export default {
   },
   methods: {
     init() {
-      Echarts.registerMap('wuhan', wuhan)
-      // Echarts.registerMap('china', china)
-      this.chart = Echarts.init(this.$refs.chart);
+      echarts.registerMap('wuhan', wuhan)
+      const myChart = echarts.init(this.$refs.chart);
       let option = {
         title: {
           text: '武汉市地图',
@@ -81,10 +80,6 @@ export default {
           right: '90px',
           bottom: '109px'
         },
-        // tooltip: {
-        //   trigger: 'item',
-        //   formatter: '{b}<br/>{c} (p / km2)'
-        // },
         visualMap: {
           type: 'piecewise',
           min: 100,
@@ -108,10 +103,10 @@ export default {
             color: '#386FFF',
             fontSize: 29,
           },
-          inRange: {
-            symbol: [],
           color: ['#1A347A', '#24449C', '#2B52BD', '#3361DE', '#386FFF']
-          }
+          // inRange: {
+          //   // symbol: [],
+          // }
         },
         series: [
           {
@@ -132,6 +127,15 @@ export default {
                 backgroundColor: '#00FFFC',
               },
             },
+            select: {
+              label: {
+                show: false
+              },
+              itemStyle: {
+                areaColor: '#00FFFC',
+                backgroundColor: '#00FFFC',
+              },
+            },
             itemStyle: {
               borderWidth: 2,
               borderColor: '#000D4A'
@@ -142,8 +146,9 @@ export default {
           }
         ]
       }
-      this.chart.setOption(option);
-      this.chart.on('click', (params) => {
+      // this.chart.setOption(option);
+      myChart.setOption(option);
+      myChart.on('click', (params) => {
         this.selectData = params.data
       });
     }

src/page/bigscreen/components/echartsPie.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-let Echarts = require('echarts/lib/echarts');
+import * as echarts from 'echarts';
 export default {
   data() {
     return {
@@ -38,7 +38,8 @@ export default {
   },
   methods: {
     init() {
-      this.chart = Echarts.init(this.$refs.chart);
+      const myChart = this.chart || echarts.init(this.$refs.chart);
+      // this.chart = echarts.init(this.$refs.chart);
       let option = {
         tooltip: {
           trigger: 'item'
@@ -104,7 +105,8 @@ export default {
           }
         ]
       };
-      this.chart.setOption(option);
+      myChart.setOption(option);
+      this.chart = myChart
     }
   }
 }

src/page/carStatistics/components/echartsBar.vue

@@ -2,7 +2,7 @@
   <div class="main">
     <div
       class="chart"
-      :id="idKey"
+      ref="chart"
     >
     </div>
   </div>
@@ -16,10 +16,6 @@ export default {
       type: Array,
       default: []
     },
-    idKey: {
-      type: String,
-      default: 'chart'
-    },
     title: {
       type: String,
       default: ''
@@ -46,7 +42,7 @@ export default {
   },
   methods: {
     init() {
-      var myChart = echarts.init(document.getElementById(this.idKey));
+      const myChart = this.chart || echarts.init(this.$refs.chart);
       const data = this.dataList.map(item => {
         return [item.name, item.value]
       })
@@ -114,7 +110,8 @@ export default {
         }]
       };
 
-      option && myChart.setOption(option);
+      myChart.setOption(option);
+      this.chart = myChart
     }
   }
 }

src/page/carStatistics/components/echartsPie.vue

@@ -2,7 +2,7 @@
   <div class="main">
     <div
       class="chart"
-      :id="idKey"
+      ref="chart"
     >
     </div>
   </div>
@@ -19,10 +19,6 @@ export default {
     colorList: {
       type: Array,
       default: []
-    },
-    idKey: {
-      type: String,
-      default: 'chart'
     }
   },
   watch: {
@@ -42,7 +38,7 @@ export default {
   },
   methods: {
     init() {
-      var myChart = echarts.init(document.getElementById(this.idKey));
+      const myChart = this.chart || echarts.init(this.$refs.chart);
       let option = {
         tooltip: {
           trigger: 'item'
@@ -63,7 +59,6 @@ export default {
         },
         series: [
           {
-            // name: '车辆类型占比',
             type: 'pie',
             radius: ['60%', '100%'],
             left: 'center',
@@ -117,8 +112,8 @@ export default {
           }
         ]
       };
-
-      option && myChart.setOption(option);
+      myChart.setOption(option);
+      this.chart = myChart
     }
   }
 }

src/page/carStatistics/index.vue

@@ -48,7 +48,6 @@
           <EchartsPie
             :dataList="vechieSpecialList"
             :colorList="vechieSpecialPurpose"
-            idKey="vechieSpecialPurpose"
           />
         </div>
         <div class="box">
@@ -58,7 +57,6 @@
           <EchartsPie
             :dataList="vechieTypeList"
             :colorList="vechieType"
-            idKey="vechieType"
           />
         </div>
       </div>
@@ -66,7 +64,6 @@
         <div class="title">辖区急救车辆总数排行</div>
         <EchartsBar
           :dataList="carCountList"
-          idKey="carCount"
           :areaList="areaList"
           title="车辆"
         />
@@ -75,7 +72,6 @@
         <div class="title">辖区站点总数排行</div>
         <EchartsBar
           :dataList="siteCountList"
-          idKey="siteCount"
           :areaList="areaList"
           title="站点"
         />