当 inverse (是否是反向坐标轴) 和 barMinHeight (柱状图最小高度) 一起使用,数据为 0 时 ,柱状图出现反方向显示,inverse属性失效。
配置项如下
var ydata = [
'虚拟机1',
'虚拟机2',
'虚拟机3',
'虚拟机4',
'虚拟机5',
'虚拟机6',
'虚拟机7',
'虚拟机8',
'虚拟机9'
];
var barData1 = {
all: [1234,2345,3456,4567,5678,6789,7890,8901,12345],
used: [234,1345,2456,3567,3678,0,5890,3901,10234]
};
var barData2 = {
all: [1234,2345,3456,4567,5678,6789,7890,8901,12345],
used: [234,1345,1456,1567,1678,0,3890,6901,12034]
};
option = {
title: {
text: '虚拟机资源使用情况',
x: 'center',
y: 0
},
tooltip: {},
legend: {
top:50,
right: 30,
data: ['分配', '已使用']
},
grid: [{
x: '5%',
y: '15%',
width: '38%',
height: '60%',
},
{
x: '60%',
y: '15%',
width: '35%',
height: '60%',
},
],
xAxis: [{
gridIndex: 0,
type: 'value',
inverse: 'true',
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
}
},
{
gridIndex: 1,
type: 'value',
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
}
}
],
yAxis: [{
gridIndex: 0,
type: 'category',
position: 'right',
axisLabel: {
show: false
},
data: ydata,
name: '计算资源分配与使用(单位:核小时)',
nameTextStyle: {
padding: [0, 180, 0, 0],
},
splitLine: {
show: true,
}
}, {
gridIndex: 1,
type: 'category',
data: ydata,
position: 'left',
axisLabel: {
margin: 80,
align: 'center',
},
name: '存储资源分配与使用(单位:GB)',
nameTextStyle: {
padding: [0, 0, 0, 180],
},
splitLine: {
show: true,
}
}],
series: [{
xAxisIndex: 0,
yAxisIndex: 0,
name: '已使用',
type: 'bar',
data: barData1.used,
itemStyle: {
color: '#55d6f3',
},
barMinHeight: 20,
z: 2,
},
{
xAxisIndex: 0,
yAxisIndex: 0,
barGap: '-100%',
name: '分配',
type: 'bar',
data: barData1.all,
itemStyle: {
color: '#C9D0E4',
},
barMinHeight: 20,
z: 1
},
{
xAxisIndex: 1,
yAxisIndex: 1,
name: '已使用',
type: 'bar',
data: barData2.used,
itemStyle: {
color: '#55d6f3',
},
barMinHeight: 20,
z: 2
},
{
xAxisIndex: 1,
yAxisIndex: 1,
barGap: '-100%',
name: '分配',
type: 'bar',
data: barData2.all,
itemStyle: {
color: '#C9D0E4',
},
barMinHeight: 20,
z: 1,
}
]
};