Echarts的双y轴0刻度对齐问题

双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,
}
},
}
],

最后

以上就是野性水杯为你收集整理的Echarts的双y轴0刻度对齐问题的全部内容，希望文章能够帮你解决Echarts的双y轴0刻度对齐问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。