Echarts3 (baidu) colored round in tooltip

Question

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.

Answer 1

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>");
}

Example: https://cdn.datamatic.io/runtime/echarts/3.3.0_61/view/index.html#id=117670017722819924657/0B3wq5VFn9PllSEVsQTJvcnVBZU0