echarts 地区分布图 点击省份显示对应的省份

由于echarts中没有找到地区分布图、所以从网上找了一下、留下 代码片

// 由于地区化的特殊所以要做一些特殊引入
npm install echarts --save   //先引入echarts

//main.js中
import echarts from 'echarts' // 这一步是引入echarts的插件
Vue.prototype.$echarts = echarts // 这一步是为了能在全局直接使用

//重点之处
import china from 'echarts/map/json/china.json' // 引入json文件
echarts.registerMap('china', china) // 在echarts中注册使用这个文件

//html部分：
<div id="Charts" :style="{width: '100%', height: '400px'}"></div> 
//JS部分
mounted （） {
	this.drawCharts ()
}
methods: {
drawCharts () {
	let myChart = this.$echarts.init(document.getElementById('Charts'))
    let dataList = [{ name: '北京',value: 200},{name: '四川',value: 800}] 
	myChart.setOption({
       tooltip: {
           trigger: 'item',
           formatter: function (params) {
               if(params.data){
                   return params.name+'<br/>人数：'+params.data.value+'<br/>设备：'+params.data.value;   //自行定义formatter格式  (人数/占比)
               }   
           }
       },
       visualMap: {
           min: 0,
           max: 1000,
           left: 'left',
           top: 'bottom',
           text: ['高', '低'], //取值范围的文字
           orient: 'horizontal', //控制条横向
           inRange: {
               color: ['#e0ffff', '#5D78F2'] //取值范围的颜色
           },
           show: true, //图注
           // calculable: true, //是否显示拖把
       },
       geo: {
           map: 'china',
           roam: false, //不开启缩放和平移
           zoom: 1.23, //视角缩放比例
           label: {
                normal: { //显示地区名称
                show: true,
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)'
               },
               emphasis: {
                   textStyle: {
                       color: '#fff'
                   }
               }
           },
           itemStyle: {
               normal: {
                   borderColor: 'rgba(0, 0, 0, 0.2)'
               },
               emphasis: {
                   areaColor: '#5D78F2', //鼠标选择区域颜色
                   shadowOffsetX: 0,
                   shadowOffsetY: 0,
                   shadowBlur: 20,
                   borderWidth: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
           }
       },
       series: [{
           name: '信息量',
           type: 'map',
           geoIndex: 0,
           data: dataList
       }]

   })
   window.addEventListener("resize", function () {
       setTimeout(function () {
           myChart.resize();  //为了能自适应
       }, 500)
   });
}

以上可修改（图中）更多的显示内容