Echarts实现成都市地图下钻

1.首先获取成都市的json文件，以及成都市各个位置的json文件
在mounted触发
注意：vue-cli4获取json文件数据，使用相对位置获取

mounted(){
	this.chengdu = "http://192.168.1.79:8082/static/chengdu.json";
    this.chenghuaqu = " http://192.168.1.79:8082/static/chenghuaqu.json";
    this.chongzhoushi = " http://192.168.1.79:8082/static/chongzhoushi.json";
    this.dayixian = " http://192.168.1.79:8082/static/dayixian.json";
    this.dujiangyanshi = " http://192.168.1.79:8082/static/dujiangyanshi.json";
    this.jianyangshi = " http://192.168.1.79:8082/static/jianyangshi.json";
    this.jinjiangqu = " http://192.168.1.79:8082/static/jinjiangqu.json";
    this.jinniuqu = " http://192.168.1.79:8082/static/jinniuqu.json";
    this.jintangxian = " http://192.168.1.79:8082/static/jintangxian.json";
    this.pengzhoushi = " http://192.168.1.79:8082/static/pengzhoushi.json";
    this.piduqu = " http://192.168.1.79:8082/static/piduqu.json";
    this.pujiangxian = " http://192.168.1.79:8082/static/pujiangxian.json";
    this.qingbaijiangqu =
      " http://192.168.1.79:8082/static/qingbaijiangqu.json";
    this.qingyangqu = " http://192.168.1.79:8082/static/qingyangqu.json";
    this.qionglaishi = " http://192.168.1.79:8082/static/qionglaishi.json";
    this.wuhouqu = " http://192.168.1.79:8082/static/wuhouqu.json";
    this.piduqu = " http://192.168.1.79:8082/static/piduqu.json";
    this.xinjinxian = " http://192.168.1.79:8082/static/xinjinxian.json";
    this.longquanqi = " http://192.168.1.79:8082/static/longquanyiqu.json";
    this.xinduqu = " http://192.168.1.79:8082/static/xinduqu.json";
    this.shaungliuxian = " http://192.168.1.79:8082/static/shuangliuqu.json";
    this.wenjiangqu = " http://192.168.1.79:8082/static/wenjiangqu.json";


    this.extendsMap();
}

methods:{
	extendsMap(){
      let that = this;
      that.$echarts.extendsMap = function(id, opt) {
        that.initData(opt);
        that.mapChart.setOption(that.option);
        // 添加事件
        that.mapChart.on("click", function(params) {
          var _this = this;
          that.handleEcharts(that, params, _this);
        });
      };
      // 页面初次加载
      that.initMap();
},
}

 initData(opt) {
      this.mapChart = this.$echarts.init(document.getElementById("chartMap"));
      this.cityMap = {
        成华区: this.chenghuaqu,
        崇州市: this.chongzhoushi,
        大邑县: this.dayixian,
        都江堰市: this.dujiangyanshi,
        金牛区: this.jinniuqu,
        金堂县: this.jintangxian,
        锦江区: this.jinjiangqu,
        龙泉驿区: this.longquanqi,
        彭州市: this.pengzhoushi,
        蒲江县: this.pujiangxian,
        青白江区: this.qingbaijiangqu,
        青羊区: this.qingyangqu,
        双流区: this.shaungliuxian,
        温江区: this.wenjiangqu,
        武侯区: this.wuhouqu,
        新都区: this.xinduqu,
        新津县: this.xinjinxian,
        邛崃市: this.qionglaishi,
        郫都区: this.piduqu
      };
      this.curGeoJson = {};
      this.geoCoordMap = {
        成华区: [104.103077, 30.660275],
        崇州市: [103.671049, 30.631478],
        大邑县: [103.522397, 30.586602],
        都江堰市: [103.627898, 30.99114],
        金牛区: [104.043487, 30.692058],
        金堂县: [104.415604, 30.858417],
        锦江区: [104.080989, 30.657689],
        龙泉驿区: [104.269181, 30.56065],
        彭州市: [103.941173, 30.985161],
        蒲江县: [103.511541, 30.194359],
        青白江区: [104.25494, 30.883438],
        青羊区: [104.055731, 30.667648],
        双流区: [103.922706, 30.573243],
        温江区: [103.836776, 30.697996],
        武侯区: [104.05167, 30.630862],
        新都区: [104.16022, 30.824223],
        新津县: [103.812449, 30.414284],
        邛崃市: [103.46143, 30.413271],
        郫都区: [103.887842, 30.808752]
      };
      this.levelColorMap = {
        "1": "rgba(241, 109, 115, .8)",
        "2": "rgba(255, 235, 59, .7)",
        "3": "rgba(147, 235, 248, 1)"
      };
      this.defaultOpt = {
        mapName: "china", // 地图展示
        goDown: false, // 是否下钻
        bgColor: "#020933", // 画布背景色
        activeArea: [], // 区域高亮,同echarts配置项
        data: [],
        // 下钻回调(点击的地图名、实例对象option、实例对象)
        callback: function(name, option, instance) {}
      };
      if (opt) this.opt = this.extend(this.defaultOpt, opt);
      // 层级索引
      this.name = [this.opt.mapName];
      this.idx = 0;
      this.pos = {
        leftPlus: 115,
        leftCur: 150,
        left: 198,
        top: 50
      };
      this.line = [[0, 0], [8, 11], [0, 22]];
      this.style = {
        font: '18px "Microsoft YaHei", sans-serif',
        textColor: "#eee",
        lineColor: "#2ab8ff"
      };
      let that = this;
      that.option = {
        backgroundColor: that.opt.bgColor,
        graphic: [
          {
            type: "group",
            left: that.pos.left,
            top: that.pos.top - 4,
            children: [
              {
                type: "line",
                left: 0,
                top: -20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 60,
                  y2: 0
                },
                style: {
                  stroke: that.style.lineColor
                }
              },
              {
                type: "line",
                left: 0,
                top: 20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 60,
                  y2: 0
                },
                style: {
                  stroke: that.style.lineColor
                }
              }
            ]
          },
          {
            id: that.name[that.idx],
            type: "group",
            left: that.pos.left + 2,
            top: that.pos.top,
            children: [
              {
                type: "polyline",
                left: 90,
                top: -12,
                shape: {
                  points: that.line
                },
                style: {
                  stroke: "transparent",
                  key: that.name[0]
                },
                onclick: function() {
                  var name = this.style.key;
                  that.resetOption(that.mapChart, that.option, name);
                }
              },
              {
                type: "text",
                left: 0,
                top: "middle",
                style: {
                  text: that.name[0] === "成都" ? "成都市" : that.name[0],
                  textAlign: "center",
                  fill: that.style.textColor,
                  font: that.style.font
                },
                onclick: function() {
                  that.resetOption(that.mapChart, that.option, "成都");
                }
              },
              {
                type: "text",
                left: 0,
                top: 10,
                style: {
                  text: "CHENGDU",
                  textAlign: "center",
                  fill: that.style.textColor,
                  font: '12px "Microsoft YaHei", sans-serif'
                },
                onclick: function() {
                  that.resetOption(that.mapChart, that.option, "成都");
                }
              }
            ]
          }
        ],
        geo: {
          map: that.opt.mapName,
          zoom: 1,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            emphasis: {
              textStyle: {
                color: "#fff"
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: "#2ab8ff",
              borderWidth: 1,
              areaColor: "#12235c",
              shadowColor: "#182f68",
              shadowOffsetX: 0,
              shadowOffsetY: 25
            },
            emphasis: {
              areaColor: "#2AB8FF",
              borderWidth: 0,
              color: "green",
              label: {
                show: false
              }
            }
          },
          regions: that.opt.activeArea.map(function(item) {
            if (typeof item !== "string") {
              return {
                name: item.name,
                itemStyle: {
                  normal: {
                    areaColor: item.areaColor || "#013C62"
                  }
                },
                label: {
                  normal: {
                    show: item.showLabel,
                    textStyle: {
                      color: "#fff"
                    }
                  }
                }
              };
            } else {
              return {
                name: item,
                itemStyle: {
                  normal: {
                    borderColor: "#2ab8ff",
                    areaColor: "#12235c"
                  }
                }
              };
            }
          })
        },
        series: [
          {
            type: "effectScatter",
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              },
              emphasis: {
                textStyle: {
                  color: "#fff"
                }
              }
            },
            coordinateSystem: "geo",
            // symbol: 'diamond',
            showEffectOn: "render",
            rippleEffect: {
              period: 15,
              scale: 6,
              brushType: "fill"
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                borderColor: "#2ab8ff",
                borderWidth: 1.5,
                areaColor: "#12235c"
              },
              emphasis: {
                areaColor: "#2AB8FF",
                borderWidth: 0,
                color: "green"
              }
            },
            data: that.initSeriesData(that.opt.data)
          }
        ]
      };
    },




//对象扩展
    extend(target, source) {
      for (var p in source) {
        if (source.hasOwnProperty(p)) {
          target[p] = source[p];
        }
      }
      return target;
    },

 handleEcharts(that, params, self) {
      if (that.opt.goDown && params.name !== that.name[that.idx]) {
        if (that.cityMap[params.name]) {
          var url = that.cityMap[params.name];
          axios.get(url).then(result => {
            that.curGeoJson = result.data;
            //绘制成都各区域的地图
            that.$echarts.registerMap(params.name, result.data); //that===在最前面将全局this赋值给that
            that.resetOption(self, that.option, params.name);
          });
        }
      }
    },

  initMap() {
      axios.get(this.chengdu).then(result => {
        // 绘制成都的地图
        this.$echarts.registerMap("成都", result.data);
        var myChart = this.$echarts.extendsMap("chart-panel", {
          bgColor: "#020933", // 画布背景色
          mapName: "成都", // 地图名
          goDown: true, // 是否下钻
          // 下钻回调
          callback: function(name, option, instance) {
            // console.log(name, option, instance);
          }
        });
      });
    }

 /**
     * i 实例对象
     * o option
     * n 地图名
     **/
    resetOption(i, o, n) {
      var breadcrumb = this.createBreadcrumb(n);
      var num = this.name.indexOf(n);
      var len = o.graphic.length;
      if (num < 0) {
        o.graphic.push(breadcrumb);
        o.graphic[0].children[0].shape.x2 = 145;
        o.graphic[0].children[1].shape.x2 = 145;
        if (o.graphic.length > 2) {
          for (let i = 0; i < this.opt.data.length; i++) {
            if (n === this.opt.data[i].name + "市") {
              o.series[0].data = this.initSeriesData([this.opt.data[i]]);
              break;
            } else {
              o.series[0].data = [];
            }
          }
        }
        this.name.push(n);
        this.idx++;
      } else {
        o.graphic.splice(num + 2, len);
        if (o.graphic.length <= 2) {
          o.graphic[0].children[0].shape.x2 = 60;
          o.graphic[0].children[1].shape.x2 = 60;
          o.series[0].data = this.initSeriesData(this.opt.data);
        }
        this.name.splice(num + 1, len);
        this.idx = num;
        this.pos.leftCur -= this.pos.leftPlus * (len - num - 1);
      }
      o.geo.map = n;
      o.geo.zoom = 0.4;
      i.clear();
      i.setOption(o);
      this.zoomAnimation();
      this.opt.callback(n, o, i);
    },

/**
     * name 地图名=====包括设置地图名字的样式，和option对应的
     **/
    createBreadcrumb(name) {
      var cityToPinyin = {
        成华区: "chenghua",
        崇州市: "chongzhou",
        大邑县: "dayi",
        都江堰市: "dujiangyan",
        金牛区: "jinniu",
        金堂县: "jintang",
        锦江区: "jinjiang",
        龙泉驿区: "longquan",
        彭州市: "pengzhou",
        蒲江县: "pujiang",
        青白江区: "qingbaijiang",
        青羊区: "qingyang",
        双流区: "shaungliu",
        温江区: "wenjiang",
        武侯区: "wuhou",
        新都区: "xindu",
        新津县: "xinjin",
        邛崃市: "qionglai",
        郫都区: "pidu"
      };
      let that = this;
      var breadcrumb = {
        type: "group",
        id: name,
        left: that.pos.leftCur + that.pos.leftPlus,
        top: that.pos.top + 3,
        children: [
          {
            type: "polyline",
            left: -90,
            top: -5,
            shape: {
              points: that.line
            },
            style: {
              stroke: "#fff",
              key: name
            },
            onclick: function() {
              var name = this.style.key;
              that.resetOption(that.mapChart, that.option, name);
            }
          },
          {
            type: "text",
            left: -68,
            top: "middle",
            style: {
              text: name,
              textAlign: "center",
              fill: that.style.textColor,
              font: that.style.font
            },
            onclick: function() {
              var name = this.style.text;
              that.resetOption(that.mapChart, that.option, name);
            }
          },
          {
            type: "text",
            left: -68,
            top: 10,
            style: {
              name: name,
              text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : "",
              textAlign: "center",
              fill: that.style.textColor,
              font: '12px "Microsoft YaHei", sans-serif'
            },
            onclick: function() {
              var name = this.style.name;
              that.resetOption(that.mapChart, that.option, name);
            }
          }
        ]
      };
      that.pos.leftCur += that.pos.leftPlus;
      return breadcrumb;
    },

 // 设置effectscatter===坐标
    initSeriesData(data) {
      var temp = [];
      for (let i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          temp.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value, data[i].level)
          });
        }
      }
      return temp;
    },

 zoomAnimation() {
      var count = null;
      let that = this;
      var zoom = function(per) {
        if (!count) count = per;
        count = count + per;
        // console.log(per,count);
        that.mapChart.setOption({
          geo: {
            zoom: count
          }
        });
        if (count < 1)
          window.requestAnimationFrame(function() {
            zoom(0.2);
          });
      };
      window.requestAnimationFrame(function() {
        zoom(0.2);
      });
    },

有最新成都地图JSON 包含高新区和天府新区