echarts分享(四):双y轴图表刻度均匀分布问题

今天分享一个小问题，内容不多。

双y轴图表中，为了图表的美观，经常会隐藏一侧的y轴刻度线，仅显示一侧的刻度线。那么问题就来了，两个y轴的数据数值大小不同，常常会导致刻度线的刻度分布不均匀，该如何解决呢？

这里分享下我在项目中所作的处理：

首先是要找出当前y轴数据的最大值，与100相除，再对得到的商进行向上取整，最后把结果乘100。
- 有一点要注意，取整这里必须是向上取整(Math.ceil)。
- 备注：Math.round是四舍五入取整，Math.floor是向下取整，使用这两个方法可能会导致数据显示不全
并且要注意极端情况：当得到的结果为0，也即是最大值小于100的时候，我们要把最终的结果设置成100。

简单代码如下：

let yData = [100,120,140,110,160,130];
let zData = [70,50,40,80,60,90,100];function getSplitInterval(data){let max = Math.ceil(Math.max(...data) / 100)  * 100;if(max===0){max=100}return max
}
let ymax = getSplitInterval(yData)
let zmax = getSplitInterval(zData)

当然，肯定会有同学产生疑问：为什么要与100进行运算？这个实际上是为了后面的刻度分隔提供便利，后面我是把刻度分成了5段，刚好可以被100整除。

也不一定是非要选择100，只要左后刻度均匀即可。

y轴属性设置如下：

yAxis:[
{...min: 0,max: ymax,splitNumber: 5,minInterval:1,interval: ymax / 5,...
},
{...min: 0,max: zmax,splitNumber: 5,minInterval:1,interval: zmax / 5,...
}
]

echarts分享(四):双y轴图表刻度均匀分布问题相关推荐

echarts中设置双Y轴左右刻度线一致
echarts中设置双Y轴左右刻度线一致一.效果图二.主要代码一.效果图二.主要代码 this.taskxAxis = []this.taskSeries = [[], []]taskInit ...
实现ECharts双Y轴左右刻度线一致
实现ECharts双Y轴左右刻度线一致原文链接:https://blog.csdn.net/qq_40845885/article/details/82108525 博主亲测可用哦,先上图: 这是未 ...
Echarts双Y轴图表处理
前言近期开发遇到双Y轴的折线图需求,遇到了一些问题,在这里记录分享(附完整option代码,基于vue-echarts) 1.双Y轴自定义Y轴显示样式(加 '%'和正常显示) 2.双Y轴鼠标划入自定 ...
echarts 折线图设置y轴最小刻度_用plotly和plt画图的基本设置（标题、坐标轴、图例、注释、图像）...
参考链接:用plotly和plt画图的基本设置(标题.坐标轴.图例.注释.图像) - weixin_41670527的博客 - CSDN博客非常好的文章,值得推荐. 一用matplotlib.py ...
echarts 折线图设置y轴最小刻度_Vue 项目如何使用Echarts ，手摸手带你入门
前言最近可视化浪潮越发凶猛但是有些小伙伴们就慌了,觉得自己不是很懂,或者说对里面的参数不是很清楚,所以也就印象也就很模糊那么今天严老湿就带大家好好梳理梳理思路,顺便也带大家写几个Demo 首先得 ...
轻松完美-实现ECharts双Y轴左右刻度线一致
不一致的情况如下图: 修改成一致的情况如下图: 代码如下: yAxis : [ { type : 'value' ...
echarts 折线图设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
C# Chart之双Y轴图表实现
前些天客户提出一个需求,场景如此:在Z轴下压得过程中,要实时记录Z轴的值,也要记录压力传感器的压力值,以时间为X轴,完了当时我觉得目前的Chart实现不了,通过搜罗,发现还是可以实现的,虽然效果一般, ...
echarts 折线图设置y轴最小刻度_【硬货】vue全家桶+Echarts+百度地图，搭建数据可视化系统...
作者丨夙言来源丨前端大牛爱好者(Web-2017) https://segmentfault.com/a/1190000018993981 本文章篇幅略长,内容有点多,大佬可根据目录选择性查阅,新人 ...

echarts分享(四):双y轴图表刻度均匀分布问题

echarts分享(四):双y轴图表刻度均匀分布问题相关推荐

最新文章

热门文章