Search code examples
javascriptchartsbaiduecharts

Echarts3 (baidu) colored round in tooltip

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.

enter image description here

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.

Solution

  • 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.