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。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM