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

时间：2022-11-02 08:01:29

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

最终效果图：

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

实现原理

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

标签：

相关文章