Echarts3(百度)在工具提示中着色

Question

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

然后按<运行>进行刷新,您将看到回合.

Answer 1

ECharts支持用户定义的工具提示,包括您想要的颜色.

例如你有一个折线图演示这样的,并且要更改默认的提示,添加%无什么的提示后,就失去了默认color.Just用下面这段代码替换提示代码.

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%,我们将自定义添加%到工具提示.

Answer 2

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