项目原型图如下:
实际上就是设置两个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
}
}
]
}
我的最终效果如下:
