echarts中柱状图多根柱子
时间: 2023-11-15 19:56:26 浏览: 81
您可以使用 echarts 中的 series-bar 组件来实现柱状图多根柱子的效果。在 series-bar 中,通过设置 data 数组中每个元素的 value 值来控制每根柱子的高度。同时,可以通过设置 x 轴上的数据类别来控制每根柱子的位置。
以下是一个简单的示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [{
data: [10, 20, 30, 40],
type: 'bar'
}]
};
```
在上面的代码中,xAxis 中的 data 数组包含了四个数据类别,分别对应四根柱子的位置。series 中的 data 数组包含了四个数值,分别对应四根柱子的高度。
如果需要绘制多组数据,可以在 series 数组中添加多个对象,每个对象对应一组数据。例如:
```javascript
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
yAxis: {
type: 'value'
},
series: [{
name: '数据1',
data: [10, 20, 30, 40],
type: 'bar'
}, {
name: '数据2',
data: [20, 30, 40, 50],
type: 'bar'
}]
};
```
在上面的代码中,series 数组中包含了两个对象,分别对应两组数据。每个对象中的 name 属性用于设置数据系列的名称,data 数组用于设置每根柱子的高度。
阅读全文