一、ECharts双y轴设置0刻度对齐，左右刻度值根据数据变化？

双y轴因为左右的数值有正数有负数的原因，出现0刻度不在一条线上的情况，解决办法如下。

代码如下：

//获取数据中的最大值
function calCuMax(arr){
var max=0;
arr.forEach((el)=>{
el.forEach((el1)=>{
if（el1!=undefined&&el1!=""）{
if(Number(max)<Number(el1)){
max=el1;
}
}
})
})
var maxint=Math.ceil(Number(max)/10);
var maxval=maxint*10;
return maxval;
}
//获取数据中的最小值方法
function calCuMin(arr){
var min=0;
arr.forEach((el)=>{
el.forEach((el1)=>{
if（el1!=undefined&&el1!=""）{
if(Number(min)>Number(el1)){
min=el1;
}
}
})
})
var minint=Math.floor(Number(min)/10);
var minval=minint*10;
return minval;
}
//获取y轴相关的左右两侧各两条折线的最大值和最小值
var Min1=calCuMin([achiincm,typedata]),
Min2=calCuMin([achiincmr,typedatar]),
Max1=calCuMax([achiincm,typedata]),
Max2=calCuMax([achiincmr,typedatar]);
var rowNum=6;//刻度线
//定义需要传入echarts中的变量
var max1;
var min1;
var max2;
var min2;
var spl1;
var spl2;
}

会出现y轴左侧有2条负数刻度线，但y轴右侧没有负数，或只有1条负数刻度线的情况，以负数刻度线条数多的一方为准细分另一侧的刻度。会出现多种情况代码如下：

if（Number(Min1)<0）{//左边有负数
if(Number(Min2)<0){//右边有负数
//两边都有负数（分3种情况）
spl1=Math.ceil((Number(Max1)-Number(Min1))/(rowNum-1));//获取间隔刻度
//当最小值小于间隔刻度时说明不止一条负数刻度线，获取负数刻度线条数
var downcount1=Math.ceil(Math.abs(Number(Min1))/spl1);
spl2=Math.ceil((Number(Max2)-Number(Min2))/(rowNum-1));
var downcount2=Math.ceil(Math.abs(Number(Min2))/spl2);
if(downcount1>downcount2){//左边的负数条数多于右边的
//以左边为准，修改右边的分割刻度
var upcount=rowNumber-downcount1;
max1=upcount*spl1;
min1=-douncount1*spl1;
//右边需要根据左边重新获取刻度
spl2=Math.ceil(Number(Max2)/upcount);
max2=upcount*spl2;
min2=-downcount1*spl2;
}else if(downcount1=downcount2){//左右两边的负数刻度条数一样
var upcount1=rowNum-downcount1;
min1=-downcount1*spl1;
max1=upcount*spl1;
min2=-downcount2*spl2;
max2=upcount*spl2;
}else if(downcount1<downcount2){//右边的负数条数多于左边，以右边为准
var upcount=rowNum-downcount2;
max2=upcount*spl2;
min2=-downcount2*spl2;
//左边需要根据右边获取刻度
spl1=Math.ceil(Number(Max1)/upcount);
max1=upcount*spl1;
min1=-douncount2*spl1;
}
}else{//只有左边有负数，右边都是正数
spl1=Math.ceil((Number(Max1)-Number(Min1))/(rowNum-1));
var downcount=Math.ceil(Math.abs(Min1)/spl1);
var upcount=rowNum-downcount;
max1=upcount*spl1;
min1=-downcount*spl1
spl2=Math.ceil(Number(Max2)/upcount);
max2=upcount*spl2;
min2=-downcount*spl2;
}
}else{//左边都是正数
if(Number(Min2)<0){//左边都是正数，右边有负数
spl2=Math.ceil((Number(Max2)-Number(Min2))/(rowNum-1));
var downcouont=Math.ceil(Math.abs(Number(Min2))/spl2);
var upcount=Number-downcount;
max2=upcount*spl2;
min2=-downcount*spl2;
spl1=Math.ceil(Number(Max1)/upcount);
max1=upcount*spl1;
min1=-downcount*spl1;
}else{//左右都是正数，没有负数
min1=0;
max1=Max1;
min2=0;
max2=Max2;
spl1=Math.ceil((Number(Max1)-Number(Min1))/(rowNum-1));
spl2=Math.ceil((Number(Max2)-Number(Min2))/(rowNum-1));
}
}

将变量放到echarts中

yAxis:[
{
type:'value',
name:'左侧y轴名称'，
min:min1,
max:max1,
interval:spl1
},
{
type:'value',
name:'右侧y轴名称'，
min:min2,
max:max2,
interval:spl2
}
]

总结

这是我的第一篇文章，希望能在喜欢的事情上走的再远一点。

最后

以上就是危机雪糕为你收集整理的ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？一、ECharts双y轴设置0刻度对齐，左右刻度值根据数据变化？总结的全部内容，希望文章能够帮你解决ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？一、ECharts双y轴设置0刻度对齐，左右刻度值根据数据变化？总结所遇到的程序开发问题。

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