ECharts3D地图 山东地图（济南合并莱芜）vue 带点击联动事件

<!-- map -->
<template lang="html">
  <div class="echbox">
    <div id="main-map" class="map-show-wrapper" style="height:100%;width:100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import "../../json/shandong.js"; //对应的省份
import "echarts-gl"; //3D地图插件
export default {
  data() {
    return {
      chooseArea: null
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      const _this = this;
      let myChart = this.$echarts.init(document.getElementById("main-map"));
      let option = {
        series: [
          {
            type: "map3D",
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            selectedMode: "single", //地图高亮单选
            boxDepth: 80, //地图倾斜度
            regionHeight: 6, //地图高度
            map: "山东",
            viewControl: {
              //用于鼠标的旋转，缩放等视角控制
              autoRotate: true,
              //projection:'orthographic',
              projection: "perspective",
              autoRotateSpeed: 3,
              distance: 90, //默认视角距离主体的距离
              maxDistance: 180,
              minDistance: 83,
              minBeta: Number.NEGATIVE_INFINITY,
              maxBeta: Number.POSITIVE_INFINITY,
              panMouseButton: "right", //平移操作使用的鼠标按键
              rotateMouseButton: "left", //旋转操作使用的鼠标按键
              alpha: 50, // 让canvas在x轴有一定的倾斜角度
              center: [-10, -17, 0]
            },
            label: {
              show: true, //是否显示市
              textStyle: {
                color: "#fff", //文字颜色
                fontSize: 12, //文字大小
                backgroundColor: "rgba(0,0,0,0)" //透明度0清空文字背景
              }
            },
            itemStyle: {
              color: "hsla(226, 93%, 11%, 0.57)", //地图颜色
              borderWidth: 0.5, //分界线wdith
              borderColor: "#459bca" //分界线颜色
            },
            emphasis: {
              label: {
                show: true, //是否显示高亮
                textStyle: {
                  color: "#fff" //高亮文字颜色
                }
              },
              itemStyle: {
                color: "#0489d6" //地图高亮颜色
              },
              areaStyle: {
                color: "#90c31d" //选中状态的地图板块颜色
              }
            }
          }
        ]
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
      window.onresize = myChart.resize;
      myChart.on("click", function(e) {
        const name = e.name;
        option.series[0].data = myChart._model.option.series[0].data;
        myChart.dispatchAction({
          type: "geoUnSelect",
          name: _this.chooseArea
        });
        if (e.name === _this.chooseArea) {
          _this.chooseArea = null;
          for (var i = 0; i < option.series[0].data.length; i++) {
            if (name == option.series[0].data[i].name) {
              option.series[0].data[i] = {
                name,
                itemStyle: {
                  color: "hsla(226, 93%, 11%, 0.57)"
                }
              };
            }
          }
        } else {
          myChart.dispatchAction({
            type: "geoSelect",
            name: e.name
          });
          for (var i = 0; i < option.series[0].data.length; i++) {
            option.series[0].data[i] = {
              name,
              itemStyle: {
                color: "hsla(226, 93%, 11%, 0.57)"
              }
            };
            if (name == option.series[0].data[i].name) {
              option.series[0].data[i] = {
                name,
                itemStyle: {
                  color: "#009ef4"
                }
              };
            }
          }
          _this.chooseArea = e.name;
        }
        myChart.setOption(option, true);
            
         //点击后取到选中的区域，传到store联动读取就行了
        _this.$store.state.chooseArea = _this.chooseArea;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.echbox {
  height: 100%;
  width: 100%;
}
</style>

接下来最重要的地方就是js文件，我们应该如何通过json文件去修改它呢

默认的省市地图的json文件是这样的

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        echarts = require('echarts/lib/echarts') // TODO 上述方法都无法引入echart，这里再导一遍，亲测，这里很重要，要不会导致加载不出报错
      }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }

接下来，你就需要你的json文件了

echarts.registerMap('山东', {你的json文件内容}

这里2个参数，一个是对应你的vue页面的map汉字，一个是你json地图格式转化成js文件

很多朋友问json去哪找啊，我百度是没找到开源的，去的GitHub找的文件包，这里附一下地址，自行下载

https://github.com/NeiHengLiu/echartsMapData   把里面你需要的省或市的json拿出来替换上就可以了，区县的图echarts跟其他插件是不提供的，需要靠你们的python朋友进行区域划分抓取咯。

觉得实用好用的，打赏一下呗，点关注不迷路，我是你们的咖啡哥！！！