项目原型图如下:

实际上就是设置两个y轴，第一个显示底色柱子，另一个只显示真实数据的柱子,在这里只显示y轴,x轴不显示..

this.middleLeftOption = {tooltip: {trigger: 'axis',axisPointer: {}},legend: {data: ['回退次数'],y: 'bottom'},grid: {left: '3%',right: '4%',bottom: '10%',top: '2%',containLabel: true //可容纳},xAxis: {show: false   //设置不显示x轴},yAxis: [{type: 'category',data: ydata,   //我这里的数据是请求回来的一个数组  inverse: true,axisLine: {show: false},axisTick: {show: false},// 设置左边y轴上的文字颜色axisLabel: {color: 'black'}},{type: 'category',data: xdata,   //请求回来的数据inverse: true,  // 将数据显示方式倒转axisLine: {show: false},axisTick: {show: false},// 设置右边y轴上文字的颜色与字号axisLabel: {textStyle: {fontSize: 12,color: 'black'}}}],series: [{type: 'bar',yAxisIndex: 1,data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20], //下面的柱子数据barWidth: 15, //柱子的宽度barCategoryGap: 50,// 设置柱子的位置，可以在柱子上显示的内容,我这里是不需要显示的//label:{// show:true,//position:"inside",// {c} 表示数值，{a}表示serie名,{b}表示系列名// formatter:"{c}%"},itemStyle: {// 设置第二个y轴柱子的颜色color: '#f2f2f2',// 设置第二个y轴柱子有无边框 可设置颜色border: 'none',// borderColor: '#00c1de',// 设置第二个y轴柱子边框为圆角barBorderRadius: 15}},{name: '回退次数',type: 'bar',color: '#facd91',data: xdata,barWidth: 15,   //竹子的宽度itemStyle: {// 设置第二个y轴柱子无颜色color: '#facd91',// 设置第二个y轴柱子无边框border: 'none',// 设置第二个y轴柱子边框为圆角barBorderRadius: 15}}]}

 我的最终效果如下: