echarts折线图tooltip自定义formatter

最新推荐文章于 2025-04-21 10:23:51 发布

Adasunshine

最新推荐文章于 2025-04-21 10:23:51 发布

阅读量1w

点赞数 12

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/FormAda/article/details/123378972

版权

本文详细解释了如何在ECharts中通过formatter函数实现自定义tooltip，介绍params数据结构，以及如何将series数据转换为适合tooltip展示的对象数组。重点讲解了如何处理数据以便在 tooltip 中显示系列名称、分组和数值信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

若想自定义tooltip就要用到formatter，如何实现呢？formatter中的params到底是啥呢？

如图所示：

打断点看params是这样的。

这个params中的数据取决于我们series中的数据，也就是这个。

在seriesData中的data我们通常是这样的[123,456,789,147,852,963],这种包含数字的数组，如果想要实现自定义formatter我们就要将data里的数据处理一下写成数组对象的形式，如下：

[
     { name: "xxx", value: 123 },
     { name: "xxx", value: 456 },
     { name: "xxx", value: 789 },
]

这个里面的name就是我们需要在tooltip中展示的项了，可以写多个

formatter的代码如下:

 formatter: function (a) {
            let list = []
            let listItem = ''
            for (var i = 0; i < a.length; i++) {
              list.push(
                '<span style="display: inline-block;padding: 5px 0;" >' +
                '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                a[i].color +
                ';border-radius: 50%;}"></i><span style="width:15px; display:inline-block;">' +
                '</span>设备：' +
                a[i].seriesName +
                '&nbsp&nbsp&nbsp&nbsp分组：' +
                a[i].data.group +
                '&nbsp&nbsp&nbsp&nbsp相线：' +
                a[i].data.phase +
                '&nbsp&nbsp&nbsp&nbsp电流：' +
                a[i].data.value +
                '</span>'
              )
            }
            listItem = list.join('<br/>')
            return '<div style="padding:6px;">' + listItem + '</div>'
          }