ECharts 支持自定义工具提示,包括你想要的颜色。
例如,您有一个这样的折线图演示,并且您想更改默认工具提示,在工具提示%
之后添加或其他内容而不丢失默认颜色。只需将工具提示代码替换为下面的代码即可。
tooltip : {
trigger: 'axis',
axisPointer: {
animation: true
},
formatter: function (params) {
var colorSpan = color => '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
let rez = '<p>' + params[0].axisValue + '</p>';
//console.log(params); //quite useful for debug
params.forEach(item => {
//console.log(item); //quite useful for debug
var xx = '<p>' + colorSpan(item.color) + ' ' + item.seriesName + ': ' + item.data + '%' + '</p>'
rez += xx;
});
return rez;
}
},
有了这个tooltip代码,你会看到原来的tooltipcolor 邮件营销: 90
变成了color 邮件营销: 90%
,我们在tooltip中添加自定义%
。