eacharts 生成堆叠柱状图
时间: 2023-07-25 18:43:16 浏览: 40
Echarts可以通过设置series中的stack属性来实现堆叠柱状图。以下是一个示例代码:
```javascript
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['A', 'B', 'C']
},
xAxis: {
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'A',
type: 'bar',
stack: 'stack1',
data: [320, 302, 301, 334, 390, 330, 320, 350, 360, 370, 380, 390]
},
{
name: 'B',
type: 'bar',
stack: 'stack1',
data: [120, 132, 101, 134, 90, 230, 210, 220, 230, 240, 250, 260]
},
{
name: 'C',
type: 'bar',
stack: 'stack1',
data: [220, 182, 191, 234, 290, 330, 310, 320, 330, 340, 350, 360]
}
]
});
```
在上述示例代码中,我们在series中设置了stack属性,这样就实现了堆叠柱状图的效果。需要注意的是,同一系列的多个柱子会堆叠到一起,而不同系列之间的柱子会并列显示。同时,可以通过设置legend来展示每个系列的名称。