怎样才能实现分组的堆积图？

怎样才能实现这种效果？

欢迎大家用结果教育我！！！

echartjs 官网登不了了，应该有个堆积的属性。
我用stack 这个属性成功了，不清楚是不是


特殊注意的地方就是：1.用柱状图，然后把类别的并列轴设置好；2.用扩展属性将对应的大类拼接好（这个地方我自己做了个简单的就是知道哪几个大类在一起，手动设置的，如果你要自动设置，数据设置里面应该还有一列是从数据库取的，然后代码里面去获取再拼接）



代码中：stack 分类，具体叫啥官网看看，这个我是分了1.2.3个类别，然后每个类别里面的柱子宽度可以单独设置 barWidth:'35'

1. {
   
2.     xAxis: {
   
3.         type: 'category'
   
4.     },
   
5.     series: [{
   
6.         name: 'A',
   
7.         type: 'bar',
   
8.         barWidth: '35',
   
9.         stack: '1'
   
10.     }, {
    
11.         name: 'B',
    
12.         type: 'bar',
    
13.         stack: '1',
    
14.         barWidth: '35',
    
15.     }, {
    
16.         name: 'C',
    
17.         type: 'bar',
    
18.         stack: '1',
    
19.         barWidth: '35',
    
20.     }, {
    
21.         name: 'D',
    
22.         type: 'bar',
    
23.         stack: '2',
    
24.         barWidth: '15'
    
25.     }, {
    
26.         name: 'E',
    
27.         type: 'bar',
    
28.         stack: '3',
    
29.         barWidth: '5'
    
30.     }, {
    
31.         name: 'F',
    
32.         type: 'bar',
    
33.         stack: '3',
    
34.         barWidth: '5'
    
35.     }]
    
36. }

复制代码

君茗 发表于 2021-7-7 17:04
echartjs 官网登不了了，应该有个堆积的属性。
我用stack 这个属性成功了，不清楚是不是

1. {
   
2.     xAxis: { type: 'category' },
   
3.     series: [
   
4.             { name: 'A',type: 'bar',stack: '1',barWidth: '35' },
   
5.             { name: 'B',type: 'bar',stack: '1',barWidth: '35' },
   
6.             { name: 'C',type: 'bar',stack: '1',barWidth: '35' },
   
7.             { name: 'D',type: 'bar',stack: '2',barWidth: '15' },
   
8.             { name: 'E',type: 'bar',stack: '3',barWidth: '5' },
   
9.             { name: 'F',type: 'bar',stack: '3',barWidth: '5' }
   
10.     ]
    
11. }

复制代码

君茗 发表于 2021-7-7 17:10

厉害了，我先试试效果，谢谢