echarts柱状图刻度区间添加文字在顶部
时间: 2023-06-29 20:05:52 浏览: 122
Echarts实现柱状图效果
4星 · 用户满意度95%
你可以使用 ECharts 中的 `label` 属性来在柱状图上方添加文字。具体步骤如下:
1. 找到对应的 `yAxis` 配置项,设置 `axisLabel` 属性中的 `show` 值为 `false`,这样就可以去掉默认的刻度值。
2. 在 `series` 配置项中的每个数据项中,设置 `label` 属性中的 `show` 值为 `true`,并在 `formatter` 函数中通过 `params.value` 获取该数据项的值,然后将其作为标签文字返回。
3. 设置 `label` 属性中的 `position` 值为 `'top'`,这样标签就会出现在柱状图的上方。
以下是一个简单的示例代码:
```javascript
option = {
// ...
yAxis: {
type: 'value',
axisLabel: {
show: false
}
},
series: [{
name: '数据',
type: 'bar',
data: [10, 20, 30, 40, 50],
label: {
show: true,
position: 'top',
formatter: function(params) {
return params.value;
}
}
}]
};
```
在这个示例中,我们设置了一个柱状图,数据为 `[10, 20, 30, 40, 50]`,并在每个数据项上方添加了对应的标签。
阅读全文