echarts堆叠柱状图中显示三组数据,其中有一组数据是基于前两组数据计算的百分比,我想将其中两组数据堆叠,然后和百分比的柱状图重合,三组数据都用柱状图显示,这个如何实现呢?
时间: 2023-11-28 16:48:20 浏览: 52
可以使用 echarts 中的 series-bar 和 series-line 来实现这个需求。具体步骤如下:
1. 配置 x 轴和 y 轴,设置堆叠方式为 'stack'。
```js
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {
type: 'value',
stack: 'stack1'
}
```
2. 配置第一组数据和第二组数据,设置 stack 属性为 'stack1'。
```js
series: [{
name: 'data1',
type: 'bar',
data: [10, 20, 30, 40, 50],
stack: 'stack1'
}, {
name: 'data2',
type: 'bar',
data: [5, 10, 15, 20, 25],
stack: 'stack1'
}]
```
3. 配置第三组数据,类型为 series-line,设置 yAxisIndex 为 1(使用第二个 y 轴)。
```js
{
name: 'data3',
type: 'line',
yAxisIndex: 1,
data: [20, 25, 33.3, 50, 50],
markLine: {
data: [{ type: 'average', name: '平均值' }]
}
}
```
4. 配置第二个 y 轴,用于显示第三组数据的百分比。
```js
yAxis: [{
type: 'value',
stack: 'stack1'
}, {
type: 'value',
max: 100,
axisLabel: {
formatter: '{value}%'
}
}]
```
5. 将第三组数据的 yAxisIndex 属性设置为 1,表示使用第二个 y 轴。
最终的代码如下:
```js
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: [{
type: 'value',
stack: 'stack1'
}, {
type: 'value',
max: 100,
axisLabel: {
formatter: '{value}%'
}
}],
series: [{
name: 'data1',
type: 'bar',
data: [10, 20, 30, 40, 50],
stack: 'stack1'
}, {
name: 'data2',
type: 'bar',
data: [5, 10, 15, 20, 25],
stack: 'stack1'
}, {
name: 'data3',
type: 'line',
yAxisIndex: 1,
data: [20, 25, 33.3, 50, 50],
markLine: {
data: [{ type: 'average', name: '平均值' }]
}
}]
};
```
这样配置之后,就能够实现堆叠柱状图中显示三组数据,并且其中一组数据是基于前两组数据计算的百分比的需求。
阅读全文