echatrs中怎么设置上下两段用百分比显示的圆柱体
时间: 2024-03-03 21:53:49 浏览: 15
在 echarts 中,可以通过使用 `stack` 属性和 `yAxis` 的 `axisLabel` 配置项来实现上下两段用百分比显示的圆柱体。具体步骤如下:
1. 将数据处理成两个数组,分别表示上下两段数据。例如:
```js
let data1 = [150, 200, 300, 180, 250, 400, 280];
let data2 = [100, 150, 200, 130, 180, 250, 160];
```
2. 在 `option` 中设置 `yAxis`,并将 `stack` 属性设置为 `总量`。
```js
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}%'
},
stack: '总量'
},
series: [
{
name: '数据1',
type: 'bar',
data: data1
},
{
name: '数据2',
type: 'bar',
data: data2
}
]
};
```
在上面的例子中,通过 `yAxis` 的 `axisLabel` 将纵轴标签设置为百分比格式,`stack` 属性设置为 `总量`,表示将两个数据序列堆叠在一起。
3. 最后,根据实际需求设置其他属性,例如 `legend`、`tooltip`、`color` 等。
完整的代码如下:
```js
let data1 = [150, 200, 300, 180, 250, 400, 280];
let data2 = [100, 150, 200, 130, 180, 250, 160];
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}%'
},
stack: '总量'
},
series: [
{
name: '数据1',
type: 'bar',
data: data1
},
{
name: '数据2',
type: 'bar',
data: data2
}
]
};
```
通过以上步骤,就可以实现上下两段用百分比显示的圆柱体了。