年底了，都沒有啥活安排，正打算摸魚的時候，領導安排給畫一個圖，內心哭泣泣(灬ꈍ ꈍ灬)，我對echarts不太熟呀。首先，我打開官網，看看實例，咦，怎么沒有這個實例。糟糕，柱子好畫但是背景怎么加，度娘回我都是堆疊，實現了一下一條柱子堆疊可以，兩條怎么弄，越弄越發現怎么成堆疊圖了。默默的轉戰它的官方文檔，沒有想法，怎么破，我可以拒絕它么。答案是不可以，還想不想混了，這個時候我同事提出一個解決方法：可以畫兩個坐標系。
兩個坐標系，用到了這個兩個屬性：coordinateSystem，xAxisIndex ；首先 在聲明兩個xAxis: [{type: 'category'},{type: 'category'}]。於是經過一番實驗終於搞出來了，給大家以后參考。下面我貼代碼啦貼效果啦。
1 var yMax = 500;
2 var dataShadow = []; 3 for (var i = 0; i <4; i++) { 4 dataShadow.push(yMax); 5 } 6 option = { 7 legend: {}, 8 tooltip: {}, 9 dataset: { 10 source: [ 11 ['product', '2015', '2016', '2017'], 12 ['Matcha Latte', 43.3, 85.8, 93.7], 13 ['Milk Tea', 83.1, 73.4, 55.1], 14 ['Cheese Cocoa', 86.4, 65.2, 82.5], 15 ['Walnut Brownie', 72.4, 53.9, 39.1] 16 ] 17 }, 18 xAxis: [{type: 'category'},{type: 'category'}], 19 yAxis: {}, 20 // Declare several bar series, each will be mapped 21 // to a column of dataset.source by default. 22 series: [ 23 24 {type: 'bar', 25 coordinateSystem:'cartesian2d', 26 xAxisIndex:0, 27 barWidth:12, 28 }, 29 {type: 'bar', 30 coordinateSystem:'cartesian2d', 31 xAxisIndex:0, 32 barWidth:12 33 }, 34 {type: 'bar', 35 coordinateSystem:'cartesian2d', 36 xAxisIndex:0, 37 barWidth:12 38 }, 39 { // 背景 40 type: 'bar', 41 itemStyle: { 42 normal: {color: 'rgba(0,0,0,0.05)'} 43 }, 44 barGap:'-100%', 45 barCategoryGap:'60%', 46 data: dataShadow, 47 animation: false, 48 coordinateSystem:'cartesian2d', 49 50 xAxisIndex:1 51 } 52 ] 53 };
大功告成，吃飯去啦！轉載注明出處哈，可以點贊，留言哈，不足的地方就要手動改柱子寬！