动态计算Echarts yAxis.max

echarts中yAxis.max 可以接收一个函数(官网说明)

常用的计算方式

js 复制代码
max: function(value){ 
    return Math.ceil( value.max * 1.2 )
    }

弊端,多出一个分割线,导致间隔的大小不一致

修改处理逻辑

  1. 最大值 = echarts的最大值 * 放大的系数
  2. 每段的值 = 最大值 / 轴线分割数
  3. 每段的值取整
  4. 取整后的值 * 轴线分割数

完整的代码

js 复制代码
  comEchartsMaxNum(num, splitNumber = 5, coefficient = 1.2) {
    console.log('🚀 ~ drawEcharts ~ comEchartsMaxNum ~ num:', num)
    let numFmt = Math.ceil(Math.ceil(num * coefficient) / splitNumber)
    let len = 10 ** Math.max(String(numFmt).length - 1, 1)
    let max = Math.ceil(numFmt / len) * 5 * len
    return max
  }
相关推荐
科技苑9 小时前
前后端分离与微服务架构如何协同?
前端·后端·前端框架
moMo9 小时前
React Hooks 与闭包
前端·react.js
柚yuzumi9 小时前
彻底搞懂 JavaScript 类型转换:显式转换、隐式转换与 ToPrimitive
前端·javascript·node.js
PHP实战开发录10 小时前
PHP接口偶发变慢怎么查
前端·php·开发
向北丶10 小时前
vite项目中配置alias别名
前端·vite
COOLMO研究AI10 小时前
Next.js App Router 中 sitemap、robots 与 canonical 的配置与排查
前端·web·js·网站优化
DyLatte11 小时前
AI 给了我 8 个优化方案,全都是对的,但没有一个有用
前端·后端·程序员
the局外人11 小时前
一座不够大的城市,装下了我毕业后的成长
前端·程序员·求职
涛涛ing11 小时前
周下载量1.1亿的Tailwind,为什么养不活自己?
前端
变与不变80611 小时前
JS事件机制精讲
前端·javascript