一、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}]
总结
这是我的第一篇文章,希望能在喜欢的事情上走的再远一点。
如果觉得《ECharts双y轴设置0刻度对齐 左右刻度根据数据变化?》对你有帮助,请点赞、收藏,并留下你的观点哦!