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 =</