echarts堆叠柱状图,鼠标悬浮在上方时显示数值
时间: 2023-10-25 08:13:56 浏览: 115
您可以使用Echart提供的tooltip功能来实现此功能。您需要在Echart的option中设置series中的itemStyle样式,其中normal和emphasis属性中都需要设置tooltip属性。示例如下:
```
option = {
//...
series: [{
//...
itemStyle: {
normal: {
barBorderRadius: [5, 5, 0, 0], //柱状图的圆角
color: '#003366', //柱状图的颜色
},
emphasis: {
barBorderRadius: [5, 5, 0, 0],
color: '#006699',
opacity: 0.8, //鼠标悬浮时的透明度
borderColor: '#fff', //边框颜色
borderWidth: 2, //边框线宽
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
},
},
tooltip: { //这里设置tooltip
show: true,
formatter: '{b}:{c}', //显示的格式
},
},
},
}],
//...
};
```
在以上代码中,我们在emphasis属性中设置了tooltip属性,并可以通过formatter属性指定tooltip的显示格式。这样,在鼠标悬浮在柱状图上时,便会出现提示框显示该柱状图对应的数值。
阅读全文