echarts不等柱状图
时间: 2023-11-07 08:03:09 浏览: 54
echarts不等柱状图可以通过在配置项中使用不同的数据格式来实现。在横轴的data属性中,可以设置多个系列项,每个系列项拥有的柱子数量可以不等,echarts会自动计算柱子数量并等分宽度显示。以下是一个示例代码:
```javascript
var option = {
xAxis: {
type: 'category',
data: ['小明', '小红', '小王']
},
yAxis: {
type: 'value'
},
series: [
{
name: '成绩',
type: 'bar',
data: [70, 92, 87],
barWidth: '30%' // 可以自定义柱宽度
}, {
name: '出勤率',
type: 'bar',
data: [80, 85, 90, 95],
barWidth: '20%' // 可以自定义柱宽度
}
]
};
myChart.setOption(option);
```
这个示例中,我们在series数组中添加了两个系列项,每个系列项都有不同数量的柱子。第一个系列项代表成绩柱状图,包含了三个柱子;第二个系列项代表出勤率柱状图,包含了四个柱子。你可以根据需求自定义每个系列项的柱子数量和宽度。
阅读全文