echarts 实现柱状堆叠视图(包含关系)

最终效果如图:

 

 echarts 实现柱状堆叠视图(包含关系)

代码:

 1 option = {
 2     title: {
 3         text: '柱状堆叠视图',
 4 //        subtext: 'From ExcelHome',
 5 //        sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
 6     },
 7     tooltip: {
 8         trigger: 'axis',
 9         axisPointer: {            // 坐标轴指示器,坐标轴触发有效
10             type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
11         },
12         formatter(params) {
13             //console.log(params);
14             let str = '';
15             params.forEach((item, idx) => {
16                 if (idx == 0) {
17                     str += item.axisValueLabel + '<br/>';
18                 }
19                 if (item.seriesName!='隐藏') {
20                     str += `${item.marker}${item.seriesName}: ${item.data}`;
21 
22                     str += idx === params.length -1? '': '<br/>';
23                 }
24             })
25             return str;
26         },
27         enterable: true // 可防止闪动
28     },
29     legend: {
30         data: ['总量', '增量']
31     },
32     grid: {
33         left: '3%',
34         right: '4%',
35         bottom: '3%',
36         containLabel: true
37     },
38     xAxis: {
39         type: 'category',
40         splitLine: {show: false},
41         data: ['2019', '2020', '2021']
42     },
43     yAxis: {
44         type: 'value'
45     },
46     series: [
47         {
48             name: '总量',
49             type: 'bar',
50             data: [900, 345, 759]
51         },
52         {
53             name: '隐藏',
54             type: 'bar',
55             stack: '堆叠名字随便起',
56             barGap: "-100%", /*这里设置包含关系,只需要这一句话*/
57             itemStyle: {
58                 barBorderColor: 'rgba(0,0,0,0)',
59                 color: 'rgba(0,0,0,0)'
60             },
61             emphasis: {
62                 itemStyle: {
63                     barBorderColor: 'rgba(0,0,0,0)',
64                     color: 'rgba(0,0,0,0)'
65                 }
66             },
67             data: [625, 45, 700]
68         },
69         {
70             name: '增量',
71             type: 'bar',
72             stack: '堆叠名字随便起',
73             data: [275, 300, 59]
74         }
75     ]
76 };

实现注意两点:

1、增量的series堆叠利用一个隐藏的series,堆叠好以后整体往左挪一个位置,重上去就行了;
2、tooltip里注意隐藏一下辅助的series。

上一篇:自己做量化交易软件(42)小白量化实战15--自编股票软件公式历史与聚宽量化平台仿大智慧指标回测设计


下一篇:angular11给Echarts添加点击事件,无脑抄代码的时候到了~~ 超好用