Javascript Echarts3（百度）工具提示中的彩色圆形

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

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

但如果我自定义工具提示，它会删除颜色编码的圆形，如本例所示：

有没有一种方法可以使用自定义工具提示并将颜色放回原处

这里有另一种解释方法。 转到此链接 你会发现没有彩色圆形的图表

删除以下行：

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

格式化程序：{a}
{b}:{c}（{d}%）“

---

然后按刷新，您将看到圆角。

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

var formatTooltipLine=函数（颜色）{
返回“行文本”
}
var格式化程序=函数（）{
//自定义标题
风险价值线=[“2016”]；
//定制线
[“红色”、“橙色”].forEach（函数（颜色）{
line.push（formatTooltipLine（颜色））；
});
返回行。连接（“
”）；
}

例如：

---

电子零件支持用户定义的工具提示，包括您想要的颜色

例如，您有一个折线图演示，您希望更改默认工具提示，在工具提示后添加

%

或其他内容，而不丢失默认颜色。只需用下面的代码替换工具提示代码即可

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

工具提示：{
触发器：“轴”，
轴指针：{
动画：真的
},
格式化程序：函数（参数）{
var colorSpan=color=>''；
设rez=''+参数[0]。axisValue+'
'；
//console.log（params）；//对于调试非常有用
参数forEach（项=>{
//console.log（item）；//对于调试非常有用
var xx=''+colorSpan（item.color）+'+item.seriesName+'：'+item.data+'%'+'
'
rez+=xx；
});
返回rez；
}        
},

---

使用此工具提示代码，您将看到原始工具提示

颜色邮件营销: 90

变成

颜色邮件营销: 90%

，我们将自定义的

%

添加到工具提示中。

Echarts已使用特定颜色在每个系列的参数中发送标记html。要创建具有原始外观的工具提示，只需将其用于折线图：

{
格式化程序：（args）=>{
让工具提示=`${args[0].axisValue}
`；
args.forEach（{marker，seriesName，value}）=>{
值=值| |[0,0]；
工具提示+=`${marker}${seriesName}-${value[1]}
`；
});
返回工具提示；
}

将其用于OP以外的其他用途。formatter函数中的“params”参数在我的情况下不是数组，而是数组项（在我的情况下，图表中的每个项都单独调用formatter）。编辑：它取决于“触发器”这是你的axis和我的项目。很好的捕获！这是一个非常有用但没有文档记录的功能。