vue+echarts地图 + 杭州市 + 点击穿透下面的区和县

                    vue+echarts地图 + 杭州市 + 点击穿透下面的区和县

1. 根据echarts Api 安装教程进行安装
   npm install echarts --save
   有需要的可以安装固定版本 npm install echarts@4.80 --save

2. 引入（我这里是全局引入）
   在入口文件main.js里引入
   import echarts from ‘echarts’
   Vue.prototype.$echarts = echarts

3. 引入需要的所对应的城市json文件（杭州市为例）
   
   4.定义函数初始化echarts

mineMap() {
      var self = this;
      var mapChart = this.$echarts.init(document.getElementById("myEcharts"));
      let dataDi = [
        { code: "330111", name: "富阳区", value: 15 },
        { code: "330105", name: "拱墅区", value: 1000 },
        { code: "330108", name: "滨江区", value: 20000 },
        { code: "330127", name: "淳安县", value: 43562 },
        { code: "330182", name: "建德市", value: 15896 },
        { code: "330104", name: "江干区", value: 8653 },
        { code: "330112", name: "临安区", value: 9756 },
        { code: "330102", name: "上城区", value: 1356 },
        { code: "330122", name: "桐庐县", value: 25863 },
        { code: "330106", name: "西湖区", value: 1235 },
        { code: "330103", name: "下城区", value: 5643 },
        { code: "330109", name: "萧山区", value: 25863 },
        { code: "330110", name: "余杭区", value: 1235 },
      ];
      let mapName = this.jxmap[this.cityName] + "";
      this.$echarts.registerMap(mapName, this.jxmap[this.cityName]);
      var mapOption = {
        tooltip: {
          trigger: "item",
          backgroundColor: "#fff",
          borderWidth: 1,
          borderColor: "#CCE5FF",
          formatter: (params) => {
            return `
            <section style='width:100px;height:45px;color:#333333'>
              <div style='color:#333333;font-size: 14px;'>
                ${params.name}
              </div>
              <div>
                <span style="font-size: 12px;color:#808080">${params.seriesName}:</span>
                <span style="font-size: 16px;color: #4298F3;">${params.value}</span>
              </div>
            </section>`;
          },
        },
        series: [
          {
            name: "台区数量",
            type: "map",
            // map: this.mapData1,
            map: mapName,
            roam: false,
            layoutSize: "100%", //大小
            zoom: 1.2,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  color: "#fff",
                  formatter: function (data) {
                    var a = data.name;
                    var b = data.value;
                    return a + "\n" + b;
                  },
                },
                areaColor: "#ADD1FF",
                borderColor: "#fff",
              },
              emphasis: {
                borderWidth: 2,
                borderColor: "#FFE04D",
                areaColor: "#ADD1FF",
                label: {
                  show: true,
                },
              },
            },
            data: dataDi,
          },
        ],
      };
      mapChart.setOption(mapOption);
      window.addEventListener("resize", function () {
        mapChart.resize();
      });
      mapChart.on("click", function (params) {
        let name = params.name;
        self.handlerChange(name);
      });
    },

5 .在data里定义对象点击不同区域的所对应的json

data() {
    return {
      cityName: "杭州市",
      jxmap: {
        //以后可能会返回每个城市所对应的城市代码 现在用城市名代替
        // 330100: hangzhou,
        // 330111: fuyang,
        // 330105: gongshu,
        // 330108: binjiang,
        // 330127: chunan,
        // 330182: jiande,
        // 330104: jianggan,
        // 330112: linan,
        // 330102: shangcheng,
        // 330122: tonglu,
        // 330106: xihu,
        // 330103: xiacheng,
        // 330109: xiaoshan,
        // 330110: yuhang,
        杭州市: hangzhou,
        富阳区: fuyang,
        拱墅区: gongshu,
        滨江区: binjiang,
        淳安县: chunan,
        建德市: jiande,
        江干区: jianggan,
        临安区: linan,
        上城区: shangcheng,
        桐庐县: tonglu,
        西湖区: xihu,
        下城区: xiacheng,
        萧山区: xiaoshan,
        余杭区: yuhang,
      },
    };
  },

6.获取点击不同区域的所对应的name（echarts的点击事件参数params中）
7.定义名字改变时对应json改变的函数

 handlerChange(name) {
      this.cityName = name
      this.mineMap()
    },

并在echarts的点击事件中调用其函数

 mapChart.on("click", function (params) {
        let name = params.name;
        self.handlerChange(name);
      });
    },

8.所对应的效果图：