双y轴0刻度的对齐核心是y轴最大最小值的设置。
百度的方法大部分是这样的:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: [{
type: 'value',
max: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (Math.abs(value.max)*1.2).toFixed(2);
}else{
return (Math.abs(value.min)*1.2).toFixed(2);
}
},
min: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (-Math.abs(value.max) * 1.2).toFixed(2);
}else{
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
}
},
{
type: 'value',
max: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (Math.abs(value.max)*1.2).toFixed(2);
}else{
return (Math.abs(value.min)*1.2).toFixed(2);
}
},
min: function(value) {
if(Math.abs(value.max) > Math.abs(value.min)){
return (-Math.abs(value.max) * 1.2).toFixed(2);
}else{
return (-Math.abs(value.min) * 1.2).toFixed(2);
}
}
}],
series: [{
data: [120, 200, -150, 80, 70, -110, 130],
type: 'bar',
yAxisIndex: 1
},
{
data: [120, 200, 150, 80, -70, 110, -130],
type: 'bar'
}]
}
然而我用了没效果,可能是我的其它配置的地方影响了,于是自己想出另一种解决办法:
我的场景是这样的:左边的轴是金额,右边是百分比,最大是100%,最小是0,
思路是:1、求出第一条轴数据的最大,最小值,并设置成y轴最大、最小值(产品要求Y轴的最大最小值根据数据取)
2、两条轴的splitNumber设置成相等
3、第二条轴的最大值设为100,最小值为ymin/ymax*100,作用是若第一条轴的最小值小于0,第二条轴的就会在0刻度之后加上等比长度的刻度。
效果图如下:
yAxis: [{
name: "千万元",
type:'value',
nameTextStyle: {
fontSize: 15 * wPercent
},
show: true,
min: ymin,
max: ymax,
splitNumber: 5,
splitLine: {
show: false
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolSize: [5 * wPercent, 10 * wPercent],
lineStyle: {
width: wPercent,
}
},
axisTick: {
show: false
},
axisLabel: {
margin: 5 * wPercent,
formatter: function (value) {
if (value > 0) {
value = Math.ceil(value / 1000);
return value;
} else {
value = Math.floor(value / 1000);
return value;
}
},
textStyle: {
color: "#23405F",
fontSize: 15 * wPercent,
}
}
},
{
name: "完成率",
type:'value',
nameLocation: "end",
show: true,
nameGap: 20,
nameTextStyle: {
fontSize: 15 * wPercent
},
splitLine: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
max: 100,
min: ymin/ymax*100,
splitNumber: 5,
//interval: (ymax-ymin)/5,
axisLabel: {
margin: 5*wPercent,
formatter: function (value) {
if (value > 0) {
value = Math.ceil(value*10);
return value/10+'%';
} else {
value = Math.floor(value*10);
return value/10+'%';
}
},
textStyle: {
color: "#23405F",
fontSize: 15 * wPercent,
}
},
}
],