echarts柱状图hover显示值
时间: 2023-11-05 22:50:02 浏览: 257
echarts柱状图
要在 Echarts 的柱状图中实现 hover 显示值,你可以通过设置 series 的 label 属性来实现。具体的步骤如下:
1. 首先,在配置项中设置 tooltip 的 trigger 为 'axis',这样当鼠标悬停在柱状图上时会显示 tooltip。
```javascript
tooltip: {
trigger: 'axis'
},
```
2. 接下来,在 series 的配置中设置 label 的属性。将 show 属性设置为 true,表示显示标签。并使用 formatter 属性来定义标签的显示格式。你可以通过回调函数来自定义标签的显示内容。
```javascript
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
label: {
show: true,
formatter: function(params) {
return params.value;
}
}
}]
```
在上面的例子中,params.value 表示当前柱状图对应的数值。
3. 最后,将上述配置项和数据应用到 Echarts 的实例中,然后在页面中渲染出柱状图。
这样设置之后,当鼠标悬停在柱状图上时,会显示该柱状图对应的值。你可以根据需求自定义标签的样式和显示内容。
阅读全文