echarts条形图在柱子中间显示数值
时间: 2023-09-20 22:11:44 浏览: 589
echarts 圆环图 中间显示数据 下边显示标题
要在 Echarts 的柱状图中间显示数值,可以使用 Echarts 的 label 配置项,将其设置为在柱子顶部显示数值。具体实现方式如下:
1. 在 Echarts 的 option 中找到对应的 series 配置项,并将其 type 设置为 'bar',表示柱状图。
2. 在该 series 的 itemStyle 中,设置 label 的显示样式,可以通过 textStyle 控制文字的颜色、字体等样式。
3. 在 label 的 normal 中,设置 show 为 true,表示显示 label,设置 position 为 inside,表示 label 在柱子内部显示。
4. 在 label 的 normal 中,设置 formatter 为 '{c}',表示显示数据项的值。
下面是一个示例代码片段:
```javascript
option = {
// ... 其他配置项
series: [{
type: 'bar',
data: [10, 20, 30, 40, 50],
itemStyle: {
// 设置 label 的样式
label: {
show: true,
position: 'inside',
textStyle: {
color: '#fff',
fontSize: 14
},
// 显示数据项的值
formatter: '{c}'
}
}
}]
};
```
通过以上配置项,就可以在柱状图中间显示数值了。
阅读全文