Echarts 绘制地图省、市、区、县（以及点击显示下级，支持坐标定位）

上代码
javascript 复制代码
<template>
  <div class="mapCont">
    <div id="mapSelf" @contextmenu.prevent="disableContextMenu"></div>
  </div>
</template>
  
<script>
import * as echarts from 'echarts'
import mapData from "./addressMode/xiangyang.json";//引入json数据   下载地址http://datav.aliyun.com/tools/atlas/#&lat=37.82280243352756&lng=107.4462890625&zoom=4
import maplhk from "./addressMode/老河口市.json";
export default {
  name: "HelloWorld",
  data() {
    return {
      chart: null,
      rowData: [
        { name: "谷城县", jwd: [111.659572, 32.269471], value: [111.659572, 32.269471, 12] },
        { name: "谷城县", jwd: [111.659572, 32.200471], value: [111.659572, 32.200471, 24] },
      ]
    };
  },
  mounted() {
    this.mapInit(mapData, this.rowData)

  },
  methods: {
    mapInit(modeData, rowData) {
      this.chart = echarts.init(document.getElementById("mapSelf"));
      echarts.registerMap("xiangyang", modeData); //mapData是定义的数据初始化
      this.chart.setOption({
        // legend: {//可设置多个颜色
        //   orient: 'vertical',
        //   x: 'left',
        //   data: ['蓝点', '红点']
        // },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{b}",
        // },
        geo: {//定义地图样式
          type: "map",
          map: "xiangyang",
          aspectScale: 0.75, //长宽比
          selectedMode: "single", //表示选种模式是否为单选"mutiple"表多选
          showLegendSymbol: false, // 存在legend时显示
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#FFFFFFcc", //文字颜色
                fontSize: 16
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "#fff", //鼠标hover文字颜色
                fontSize: 18
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#0069e5", //整个背景填充颜色
              borderColor: "#ffffff" //边界颜色
            },
            emphasis: {
              areaColor: "darkorange" //鼠标hover颜色，区域选中颜色
            }
          },
        },
        series: [
          {
            name: "蓝点",
            type: "effectScatter", //影响散点
            coordinateSystem: "geo",
            symbolSize: 12,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                color: "white",
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "white",
                shadowBlur: 10,
                shadowColor: "white" //闪烁圈的颜色
              }
            },
            data: rowData,

          },
          // {//可配置多个数据源
          //   name: "红点",
          //   type: "effectScatter", //影响散点
          //   coordinateSystem: "geo",
          //   symbolSize: 12,
          //   showEffectOn: "render",
          //   rippleEffect: {
          //     brushType: "stroke"
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     normal: {
          //       color: "red",
          //       formatter: "{b}",
          //       position: "right",
          //       show: false
          //     },
          //     emphasis: {
          //       show: true
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "red",
          //       shadowBlur: 10,
          //       shadowColor: "red" //闪烁圈的颜色
          //     }
          //   },
          //   data: [
          //     { name: "宜城市", jwd: [112.265758, 31.726944], value: [112.265758, 31.726944, 12] },
          //     { name: "枣阳市", jwd: [112.779625, 32.134729], value: [112.779625, 32.134729, 24] },
          //   ]
          // }
        ]
      });
      // 点击每个市所获取到的值，这里可进行相关操作
      this.chart.on("click", (params) => {
        console.log(params);
        if (params.name == "老河口市") {
          this.chart.dispose();
          this.mapInit(maplhk, [{ name: "老河口", jwd: [111.682704, 32.393923], value: [111.682704, 32.393923, 12] }])
        }
      });
      this.chart.on("contextmenu", (params) => {
        console.log(params);
        this.chart.dispose();
        this.mapInit(mapData, this.rowData)
      });
    },
    disableContextMenu(e) {//禁用右键显示保存图片
      e.preventDefault();
    }
  },


};
</script>
<style scoped>
.mapCont {
  width: 1000px;
  height: 800px;
}
#mapSelf {
  width: 100%;
  height: 100%;
}
</style>