一、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刻度对齐，左右刻度根据数据变化？相关推荐

【echarts双y轴：左右轴数据分开设置最大值（解决刻度线不对齐】
echarts双y轴数值差距太大(解决刻度线不对齐) 关键代码: min: 0,//最小值 max: set_max(maxb),//最大值 interval: set_max(maxb) / 5, ...
echarts双y轴实现（解决刻度线不对齐）
echarts双y轴实现(解决刻度线不对齐) 解决办法:让两个坐标轴共用一个最大值,可以刻度保持一致. (即:拿到两数中最大的值作为共同的最大值). (第一次的方法) var maxa = Math. ...
实现ECharts双Y轴左右刻度线一致
实现ECharts双Y轴左右刻度线一致原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...
Echarts双Y轴刻度分割线对不齐问题
# Echarts双Y轴刻度分割线对不齐问题 > [已发布Echarts社区点击查看](https://www.makeapie.com/editor.html?c=xdDYQAJSZA) # ...
总结整理Echarts双y轴曲线图（全）
最近因为项目需要,用到了Echarts,自己学习了相关东西,也参考了一些文件,最终把双y轴曲线图实现了,跟大家分享一下.下面是最终需要的效果图: 不多说了,直接上代码!O(∩_∩)O哈哈~ ----- ...
echarts双Y轴（简单明了）
本文主要实现echarts双Y轴,并在此过程中解决: 实现echarts双Y轴 echarts双Y轴左右刻度线一致图例分布显示坐标轴刻度标签数值取整 X/Y轴名称的分布坐标轴刻度标签数值以某一值 ...
echarts中y轴设置刻度_ECharts中y坐标轴刻度的属性
坐标轴刻度作为直角坐标系中重要的组成部分,我们需要学会合理的设置坐标轴的刻度,本节列举了一些 ECharts 中 y 轴刻度的一些属性设置.如果您还不知道如何显示坐标轴刻度,不晓得怎么控制 y 轴刻度 ...
echarts中y轴设置刻度_xAxis 配置
设置ECharts中y轴刻度线的样式在上节内容中我们提到了 ECharts 中 y 轴刻度线样式的设置,那么在本节我们就来详细介绍一下 yAxis 中 axisTick.lineStyle 所包含的 ...
Echarts双Y轴图表处理
前言近期开发遇到双Y轴的折线图需求,遇到了一些问题,在这里记录分享(附完整option代码,基于vue-echarts) 1.双Y轴自定义Y轴显示样式(加 '%'和正常显示) 2.双Y轴鼠标划入自定 ...

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

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

总结

ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？相关推荐

最新文章

热门文章