请选择 进入手机版 | 继续访问电脑版
麦粉社区
>
帖子详情

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

数据分析 发表于 2021-7-7 15:23
发表于 2021-7-7 15:23:37
4939960e55646d5d05.png
怎样才能实现这种效果?

欢迎大家用结果教育我!!!
发表于 2021-7-7 17:04:01
本帖最后由 君茗 于 2021-7-7 17:06 编辑

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

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


02.png
代码中: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:10:38
君茗 发表于 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-21 10:36:44

厉害了,我先试试效果,谢谢
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

3回帖数 0关注人数 1770浏览人数
最后回复于:2021-7-21 10:36
快速回复 返回顶部 返回列表