Echarts3（百度）工具提示中的彩色圆形
默认情况下，工具提示具有与图形相同颜色的圆形，如下所示：
http://echarts.baidu.com/gallery/editor.html?c=candlestick-brush http://echarts.baidu.com/gallery/editor.html?c=candlestick-brush
但是，如果我自定义工具提示，它会删除颜色编码的圆形，如下例所示：
https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en https://ecomfe.github.io/echarts/doc/example/tooltip.html#-en
有没有办法使用自定义工具提示并将颜色放回去。
这是另一种解释方式。
转到此链接简单派 http://echarts.baidu.com/gallery/editor.html?c=pie-simple你会发现图表没有彩色圆圈。
删除以下行：
formatter: "{a} <br/>{b} : {c} ({d}%)"
然后按刷新即可看到回合回来。
ECharts支持用户自定义工具提示，包括您想要的颜色。
例如，您有一个折线图演示像这样 http://echarts.baidu.com/demo.html#line-stack，并且您想要更改默认工具提示，请添加%或工具提示之后的其他内容，而不会丢失默认颜色。只需将工具提示代码替换为下面的代码即可。
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%，我们添加自定义的%到工具提示。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
