1. 程式人生 > 其它 >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。