echarts中竖着的 双柱状图
时间: 2024-10-16 19:01:40 浏览: 27
使用echarts实现双向柱状图
5星 · 资源好评率100%
在ECharts中,如果你想创建一个竖直的双柱状图,通常我们会称之为堆积柱状图或堆叠垂直柱状图。这种图表可以清晰地展示两个数据集之间的对比和累加关系。在ECharts API中,你可以通过设置`series`的`type`为`bar`,然后配置`stack`属性来实现堆叠效果。
下面是一个基本示例:
```javascript
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
type: 'category',
data: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'SeriesA',
type: 'bar',
stack: '总量',
data: [10, 20, 30, 40, 50]
},
{
name: 'SeriesB',
type: 'bar',
stack: '总量', // 同一个堆栈用于累计效果
data: [60, 70, 80, 90, 100]
}
]
};
myChart.setOption(option);
```
在这个例子中,`SeriesA`和`SeriesB`都会基于共享的堆栈“总量”来进行堆叠,形成两个连续的垂直柱状图。
阅读全文