echarts中柱状图多根柱子
时间: 2023-11-15 11:56:26 浏览: 51
您可以使用 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 数组用于设置每根柱子的高度。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)