echarts stooltip

使用接口的数据来代替echarts绘制的地图数据

1. echarts中对地图数据的渲染要符合其规范，并对要渲染的区域进行注册，使用echarts中的registerMap进行地图的注册，第一个参数为要渲染的区域名称，第二个参数为渲染区域的地理位置信息，为JSON字符串。

如果页面中有如下报错信息，就是没有对该区域进行注册

echarts.registerMap(cityname, { geoJSON: this.mapData });

2.进行了接口请求也进行了注册但是页面上地图区域为空白渲染不出来，是因为echarts中会自己进行初始化，即使没有数据。

所以我们在更新进行渲染的时候要把之前的给清空，然后再进行初始化，常用的清空函数为echarts.clear()和echarts.dispose()，之后再调用页面的初始化函数并传递相关的参数。

示例代码：

   async getLocation(cityname) {
     try {
       const data = await this.getAllPoints(cityname);
       this.mapData = data;
       this.renderMap(cityname);
       this.dispose()         // 对之前创建的进行销毁
       this.initChart(cityname) // 对新的数据进初始化操作
       // 渲染地图
     } catch (error) {
       console.log(error)
     }
   },
    async getAllPoints(cityname) {
     // 请求数据的接口
     const res = await getPoints(cityname);
     const { data } = res;
     return data;
   },
   renderMap(cityname) {
     if (this.mapData) {
       // 注册地图 
       echarts.registerMap(cityname, { geoJSON: this.mapData });
     }
   },

3.地图可以正常显示，但是地图上各个区域的tooltip的相关数据信息显示错误。

查找错误步骤：

通过在控制台进行打印，查看是否数据没有传递过去。
传递过去了，在tooltip的formatter函数中，打印传递过来的params参数，数据一直为undefined，这个params的参数就是从option下面series的data里面传递过来的，但是一直获取不到，直到，把series的data里面的数据写死，才知道是name的对应问题。

有两拨很重要的数据渲染，一种是echarts对数据渲染还有一种是请求接口进行的数据渲染，这两个里面的数据名称是不一致的，简言之，数据里面的name是北京市，但是echarts里面的name是北京，这样肯定是对不上的。

最终，后端数据返回有问题，与其他接口返回不一致。

在echarts地图中，name对应尤其关键，如果对应不上，一定不会正确的渲染。

echarts渲染流程

// HTML 代码
<div id="chart" style="height: 600px;"></div>

// JavaScript 代码
// 导入 ECharts 库
import echarts from 'echarts';

// ECharts 图表
const chart = echarts.init(document.getElementById('chart'));

// 注册地图数据
const geoJson = { /* 地图数据 */ };
echarts.registerMap('myMap', geoJson);

// 图表配置项
const option = { /* 图表配置项 */ };

// 使用 setOption() 方法加载图表
chart.setOption(option);