【解决】Echarts柱状图上tooltip提示框里面的文字前面的圆点颜色及大小调整
调整Echarts柱状图上tooltip提示框里面的圆点颜色及大小(默认情况下该圆点颜色是与柱状图颜色保持一致的)。
·
【问题】
调整Echarts柱状图上tooltip提示框里面的圆点颜色及大小(默认情况下该圆点颜色是与柱状图颜色保持一致的)。
如下图:
【解决】
示例代码如下(tooltip下面的trigger类型要为item):
tooltip: {
trigger: 'item', // tooltip下面的trigger类型要为item
},
// ......
series: [
{
name: 'XXXX',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220],
tooltip: {
formatter:function() {
return '<span style="display:inline-block;margin-right:5px;border-radius:100px;width:100px;height:100px;background-color:yellow"></span>'
}
},
}
]
示例效果如下:
实际开发过程中还要兼顾到圆点以及后面的文字介绍,示例代码如下:
formatter: function(params) {
var result = ''
var dotaDta = '<span style="display:inline-block;margin-right:5px;border-radius:100px;width:100px;height:100px;background-color:#666"></span>'
var dotaDta2 = '<span style="display:inline-block;margin-right:5px;border-radius:100px;width:100px;height:100px;background-color:#888"></span>'
result += params[0].axisValue + "</br>" + dotaDta +'第一行文字介绍:' + params[0].data+ "</br>" + dotaDta2 +'第二行文字介绍:' + params[1].data
return result
}
更多推荐
已为社区贡献23条内容
所有评论(0)