完善demo

src/components/echarts/data.js

@@ -1,23 +1,6 @@
 class areaData {
   constructor() {
     return [
-      {
-        areaName: "东城区",
-        DateItems: [
-          {
-            title: "标题1",
-            value: "10"
-          },
-          {
-            title: "标题2",
-            value: "20"
-          },
-          {
-            title: "标题3",
-            value: "30"
-          }
-        ]
-      },
       {
         areaName: "西城区",
         DateItems: [
@@ -184,7 +167,7 @@ class areaData {
           },
           {
             title: "标题3",
-            value: "130"
+            value: "13  0"
           }
         ]
       },

src/components/echarts/echartsSimple.vue

@@ -34,9 +34,18 @@ export default {
         return ["#F4E001", "#F0805A", "#26C0C0"];
       }
     },
+    cityConfig: {
+      type: Object,
+      default() {
+        return {
+          name: "北京市",
+          dataJson: null
+        };
+      }
+    },
     areaItems: {
       type: Object,
-      defualt() {
+      default() {
         return {
           东城区: [116.418757, 39.937544],
           西城区: [116.366794, 39.910309],
@@ -69,24 +78,7 @@ export default {
       shaDe: null, // 遮挡层
       myChart: null,
       // 地区坐标
-      selfAreaItems: {
-        东城区: [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]
-      },
+      selfAreaItems: {},
       selfAreaData: new AreaData(),
       selfOption: new EchartsOption()
     };
@@ -96,14 +88,28 @@ export default {
     this.init();
   },
   methods: {
+    loadMap(mapName, data) {
+      if (data) {
+        console.log(mapName, data, "mapName, datamapName, data");
+        echarts.registerMap(mapName, data);
+      }
+    },
     init() {
+      // console.log(mapJson, "mapJsonmapJson");
+
       this.selfAreaData = JSON.parse(JSON.stringify(this.areaData));
       this.selfOption = JSON.parse(JSON.stringify(this.option));
       this.selfColor = JSON.parse(JSON.stringify(this.colorList));
+      this.selfOption = JSON.parse(JSON.stringify(this.option));
       this.myChart = echarts.init(this.$refs.myEchart);
+      if (this.cityConfig.dataJson) {
+        console.log(this.cityConfig);
+        this.loadMap(this.cityConfig.name, this.cityConfig.dataJson);
+      }
       this.selfAreaItems = JSON.parse(JSON.stringify(this.areaItems));
       window.onresize = this.myChart.resize;
-      this.myChart.setOption(this.option);
+
+      this.myChart.setOption(this.selfOption);
       // 拖拽跟缩放重置
       let throttledRenderEachCity = this.throttle(this.renderItems, 0);
       this.myChart.on("geoRoam", throttledRenderEachCity);
@@ -151,7 +157,7 @@ export default {
     },
     // 填充 地图点位
     renderItems() {
-      let option = Object.assign(this.option, {
+      let option = Object.assign(this.selfOption, {
         xAxis: [],
         yAxis: [],
         grid: [],
@@ -163,91 +169,94 @@ export default {
           }
         }
       });
-      this.areaData.forEach((item, idx) => {
+      this.selfAreaData.forEach((item, idx) => {
         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));
-        option.xAxis.push({
-          id: idx + item.areaName,
-          gridId: idx + item.areaName,
-          type: "category",
-          name: item.areaName,
-          nameLocation: "middle",
-          nameGap: 3,
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          axisLine: {
-            onZero: false,
-            lineStyle: {
-              color: "#666"
-            }
-          },
-          data: titleItems,
-          z: 100
-        });
-        option.yAxis.push({
-          id: idx + item.areaName,
-          gridId: idx + item.areaName,
-          type: "value",
-          splitLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            show: false
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: "red"
-            }
-          },
-          min: 0,
-          max: "dataMax"
-        });
-        option.grid.push({
-          id: idx + item.areaName,
-          width: 30,
-          height: 40,
-          left: coord[0] - 15,
-          top: coord[1] - 15,
-          z: 100
-        });
-        option.series.push({
-          id: idx + item.areaName,
-          type: "bar",
-          xAxisId: idx + item.areaName,
-          yAxisId: idx + item.areaName,
-          barGap: 0,
-          barCategoryGap: 0,
-          data: itemData,
-          z: 100,
-          itemStyle: {
-            normal: {
-              color: params => {
-                // build a color map as your need.
-                let color = this.selfColor[params.dataIndex];
-                return color;
+        console.log(item, this.selfAreaItems, coord);
+        if (coord) {
+          option.xAxis.push({
+            id: idx + item.areaName,
+            gridId: idx + item.areaName,
+            type: "category",
+            name: item.areaName,
+            nameLocation: "middle",
+            nameGap: 3,
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            axisLine: {
+              onZero: false,
+              lineStyle: {
+                color: "#666"
+              }
+            },
+            data: titleItems,
+            z: 100
+          });
+          option.yAxis.push({
+            id: idx + item.areaName,
+            gridId: idx + item.areaName,
+            type: "value",
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: "red"
               }
             },
-            opacity: 0,
-            emphasis: {
-              label: {
-                show: false
+            min: 0,
+            max: "dataMax"
+          });
+          option.grid.push({
+            id: idx + item.areaName,
+            width: 30,
+            height: 40,
+            left: coord[0] - 15,
+            top: coord[1] - 15,
+            z: 100
+          });
+          option.series.push({
+            id: idx + item.areaName,
+            type: "bar",
+            xAxisId: idx + item.areaName,
+            yAxisId: idx + item.areaName,
+            barGap: 0,
+            barCategoryGap: 0,
+            data: itemData,
+            z: 100,
+            itemStyle: {
+              normal: {
+                color: params => {
+                  // build a color map as your need.
+                  let color = this.selfColor[params.dataIndex];
+                  return color;
+                }
+              },
+              opacity: 0,
+              emphasis: {
+                label: {
+                  show: false
+                }
               }
             }
-          }
-        });
+          });
+        }
       });
       this.myChart.setOption(option);
     },

src/views/echartDemo.vue

@@ -1,18 +1,56 @@
 <template>
   <div class="echartDemo">
-    <echarts-demo></echarts-demo>
+    <echarts-demo
+      :areaData="areaData"
+      :option="option"
+      :cityConfig="cityConfig"
+      :areaItems="areaItems"
+    ></echarts-demo>
   </div>
 </template>
 
 <script>
+let mapJson = require("./json/xuzhou.json");
+import AreaData from "./js/data";
 export default {
   name: "EachartsDom",
   data() {
     return {
-      // areaData
-      // option
-      // colorList
-      //selfAreaItems
+      areaData: new AreaData(),
+      areaItems: { 丰县: [116.59957, 34.69972] },
+      cityConfig: {
+        name: "徐州市",
+        dataJson: mapJson
+      },
+      option: {
+        backgroundColor: "#02AFDB",
+        tooltip: {},
+        geo: {
+          map: "徐州市",
+          roam: true,
+          label: {
+            normal: {
+              show: true,
+              textStyle: {
+                color: "rgba(0,0,0,0.4)"
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              borderColor: "rgba(0, 0, 0, 0.2)"
+            },
+            emphasis: {
+              areaColor: null,
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              shadowBlur: 20,
+              borderWidth: 0,
+              shadowColor: "rgba(0, 0, 0, 0.5)"
+            }
+          }
+        }
+      }
     };
   },
   mounted() {}

src/views/js/data.js

@@ -0,0 +1,24 @@
+class areaData {
+  constructor() {
+    return [
+      {
+        areaName: "丰县",
+        DateItems: [
+          {
+            title: "标题1",
+            value: "10"
+          },
+          {
+            title: "标题2",
+            value: "20"
+          },
+          {
+            title: "标题3",
+            value: "30"
+          }
+        ]
+      }
+    ];
+  }
+}
+export default areaData;