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

﹏ヽ暗。殇╰゛Y 2022-07-03 13:57 512阅读 0赞

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

最终效果图：

![这里写图片描述][SouthEast]

### 实现原理 ###

通过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出去就可以了。

[SouthEast]: /images/20220618/7b0fda492be8435baf405dcfc3d5f4fd.png