年底了，都没有啥活安排，正打算摸鱼的时候，领导安排给画一个图，内心哭泣泣(灬ꈍ ꈍ灬)，我对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', '', '', ''], 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 };
大功告成，吃饭去啦！转载注明出处哈，可以点赞，留言哈，不足的地方就要手动改柱子宽！
