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.formatter
      formatter (params, ticket, callback) { 
        // params.data 就是series配置项中的data数据遍历
        let localValue,
          perf,
          downloadSpeep,
          usability,
          point
        if (params.data) {
          localValue = params.data.value
          perf = params.data.perf
          downloadSpeep = params.data.downloadSpeep
          usability = params.data.usability
          point = params.data.point
        } else { // 为了防止没有定义数据的时候报错写的
          localValue = 0
          perf = 0
          downloadSpeep = 0
          usability = 0
          point = 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#visualMap
    visualMap: { // 左下角的颜色区域
      type: 'piecewise', // 定义为分段型 visualMap
      min: 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#geo
    geo: { // 地理坐标系组件用于地图的绘制
      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
）