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 支持自定義工具提示，包含你想要的顏色。

例如，您有一個像這樣的折線圖演示，並且您想更改默認工具提示，在工具提示后添加%或其他內容而不丟失默認顏色。只需將工具提示代碼替換為下面的代碼即可。

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 已經在每個系列的 params 中發送了帶有特定顏色的標記 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;
  }

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