echarts柱状图多个度量
时间: 2023-10-11 11:08:50 浏览: 85
echarts柱状图
在 Echarts 中,要绘制多个度量的柱状图,你可以使用堆叠柱状图或者并列柱状图。下面分别介绍这两种方式的实现方法:
1. 堆叠柱状图(Stacked Bar Chart):
堆叠柱状图可以用来展示多个度量在同一个类别下的对比关系,每个度量的值会叠加在一起。
示例代码如下:
```javascript
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['度量1', '度量2', '度量3'] // 设置图例名称
},
xAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3'] // 设置类别名称
},
yAxis: {
type: 'value'
},
series: [
{
name: '度量1',
type: 'bar',
stack: '总量',
data: [100, 200, 300] // 设置度量1的数据
},
{
name: '度量2',
type: 'bar',
stack: '总量',
data: [150, 250, 350] // 设置度量2的数据
},
{
name: '度量3',
type: 'bar',
stack: '总量',
data: [200, 300, 400] // 设置度量3的数据
}
]
};
```
2. 并列柱状图(Clustered Bar Chart):
并列柱状图可以用来展示多个度量在同一个类别下的并列关系,每个度量的值会并列显示。
示例代码如下:
```javascript
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['度量1', '度量2', '度量3'] // 设置图例名称
},
xAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3'] // 设置类别名称
},
yAxis: {
type: 'value'
},
series: [
{
name: '度量1',
type: 'bar',
data: [100, 200, 300] // 设置度量1的数据
},
{
name: '度量2',
type: 'bar',
data: [150, 250, 350] // 设置度量2的数据
},
{
name: '度量3',
type: 'bar',
data: [200, 300, 400] // 设置度量3的数据
}
]
};
```
以上示例代码中的 `data` 数组对应每个度量在不同类别下的数值,你可以根据实际情况修改数据和其他配置,以满足你的需求。
阅读全文