echarts柱状图多组数据
时间: 2023-10-18 15:05:55 浏览: 69
echarts柱状图可以显示多组数据。你可以使用echarts的xAxis配置项来设置横坐标的数据,然后使用series配置项中的data属性来设置对应的纵坐标数据。每组数据可以在series配置项中通过多个对象来表示,例如:
```javascript
option = {
xAxis: {
type: 'category',
data: ['数据一', '数据二', '数据三'] // 横坐标数据
},
yAxis: {
type: 'value'
},
series: [
{
name: '组一',
type: 'bar',
data: [10, 20, 30] // 组一的纵坐标数据
},
{
name: '组二',
type: 'bar',
data: [15, 25, 35] // 组二的纵坐标数据
}
]
};
```
这样,echarts柱状图就可以同时展示多组数据了。
相关问题
echarts柱状图传多组数据
可以使用 echarts 的 series 属性来传递多组数据,每组数据对应一个 series。示例代码如下:
```
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: 'Series 1',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}, {
name: 'Series 2',
data: [90, 150, 200, 85, 95, 120, 140],
type: 'bar'
}]
};
```
以上代码中,series 属性包含了两个对象,分别对应两组数据。每个对象包含了 name、data 和 type 属性,分别表示系列名称、数据和图表类型。
echarts柱状图后端返回数据格式
Echarts 柱状图展示数据的格式可以是多种形式,以下是其中一种常用的格式,即数组对象形式:
```javascript
[
{name: '数据1', value: 100},
{name: '数据2', value: 200},
{name: '数据3', value: 300},
{name: '数据4', value: 400},
]
```
其中,`name` 表示柱状图的类别名称,`value` 表示该类别对应的数值大小。如果有多个柱状图需要展示,可以在数组中添加多个对象,每个对象对应一个柱状图。如果需要展示多组数据,可以使用多维数组来表示,例如:
```javascript
[
{name: '数据1', data: [100, 200, 300]},
{name: '数据2', data: [400, 500, 600]},
{name: '数据3', data: [700, 800, 900]},
]
```
其中,`name` 表示柱状图的类别名称,`data` 表示该类别对应的数值数组。每个数组中的元素对应一个柱状图,数组的长度决定了柱状图的数量。