Echarts3（百度）提示框中的彩色圆形

Question

Echarts3 (百度) 工具提示中的彩色圆

默认情况下，工具提示的圆形与图表颜色相同，如下所示:

http://echarts.baidu.com/gallery/editor.html?c=candlestick-brush

但如果我自定义了工具提示，它会删除颜色编码的圆圈，就像这个例子:

https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en

有没有办法使用自定义工具提示并恢复带颜色的圆圈。

这是另一种解释方法。 转到此链接 pie-simple 您将找到没有彩色圆的图表。

删除以下行：

formatter: "{a} <br/>{b} : {c} ({d}%)"

然后按下<运行>以刷新，您将看到圆形背景。

- Yevgeniy Afanasyev

Answer 1

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% ，我们向工具提示中添加自定义的%。

- Armstrongya

---

在我的情况下，“格式化程序”函数中的“params”参数不是数组，而已经是数组项（在我的情况下，“格式化程序”针对图表中的每个项目单独调用）。编辑：意识到这取决于“触发器”，在您的情况下是轴，在我的情况下是项。如果将用于其他目的，则使用此内容。 - Kozuch

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

- ahmadalibaloch

---

不错的发现！这是一个非常有用但未记录的功能。 - Bruce Sun

这是方法。 - Raph

Answer 3

为解决这个问题，一种方法是在您的工具提示格式化程序中返回自定义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>");
}

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

- Jaroslav Benc