自定义Echarts地理分布图tooltip显示内容-蒲公英云

自定义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
            }
        },