首先需要一个绘制中国地图的json文件（资源还在审核，审核过后会重新贴上来）
1、首先引入echarts和json文件，在需要的地方引即可
import echarts from 'echarts';const chinaJson = require('./china2.json');
2、注册中国地图（重要代码），这是我写的一个动态的地图组件，可以根据自己的需求进行改造
init(data) {let dataSourcePie = echarts.init(document.getElementById(data.id));echarts.registerMap('china', chinaJson);let option = {title: {text: '',left: 'center'},tooltip: {trigger: 'item',formatter: function(params) {if(!params.value){return '该地区暂无访问量';}return params.seriesName+'<br />'+params.name+'：'+params.value+'次'},confine: true},visualMap: {min: 0,max: 0,text: ['High', 'Low'],realtime: false,calculable: true,itemWidth:10,itemHeight: 70,inRange: {color: ECHARTS_COLOR.MAP_COLOR}},textStyle: {fontSize: 12,color: '#87CEFA'},series: [{name: '',type: 'map',zoom: 1.4,label: {show: false},center: [104.97, 35.71],mapType: 'china', // 自定义扩展图表类型itemStyle: {// normal: {label: {show: true}},emphasis: {label: {show: true}}},data: [],}]};option.title.text = data.title;option.visualMap.max = data.max;option.series[0].name = data.name;option.series[0].data = data.data;dataSourcePie.setOption(option);window.addEventListener('resize', function () {dataSourcePie.resize();});}
最终实现的效果是数越大，颜色越深，颜色在visualMap的inRange的color定义
另外发现的一个小tip，当注册中国地图用的不是’china’,是其他字符串，例如’CHINA’的时候，南海诸岛的会消失，这个可以当做一个工具，也可以当做一个重点用
