堆叠柱+折线混合图 如何实现

1. import { StackedColumnLine } from '@antv/g2plot';
   
2. 
   
3. const uvBillData = [
   
4.   { time: '2019-03', value: 350, type: 'uv' },
   
5.   { time: '2019-04', value: 900, type: 'uv' },
   
6.   { time: '2019-05', value: 300, type: 'uv' },
   
7.   { time: '2019-06', value: 450, type: 'uv' },
   
8.   { time: '2019-07', value: 470, type: 'uv' },
   
9.   { time: '2019-03', value: 220, type: 'bill' },
   
10.   { time: '2019-04', value: 300, type: 'bill' },
    
11.   { time: '2019-05', value: 250, type: 'bill' },
    
12.   { time: '2019-06', value: 220, type: 'bill' },
    
13.   { time: '2019-07', value: 362, type: 'bill' },
    
14. ];
    
15. 
    
16. const transformData = [
    
17.   { time: '2019-03', count: 800 },
    
18.   { time: '2019-04', count: 600 },
    
19.   { time: '2019-05', count: 400 },
    
20.   { time: '2019-06', count: 380 },
    
21.   { time: '2019-07', count: 220 },
    
22. ];
    
23. 
    
24. const columnLine = new StackedColumnLine(document.getElementById('container'), {
    
25.   title: {
    
26.     visible: true,
    
27.     text: '堆叠柱+折线混合图',
    
28.     alignTo: 'middle',
    
29.   },
    
30.   description: {
    
31.     visible: true,
    
32.     text: '堆叠柱+折线混合图表',
    
33.     alignTo: 'middle',
    
34.   },
    
35.   data: [uvBillData, transformData],
    
36.   xField: 'time',
    
37.   yField: ['value', 'count'],
    
38.   columnStackField: 'type',
    
39. });
    
40. columnLine.render();
    

复制代码

效果是这样的，永洪产品如何实现，不想自己写代码

绑定字段这里可以选择图表类型

yhdata_ruby 发表于 2023-5-26 15:41
绑定字段这里可以选择图表类型

数据是这样的

维度列	已放未提	未安排	总和
wk1	5	5	10
wk2	3	9	12
wk3	5	2	7
wk4	2	9	11
wk5	1	5	6
wk6	3	2	5
wk7	4	7	11
wk8	3	2	5

，这三种都不满足需求

yhdata_rTfE5IOp 发表于 2023-5-26 16:48
数据是这样的，这三种都不满足需求

那种是使用堆积柱图做的，不是普通柱图

yhdata_ruby 发表于 2023-5-26 16:52
那种是使用堆积柱图做的，不是普通柱图

我就是用的堆积柱图

yhdata_rTfE5IOp 发表于 2023-5-26 17:06
我就是用的堆积柱图

现在是什么样的，截图看一下

yhdata_ruby 发表于 2023-5-26 17:07
现在是什么样的，截图看一下

    

yhdata_rTfE5IOp 发表于 2023-5-26 17:21

你这个很明显就是普通柱图呀，用堆积柱图，而且颜色那里要绑定维度列

yhdata_ruby 发表于 2023-5-26 17:23
你这个很明显就是普通柱图呀，用堆积柱图，而且颜色那里要绑定维度列

我是想要这种效果 总和=分类1+分类2，且总和(图中折线)的位置就在分类1+分类2的位置上   



我用echars这样实现的

1. option = {
   
2.     tooltip: {
   
3.       trigger: 'axis'
   
4.     },
   
5.     legend: {},
   
6.     grid: {
   
7.       left: '3%',
   
8.       right: '4%',
   
9.       bottom: '3%',
   
10.       containLabel: true
    
11.     },
    
12.     xAxis: [
    
13.       {
    
14.         type: 'category',
    
15.         data: options.column1
    
16.       }
    
17.     ],
    
18.     yAxis: [
    
19.       {
    
20.         type: 'value'
    
21.       }
    
22.     ],
    
23.     series: [
    
24.       {
    
25.         name: '分类1',
    
26.         type: 'bar',
    
27.         stack: 'Ad',
    
28.         emphasis: {
    
29.           focus: 'series'
    
30.         },
    
31.         data: options.column2
    
32.       },
    
33.       {
    
34.         name: '分类2',
    
35.         type: 'bar',
    
36.         stack: 'Ad',
    
37.         emphasis: {
    
38.           focus: 'series'
    
39.         },
    
40.         data:options.column3
    
41.       },
    
42.       {
    
43.         name: '总和',
    
44.         type: 'line',
    
45.         stack: 'Ad',
    
46.         emphasis: {
    
47.           focus: 'series'
    
48.         },
    
49.         data: options.column4
    
50.       }
    
51.     ]
    
52.   };

复制代码

1. [
   
2.         {
   
3.                 "column1": "维度列",
   
4.                 "column2": "Sum_已放未提",
   
5.                 "column3": "Sum_未安排",
   
6.                 "column4": "Sum_总和"
   
7.         },
   
8.         {
   
9.                 "column1": "wk1",
   
10.                 "column2": 5,
    
11.                 "column3": 5,
    
12.                 "column4": 0
    
13.         },
    
14.         {
    
15.                 "column1": "wk2",
    
16.                 "column2": 3,
    
17.                 "column3": 9,
    
18.                 "column4": 0
    
19.         },
    
20.         {
    
21.                 "column1": "wk3",
    
22.                 "column2": 5,
    
23.                 "column3": 2,
    
24.                 "column4": 0
    
25.         },
    
26.         {
    
27.                 "column1": "wk4",
    
28.                 "column2": 2,
    
29.                 "column3": 9,
    
30.                 "column4": 0
    
31.         },
    
32.         {
    
33.                 "column1": "wk5",
    
34.                 "column2": 1,
    
35.                 "column3": 5,
    
36.                 "column4": 0
    
37.         },
    
38.         {
    
39.                 "column1": "wk6",
    
40.                 "column2": 3,
    
41.                 "column3": 2,
    
42.                 "column4": 0
    
43.         },
    
44.         {
    
45.                 "column1": "wk7",
    
46.                 "column2": 4,
    
47.                 "column3": 7,
    
48.                 "column4": 0
    
49.         },
    
50.         {
    
51.                 "column1": "wk8",
    
52.                 "column2": 3,
    
53.                 "column3": 2,
    
54.                 "column4": 0
    
55.         }
    
56. ]

复制代码

yhdata_rTfE5IOp 发表于 2023-5-26 17:42
我是想要这种效果 总和=分类1+分类2，且总和的位置就在分类1+分类2的位置上   

echars 版本  5.1.2