echarts折线图tooltip自定义formatter
若想自定义tooltip就要用到formatter,如何实现呢?formatter中的params到底是啥呢?如图所示:打断点看params是这样的。这个params中的数据取决于我们series中的数据,也就是这个。在seriesData中的data我们通常是这样的[123,456,789,147,852,963],这种包含数字的数组,如果想要实现自定义formatter我们就要将data里的数
·
若想自定义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 +
'    分组:' +
a[i].data.group +
'    相线:' +
a[i].data.phase +
'    电流:' +
a[i].data.value +
'</span>'
)
}
listItem = list.join('<br/>')
return '<div style="padding:6px;">' + listItem + '</div>'
}
更多推荐
已为社区贡献5条内容
所有评论(0)