自定义Echarts地理分布图tooltip显示内容

在为某省开发手机版环境监测系统中需要在Echarts tooltip 中展示特定的内容，echarts默认的展示方案并不能满足我们的需求，因此就需要我们进行手动改造。

最终效果图：

实现原理

通过echarts提供的

formatter

参数自定义我们所需要展示的内容

具体实现方法

1、首先在格式化数据的时把我们所需要展示的数据传入到echarts图表中，例如：

for(let m of this.pointerMapData){
switch(m.level){
case 1:
dataOne.push({'name': m.name,'value': [m.lng, m.lat],'aqi': m.aqi});
break;
case 2:
dataTwo.push({'name': m.name,'value': [m.lng, m.lat],'aqi': m.aqi});
break;
case 3:
dataThree.push({'name': m.name,'value': [m.lng, m.lat],'aqi': m.aqi});
....

这里，我们在格式化数据时，除了参入了地理分布图所需要的经度纬度之外，额外传入了我们所需要展示的AQI字段

2、获取传入的数据，从新格式化所需要展示的内容，例如：

// 开启工具栏
tooltip: {
"trigger": "item",
"confine": true,
"formatter": (p)=>{
// console.log(JSON.stringify(p));
let dataCon = p.data,
txtCon = `${dataCon.name}</br>AQI：${dataCon.aqi}`
return txtCon

}
},

在

formatter

参数箭头函数中，我们传入了p，通过

console

打印P值，我们会发现里面data字段里包含了我们传入的数据，接下来就是按照我们的需求格式化内容然后return出去就可以了。