init

src/components/echarts/echartsSimple.vue

@@ -33,6 +33,29 @@ export default {
       default() {
         return ["#F4E001", "#F0805A", "#26C0C0"];
       }
+    },
+    areaItems: {
+      type: Object,
+      defualt() {
+        return {
+          东城区: [116.418757, 39.937544],
+          西城区: [116.366794, 39.910309],
+          朝阳区: [116.486409, 39.991489],
+          丰台区: [116.286968, 39.863642],
+          石景山区: [116.170445, 39.974601],
+          海淀区: [116.280316, 40.039074],
+          门头沟区: [115.905381, 40.009183],
+          房山区: [115.701157, 39.735535],
+          通州区: [116.758603, 39.802486],
+          顺义区: [116.753525, 40.128936],
+          昌平区: [116.235906, 40.318085],
+          大兴区: [116.338033, 39.658908],
+          怀柔区: [116.607122, 40.524272],
+          平谷区: [117.112335, 40.244783],
+          密云区: [116.943352, 40.477362],
+          延庆区: [115.985006, 40.465325]
+        };
+      }
     }
   },
   beforeDestroy() {
@@ -46,7 +69,7 @@ export default {
       shaDe: null, // 遮挡层
       myChart: null,
       // 地区坐标
-      areaItems: {
+      selfAreaItems: {
         东城区: [116.418757, 39.937544],
         西城区: [116.366794, 39.910309],
         朝阳区: [116.486409, 39.991489],
@@ -78,6 +101,7 @@ export default {
       this.selfOption = JSON.parse(JSON.stringify(this.option));
       this.selfColor = JSON.parse(JSON.stringify(this.colorList));
       this.myChart = echarts.init(this.$refs.myEchart);
+      this.selfAreaItems = JSON.parse(JSON.stringify(this.areaItems));
       window.onresize = this.myChart.resize;
       this.myChart.setOption(this.option);
       // 拖拽跟缩放重置
@@ -140,7 +164,7 @@ export default {
         }
       });
       this.areaData.forEach((item, idx) => {
-        let nodeCoord = this.areaItems[item.areaName];
+        let nodeCoord = this.selfAreaItems[item.areaName];
         let coord = this.myChart.convertToPixel("geo", nodeCoord);
         let titleItems = item.DateItems.map(i => i.title);
         let itemData = item.DateItems.map(i => Number(i.value));

src/views/echartDemo.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="echartDemo">
-    <echarts-demo></echarts-demo>
+    <echarts-demo
+      :areaData="areaData"
+      :option="option"
+      :colorList="colorList"
+      :selfAreaItems="selfAreaItems"
+    ></echarts-demo>
   </div>
 </template>
 
@@ -12,6 +17,7 @@ export default {
       // areaData
       // option
       // colorList
+      //selfAreaItems
     };
   },
   mounted() {}