失眠网 > ECharts双y轴设置0刻度对齐左右刻度根据数据变化？

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

时间：2021-10-25 10:28:54

一、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*spl1spl2=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}]