echarts柱状图自动显示数字
时间: 2024-10-09 22:03:16 浏览: 43
解决echarts 一条柱状图显示两个值,类似进度条的问题
ECharts是一款流行的JavaScript数据可视化库,它的柱状图可以自动生成并显示数据标签。要在ECharts的柱状图上显示数值,你需要设置`label`配置项。例如:
```javascript
var option = {
xAxis: { // x轴
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: { // y轴
type: 'value'
},
series: [{
name: '销量',
type: 'bar', // 柱状图
data: [5, 20, 36, 10, 10], // 数据数组
label: { // 标签配置
show: true, // 是否显示
position: 'top', // 标签位置,可选值有'top'、'bottom'等
formatter: '{c}%' // 格式化函数,{c}会被当前柱子的值替换
}
}]
};
// 使用echarts实例渲染图表
myChart.setOption(option);
```
在这个例子中,`formatter`选项允许你定制每个柱子上的文本内容,`'{c}%'`表示显示柱子的百分比值。
阅读全文