Echarts3(百度)工具提示中的彩色圆形
默认情况下,工具提示具有与图表颜色相同的圆形,如下所示:
http://echarts.baidu.com/gallery/editor.html?c=candlestick-brush
但是,如果我自定义工具提示,它会删除颜色编码的圆形,如下例所示:
https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en
有没有办法使用自定义工具提示并将颜色放回去。
这是另一种解释方式。 转到此链接 简单的馅饼 你会发现图表没有彩色圆圈。
删除以下行:
formatter: "{a} <br/>{b} : {c} ({d}%)"
然后按<运行>刷新,你会看到圆背。
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;
}
},
有了这个提示代码,你会看到原来的提示
color 邮件营销: 90
变成了color 邮件营销: 90%
,我们在提示中添加了自定义的%
。
Echarts 已经在每个系列的参数中以特定颜色发送标记 html。要创建原始的工具提示,您可以简单地将其用于折线图:
{
formatter : (args) => {
let tooltip = `<p>${args[0].axisValue}</p> `;
args.forEach(({ marker, seriesName, value }) => {
value = value || [0, 0];
tooltip += `<p>${marker} ${seriesName} — ${value[1]}</p>`;
});
return tooltip;
}
}
解决此问题的一种方法是在工具提示格式化程序中返回自定义 HTML,例如:
var formatTooltipLine = function(color){
return "<span style='display:inline-block;width:10px;height:10px;border-radius:50%;background-color:"+color+";margin-right:5px;'></span><span>line text</span>"
}
var formatter = function(){
// custom title
var lines = ["<b>2016</b>"];
// custom lines
["red", "orange"].forEach(function(color){
lines.push(formatTooltipLine(color));
});
return lines.join("<br>");
}