<div class="map" style="position:relative">
      <el-button
        type="primary"
        size="mini"
        round
        v-if="mapImg"
        @click="back"
        style="padding:5px 20px;background: #5A8BBD;position:absolute;z-index:999;right:0;top:20px;cursor: pointer"
      >返回</el-button>
      <div id="chinaMap" style="height:560px;width:100%;" ref="myEchart"></div>
</div>

js

addScript() {
      let echart_prefix = "https://cdn.jsdelivr.net/npm/echarts@4.9.0/";
      let map_province = [
        "anhui",
        "aomen",
        "beijing",
        "chongqing",
        "fujian",
        "gansu",
        "guangdong",
        "guangxi",
        "guizhou",
        "hainan",
        "hebei",
        "heilongjiang",
        "henan",
        "hubei",
        "hunan",
        "jiangsu",
        "jiangxi",
        "jilin",
        "liaoning",
        "neimenggu",
        "ningxia",
        "qinghai",
        "shandong",
        "shanghai",
        "shanxi",
        "shanxi1",
        "sichuan",
        "*",
        "tianjin",
        "xianggang",
        "*",
        "xizang",
        "yunnan",
        "zhejiang"
      ];
      let map_province_data = [];
      for (let x in map_province) {
        map_province_data.push(
          echart_prefix + "map/js/province/" + map_province[x] + ".js"
        );
      }
      scriptjs(map_province_data);
    },
loadData() {
      let echart_prefix = "https://cdn.jsdelivr.net/npm/echarts@4.9.0/";
      scriptjs(echart_prefix + "map/js/china.js", () => {
        this._tGyggIndexStatistics("");
      });
      this.isLoaded = true;
    },
_tGyggIndexStatistics(notice) {
      let params = {
        xzqDm: this.xzqbm
        // startDate:'2020-10-01',
        // endDate:'2021-01-01'
      };
      jiekou(params).then(res => {
        if (res.data.code === 200) {
          this.addScript();
          if (notice != "noMap") {
            this.mapData = res.data.mapData;
            this.chinamap(res.data.mapData);
          }
        }
      });
    },
chinamap(data) {
      let that = this;
      var myChart = echarts.init(document.getElementById("chinaMap"));
      let num = [];
      let maxArr = [];
      let max = null;
      if (this.length == "") {
        for (let i in data) {
          let name1;
          if (data[i].xzqName && data[i].xzqName.length > 2) {
            name1 = data[i].xzqName
              .replace("省", "")
              .replace("市", "")
              .replace("回族", "")
              .replace("壮族", "")
              .replace("*", "");
            // .replace('市','');
          } else {
            name1 = data[i].xzqName;
          }

          // console.log('name1',name1)
          let value;
          if (data[i].num) {
            value = Number(data[i].num);
          } else {
            value = 0;
          }

          num.push({
            name: name1,
            value: value,
            console: { xzqdm: data[i].xzqDm }
          });
          maxArr.push(value);
        }
      } else {
        for (let i in data) {
          let name1 = data[i].xzqName;
          let value;
          if (data[i].num) {
            value = Number(data[i].num);
          } else {
            value = 0;
          }
          num.push({
            name: name1,
            value: value,
            console: { xzqdm: data[i].xzqDm }
            // num:data[i].
          });

          maxArr.push(value);
        }
      }
      max = Math.max(...maxArr);

      let option = {
        tooltip: {
          // trigger: "item"
          formatter(e) {
            // console.log('e',e)
            if (e.data) {
              return `区域：${e.data.name}</br>
          宗数：${e.data.value} </br>`;
            }
          },
          // position: "right",
          textStyle: {
            align: "left"
          }
        },
        // animation: true,
        //左侧小导航图标
        visualMap: {
          min: 0,
          max: max,
          top: "bottom",
          text: ["高", "低"],
          inRange: {
            color: ["#C6D5FA", "#366DF0"]
          },
          show: true
        },
        geo: {
          // map: "china",
          map: this.seriesMap,
          mapType: this.seriesMapType,
          roam: false, //不开启缩放和平移
          zoom: 1.1, //视角缩放比例
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              label: {
                show: true
              }
            }
          }
        },
        //配置属性
        series: [
          {
            name: "面积",
            type: "map",
            map: this.seriesMap,
            mapType: this.seriesMapType,
            roam: false,
            zoom: 1.1,
            data: num,
            // geoIndex: 0,
            label: {
              normal: {
                // 省市区名字显示不显示
                // show: true,
                formatter: function(params) {
                  // console.log(params,'params')
                  // return params.value + "\r\n" + params.name;
                }
              },
              emphasis: {
                show: false
              }
            }
          }
        ]
      };
      that.option = option;
      if (this.seriesMap == "海南") {
        option.series[0].center = [109.844902, 19.0392];
        option.series[0].layoutCenter = ["50%", "50%"];
        option.series[0].layoutSize = "600%";
        option.geo.center = [109.844902, 19.0392];
        option.geo.layoutCenter = ["50%", "50%"];
        option.geo.layoutSize = "600%";
      } else {
        option.series[0].center = undefined;
        option.series[0].layoutCenter = undefined;
        option.series[0].layoutSize = undefined;
        option.geo.center = undefined;
        option.geo.layoutCenter = undefined;
        option.geo.layoutSize = undefined;
      }

      /**
       *  使用刚指定的配置项和数据显示图表。
       *  */
      myChart.clear();
      myChart.setOption(option, true);
      myChart.off("click");
      myChart.on("click", function(chinaParam) {
        // var option = myChart.getOption();
        if (
          chinaParam.data.console.xzqdm &&
          chinaParam.data.console.xzqdm.length < 4
        ) {
          that.option.geo.map = chinaParam.name;
          var option = that.option;
          // console.log("that.option", option, option.series[0]);
          that.seriesMap = chinaParam.name;
          that.seriesMapType = chinaParam.name;
          that.name = chinaParam.name;

          myChart.clear();
          that.mapImg = true;
          // console.log(chinaParam, chinaParam.name, that.mapImg);
          console.log("chinaParam.data", chinaParam.data);
          if (chinaParam.data) {
            that.xzqbm = chinaParam.data.console.xzqdm;
            that.length = 4;
            // that._mapIndex();
            that._tGyggIndexStatistics("");
          } else {
            option.series[0].map = chinaParam.name;
            option.series[0].mapType = chinaParam.name;
            if (this.seriesMap == "海南") {
              option.series[0].center = [109.844902, 19.0392];
              option.series[0].layoutCenter = ["50%", "50%"];
              option.series[0].layoutSize = "600%";
              option.geo.center = [109.844902, 19.0392];
              option.geo.layoutCenter = ["50%", "50%"];
              option.geo.layoutSize = "600%";
            } else {
              option.series[0].center = undefined;
              option.series[0].layoutCenter = undefined;
              option.series[0].layoutSize = undefined;
              option.geo.center = undefined;
              option.geo.layoutCenter = undefined;
              option.geo.layoutSize = undefined;
            }
            myChart.setOption(option, true);
            that._tGyggIndexStatistics("noMap");
          }
        }
      });
    },