Vue中使用Echarts地图实现某省市区县地图的展示功能

在移动中台运营指标分析-大屏 和 开发点赞民警应用开发的过程中，需要展示某市的区县地图。通过这个两个项目开发应用实践和不断研究。

效果图展示：

大致总结了一下实现的方法步骤：
      1、通过阿里云数据可视化平台选择需要展示的区域范围（阿里云数据可视化平台网址：）或者自己从https://datav.aliyun.com/portal/school/atlas/area_selector选择下载所需要区域的geoJson文件。
      2、在Vue项目中安装echarts依赖（npm i echarts -S）
      3、导入echarts（import echarts from 'echarts'）
      4、在页面内定一个标签来渲染地图
      5、初始化 echarts 实例和指定配置参数，般是在mounted生命周期函数中进行初始化地图表格数据的。

注意：series配置项中的data中的数据，name如果想要能正常匹配上地图上的地区名，那么就最好使用name属性名；visualMap配置项中的pieces中的value值，如果只需要相等的情况渲染对应数值区域的颜色，那么就需要规定属性名为value，然后series配置项中的data中的数据也是要定义数据属性名为value。

地图模块代码，仅供参考：

 <div id="echartMap" class="echartMap"></div>

getEchartMap(){
            $.get("https://geo.datav.aliyun.com/areas_v3/bound/370800_full.json", function(geoJson) {
                echarts.registerMap("ISD", geoJson);
                var chart = echarts.init(document.getElementById("echartMap"));
                chart.setOption({
                    title: {
                        text: '各区县用户总数及排名',
                        left: 'left',
                        padding:[10,0,10,30],
                        textStyle: {
                            color: '#fff',
                            fontSize: 24,
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        position: 'top',
                        formatter: '{b}<br/>{c}',
                    },
                  visualMap: {
                    type: "continuous",
                    // min: 800,
                    // max:10000,
                    // text: ["High", "Low"],
                    realtime: false,
                    calculable: true,
                    borderColor:"#5376B4",                         //边框颜色
                    borderWidth:3,                               
                    inRange: {
                        color: ['#244790']
                    },
                    show: false,
                  },
                  series: [
                    {
                      type: "map",
                      mapType: "ISD",
                      top:"14%",
                      roam: false,//禁止缩放
                      label: {
                        normal: {
                          show: true,
                          color: "#fff"
                        },
                        emphasis: {
                          show: true
                        }
                      },
                      itemStyle: {
                        emphasis: { label: { show: true } }
                      },
                      data: [
                            {value: 30, name: '邹城市',},
                            {value: 80, name: '曲阜市',},
                            {value: 50, name: '梁山县',},
                            {value: 44, name: '泗水县'},
                            {value: 30, name: '汶上县'},
                            {value: 48, name: '嘉祥县'},
                            {value: 75, name: '金乡县'},
                            {value: 80, name: '鱼台县'},
                            {value: 84, name: '微山县'},
                            {value: 30, name: '兖州区'},
                            {value: 30, name: '任城区'},
                      ]
                    }
                  ]
                });
                var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
            var _this = this;
            var index= 0;
                // 鼠标移动上去的时候的高亮动画
                chart.on("mouseover", function(param) {
            flag = false;
            clearInterval(_this.startCharts);
            //取消之前高亮图形
            chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index
            });
            
            index= param.dataIndex     
            //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
            
            //高亮当前图形
            chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex
            });
            //显示tooltip
            chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex
            });
        });

        //图标随窗口大小缩放
        window.addEventListener("resize", function() {
            chart.resize();
        });

        //自动高亮显示
        var chartHover = function() {
            var dataLen = option.series[0].data.length;

            // 取消之前高亮的图形
            chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index
            });
            index= (index+ 1) % dataLen;
            
            // 高亮当前图形
            chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: index
            });
            // 显示 tooltip
            chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: index
            });
        };

        _this.startCharts = setInterval(chartHover, 5000);
        // 4、鼠标移出之后，恢复自动高亮
        chart.on("mouseout", function(param) {
            if (!flag) {
                _this.startCharts = setInterval(chartHover, 5000);
                flag = true;
            }
        });
              });
              
        },