Echarts3 (baidu) colored round in tooltip
By default the tooltip has rounds of the same colour as graph, like this:
http://echarts.baidu.com/gallery/editor.html?c=candlestick-brush
But if I customize the tooltip it removes the colour coded round like in this example:
https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en
Is there a way to use custom tooltip and put the colour round back.
Here is another way to explain it. Go to this link pie-simple and you will find charts with no coloured round.
delete the following line:
formatter: "{a} <br/>{b} : {c} ({d}%)"
then press <运行> to refresh and you will see the round back.
ECharts support user-defined tooltip, include the color you wanted.
For example you have a line chart demo like this , and you want to change the default tooltip, add %
or something else after the tooltip without lose the default color.Just replace tooltip code with this code below.
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;
}
},
with this tooltip code, you will see the original tooltip color 邮件营销: 90
become color 邮件营销: 90%
, we add self-defined %
to tooltip.
Echarts already sends the marker html in params of each series with specific color. To create an original looking tooltip you can simply use that like this for line chart:
{
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;
}
One way to solve this is to return custom HTML in your tooltip formatter, for instance:
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>");
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.