echarts中的柱状图多个标签
时间: 2023-10-21 11:16:55 浏览: 246
在echarts中,可以通过设置series中的label选项来实现柱状图多个标签的显示。
例如,以下代码可以实现在柱状图上显示数据值和数据百分比两个标签:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
label: {
show: true,
position: 'top',
formatter: '{c}'
},
itemStyle: {
color: '#7cb5ec'
}
},{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
label: {
show: true,
position: 'insideTop',
formatter: function(params) {
var percent = ((params.value / 1000) * 100).toFixed(2) + '%';
return percent;
}
},
itemStyle: {
color: '#434348'
}
}]
};
```
其中,第一个柱状图显示数据值,使用了默认的label样式;第二个柱状图显示数据百分比,使用了formatter函数自定义了标签内容,并将标签位置设置为insideTop。
阅读全文