echarts多柱状图堆叠
时间: 2023-10-16 13:11:45 浏览: 106
echarts柱状图堆叠图动态排序
要实现echarts的多柱状图堆叠,你可以使用echarts的series配置项中的stack属性来实现。下面是一个示例代码:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
// x轴数据
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E']
},
// y轴数据
yAxis: {
type: 'value'
},
// 数据系列
series: [
{
name: '系列1',
type: 'bar',
stack: '总量', // 设置stack属性为同一个值,表示堆叠在一起
data: [10, 20, 30, 40, 50]
},
{
name: '系列2',
type: 'bar',
stack: '总量', // 设置stack属性为同一个值,表示堆叠在一起
data: [20, 30, 40, 50, 60]
},
{
name: '系列3',
type: 'bar',
stack: '总量', // 设置stack属性为同一个值,表示堆叠在一起
data: [30, 40, 50, 60, 70]
}
]
};
// 使用配置项显示图表
myChart.setOption(option);
```
这段代码会生成一个堆叠的多柱状图,其中有三个数据系列(系列1、系列2、系列3),它们的数据会在同一条x轴上堆叠显示。你可以根据自己的需求修改x轴、y轴以及数据系列的内容和样式。记得在页面中添加一个具有唯一id的div元素,用于显示图表(上述代码中的"chart")。
阅读全文