vue中使用ECharts实现中国地图配置详解（配官方配置地址）

前言：

1、实现自定义左下角的视觉映射组件（包括自定义颜色、文字、图元大小）
2、实现自定义悬浮提示框
如下图所示：

实现步骤：

一、在vue中安装echarts

1、npm install echarts

二、在vue组件中使用echarts

1、在组件中先引入echarts
import echarts from 'echarts' // 引入echarts中国地图数据
2、在组件中引入中国地图数据
require('echarts/map/js/china')
ps：地图类的echarts实现是需要额外引入地图数据了。
见官网：https://echarts.baidu.com/option.html#geo.map

3、在组件页面内定一个标签来渲染地图

<div id="china_map" style='width:600px;height:400px;'> </div>

4、初始化 echarts 实例和指定配置参数
我一般是在mounted生命周期函数中进行初始化地图表格数据的。

mounted () {// 初始化echarts实例this.chinachart = echarts.init(document.getElementById('china_map'))// 进行相关配置this.chartOption = { tooltip: { // 鼠标移到图里面的浮动提示框// formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatterformatter (params, ticket, callback) { // params.data 就是series配置项中的data数据遍历let localValue,perf,downloadSpeep,usability,pointif (params.data) {localValue = params.data.valueperf = params.data.perfdownloadSpeep = params.data.downloadSpeepusability = params.data.usabilitypoint = params.data.point} else { // 为了防止没有定义数据的时候报错写的localValue = 0perf = 0downloadSpeep = 0usability = 0point = 0}let htmlStr = `<div style='font-size:18px;'> ${params.name}</div><p style='text-align:left;margin-top:-10px;'>区域对应数据value：${localValue}<br/>性能perf：${perf}<br/>下载速度downloadSpeep：${downloadSpeep}<br/>可用性usability：${usability}<br/>监测点数point：${point}<br/></p>`return htmlStr}// backgroundColor:"#ff7f50",//提示标签背景颜色// textStyle:{color:"#fff"} //提示标签字体颜色}, // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMapvisualMap: { // 左下角的颜色区域type: 'piecewise', // 定义为分段型 visualMapmin: 0,max: 1000,itemWidth: 40,bottom: 60,left: 20,pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式{gt: 900, lte: 1000, label: '非常好', color: '#6ad86e'}, // (900, 1000]{gt: 500, lte: 900, label: '正常', color: '#9adcfa'}, // (500, 900]{gt: 310, lte: 500, label: '警告', color: '#ffeb3b'}, // (310, 500]{gt: 200, lte: 300, label: '较差', color: '#ff9800'}, // (200, 300]{gt: 10, lte: 200, label: '非常差', color: 'orangered'}, // (10, 200]{value: 0, label: '无数据', color: '#999'} // [0]]},// geo配置详解： https://echarts.baidu.com/option.html#geogeo: { // 地理坐标系组件用于地图的绘制map: 'china', // 表示中国地图// roam: true, // 是否开启鼠标缩放和平移漫游zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）label: {show: true},itemStyle: { // 地图区域的多边形 图形样式。borderColor: 'rgba(0, 0, 0, 0.2)',emphasis: { // 高亮状态下的多边形和标签样式shadowBlur: 20,shadowColor: 'rgba(0, 0, 0, 0.5)'}}},series: [{name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）type: 'map',geoIndex: 0,label: {show: true},// 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）data: [{'name': '北京','value': 599,'perf': '0.501s', // 性能'downloadSpeep': '1.221MB/s', // 下载速度'usability': '100%', // 可用性'point': '250' // 监测点}, {'name': '上海','value': 142}, {'name': '黑龙江','value': 44}, {'name': '新疆','value': 999,'perf': '0.501s', // 性能'downloadSpeep': '1.221MB/s', // 下载速度'usability': '100%', // 可用性'point': '250' // 监测点}, {'name': '深圳','value': 92}, {'name': '湖北','value': 810}, {'name': '四川','value': 453}]}]}// 使用刚指定的配置项和数据显示地图数据this.chinachart.setOption(this.chartOption)}

注意：
我在跟后台对接的时候，后台返回的数据有些是和原配置的属性名不一样的，导致数据无法渲染，所以我经过测试叫后台把属性名改成成和echarts默认属性名一样后就能正常渲染数据了（如果地图不能正常渲染那么可以尝试对照下面的进行排查）。
（比如：
series配置项中的data中的数据，name如果想要能正常匹配上地图上的地区名，那么就最好使用name属性名；
visualMap配置项中的pieces中的value值，如果只需要相等的情况渲染对应数值区域的颜色，那么就需要规定属性名为value，然后series配置项中的data中的数据也是要定义数据属性名为value
）