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。

地图图表的配置项，仅供参考：

var option = {
    title: [{
         text: '各分厅用户量排名',
         left: 'left',
         padding:[10,0,0,30],
         textStyle: {
              color: '#fff',
              fontSize: 24,
         },
        },
        {
         text: '单位：万',
         left: 240,
         padding:[25,0,0,0],
         textStyle: {
             color: '#fff',
             fontSize: 14,
             fontFamily:'Adobe Heiti Std R',
         },
    },],
    tooltip: {
        trigger: 'item',
        position: 'top'
    },
    xAxis: {
    //名称必须与实际名称一致
    data: ["邹城市","曲阜市","梁山市","泗水市","汶上市","嘉祥县","金乡县","鱼台县","微山县","兖州区","任城区"], 
    axisLabel: { interval: 0, rotate: 40,
         textStyle: {
             color: '#fff',
             fontFamily:'Adobe Heiti Std R',
             fontSize: 9,
         }
     },
     axisTick: {
          show: false,
     },
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: 14,
            }
        },
        splitLine: {  
            show:true,   //X网格线
            lineStyle:{   //x网格线
                color: 'rgba(241,242,243,0.3)'
            }
        }
    },
    grid: {
        top:'28%',
        left: '5%',
        width:'90%',
        height:'72%',
        containLabel: true
    },
    series: [{
         type: 'bar',               
         data: [10, 11, 12, 13, 14, 15,16,17,18,19,20],//数据
         showBackground: false,
         barWidth : 10,//柱图宽度
         itemStyle: {
              color: new echarts.graphic.LinearGradient(
                     0, 0, 0, 1,
                     [
                       {offset: 0, color: '#77ABFF'},
                       {offset: 1, color: '#A279F6'}
                     ]
              )
              },
    }]