若想自定义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>'
          }

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐