记录Echarts双Y轴左右刻度不一致问题

根据项目需要,echarts实现双Y轴图表。因为两边数据不同,所以会出现左右Y轴刻度不一致。

增长率暂时是0,在X轴上 ,懒得改了。

修改之前:

修改之后:

根据数据找出最大值,分为6份向上取整,得到的每份就是间隔。

javascript 复制代码
  // dataArr1、dataArr2同series中需要传入的两个数组
  // 最大值 / 6 后向上取整=最大间隔
  // 最大间隔 * 6 = 最大值;
  let intervalY1 = Math.ceil(Math.max(...dataArr1) / 6);
  let intervalY2 = Math.ceil(Math.max(...dataArr2) / 6);
  // 因为暂时没数据。可设置为 0 时默认间隔,此处为 1
  intervalY1 = intervalY1 == 0 ? 1 : intervalY1;
  intervalY2 = intervalY2 == 0 ? 1 : intervalY2;

不想Y轴的数据顶天的话可以将interval*1.5或interval+10

解决思路: 1、将interval增大, 2、将max值增大(下面代码注释)

javascript 复制代码
yAxis: [
   {
       name: "增长率",
       type: "value",
       axisTick: {
           show: false,
       },
       axisLine: {
           show: false,
       },
       axisLabel: {
           formatter: "{value}%",
       },
       min: 0,
       // 不想数据=max,可手动更改interval*7 或 (interval*6)+ 20
       max: intervalY1 * 6, // 最大值
       splitNumber: 6, // 坐标轴的分割段数(预估值)
       interval: intervalY1, // 强制设置坐标轴分割间隔。
   },
   {
       name: "人数",
       type: "value",
       axisLine: {
           show: false,
       },
       axisTick: {
           show: false,
       },
       axisLabel: {
           formatter: "{value}人",
       },
       min: 0,
       // 不想数据=max,可手动更改interval*7 或 (interval*6)+ 20
       max: intervalY2 * 6,  // 最大值
       splitNumber: 6, // 坐标轴的分割段数(预估值)
       interval: intervalY2, // 强制设置坐标轴分割间隔。
   },
],

原文链接:Echarts双Y轴左右刻度不一致_echarts双y轴刻度不一致_牛腩的小鱼饼的博客-CSDN博客

相关推荐
JinSo3 分钟前
pnpm monorepo 联调:告别 --global 参数
前端·github·代码规范
程序员码歌10 分钟前
豆包Seedream4.0深度体验:p图美化与文生图创作
android·前端·后端
urhero14 分钟前
工作事项管理小工具——HTML版
前端·html·实用工具·工作事项跟踪·任务跟踪小工具·本地小程序
二十雨辰16 分钟前
eduAi-智能体创意平台
前端·vue.js
golang学习记24 分钟前
从0死磕全栈之Next.js connection() 函数详解:强制动态渲染的正确姿势(附实战案例)
前端
郝学胜-神的一滴31 分钟前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw35 分钟前
vue懒加载
前端·javascript·vue.js·typescript
国家不保护废物1 小时前
手写 Vue Router,揭秘路由背后的魔法!🔮
前端·vue.js
菜鸟‍1 小时前
【前端学习】仿Deepseek官网AI聊天网站React
前端·学习·react.js
小光学长2 小时前
基于Vue的保护动物信息管理系统r7zl6b88 (程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js