echarts 实现柱状堆叠视图（包含关系）

2021-07-13 17:00:33 阅读：202 来源： 互联网

标签：data 视图堆叠 item str series type 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。

标签：data,视图,堆叠,item,str,series,type,echarts
来源： https://www.cnblogs.com/red-alert/p/15007229.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

echarts 实现柱状堆叠视图（包含关系）