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

news2024/10/2 22:16:59

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

增长率暂时是0,在X轴上,懒得改了。
修改之前:
左右刻度不一致
修改之后:
左右刻度一致
根据数据找出最大值,分为6份向上取整,得到的每份就是间隔。

  // 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值增大(下面代码注释)

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博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/983124.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

直播预告 | CAR-T疗法红海赛道如何胜出?CAR-T工艺开发及商业化新思考

直播背景 随着整个细胞治疗行业的快速发展,CGT产业链上下游不断完善,从上游原材料及设备供应商到CXO再到创新药企,各个环节的联系更加紧密,竞争与合作关系愈加凸显。细胞药物研发过程中,对生物试剂、耗材、仪器设备有…

基于springboot的图片文字识别,支持中英文识别

概述 基于springboot的图片文字识别,支持中英文识别. 页面上传图片即可转换为中文或者英文. 详细 1.需求(要做什么) 识别图片文字, 实现页面上传图片即可转换为中文或者英文. 2.理论概述 OCR,即Optical Character Recognition&#xff…

机器学习-k-近邻算法

k-近邻算法 一、k-近邻算法概述1.1 使用python导入数据1.2 从文本文件中解析数据 二、使用k-近邻算法改进约会网站的配对效果2.1 准备数据2.2 数据预处理2.3 分析数据2.4 测试算法2.5使用算法 三、手写体识别系统 一、k-近邻算法概述 k-近邻算法是一种常用的监督学习算法&…

百度智能云千帆大模型平台2.0来了!从大模型到生产力落地的怪兽级平台!!

目录 前言 最佳算力效能为企业降低门槛 最多大模型,最多数据集为企业保驾护航 企业级安全对于企业来说是硬性要求 前言 普通人或许感知不明显,但是对于企业而言,身处AI时代,是否选择投资大模型,是否拥抱人工智能…

既然有 HTTP 协议,为什么还要有 RPC

HTTP和RPC 什么是HTTP HTTP协议(Hyper Text Transfer Protocol),又叫做超文本传输协议。平时上网在浏览器上敲个网址就能访问网页,这里用到的就是HTTP协议。 什么是RPC RPC(Remote Procedure Call)&…

详解Vision Transformer中的Encoder

一.Transformer架构 左半边是Encoder,右半边是Decoder。 二.Vision Transformer Vision Transformer取了Transformer的左半边。包含 Input EmbeddingPositional Encoding多头注意力机制 Add & Norm(前馈网络)Feed Forward Add & Norm 2.1 Input Embe…

Python 完美解决 Import “模块” could not be resolved ...

首先扩展安装Python插件 Ctrl Shift P,在打开的输入框中输入 Python: Select Interpreter 搜索,选择 Python 解析器。 选好解析器后,就可以直接在 VS Code 里运行(快捷键 Ctrl F5)或调试(快捷键 F5&…

打造高效等级查询系统

在现代教育体系中,考试等级查询系统是学生、家长和校园必不可少的工具。易查分是一款功能强大、易于使用的在线成绩查询平台,可以帮助学生和家长方便查询学生的考试成绩和等级,了解学习情况,从而更好的制定学习计划和提供必要的支…

leetcode(力扣):203移除链表元素 leetcode(力扣):206反转链表 leetcode(力扣):876.链表的中间结点多种解法

目录 203.移除链表元素 解法一:将目标元素前一个元素存放地址改为下一元素地址 解法二:遍历原链表,把不是val的节点拿出来进行尾插到新链表​编辑 解法三:有哨兵位解法->头节点不存储有效数据​编辑 206.反转链表 方法一…

一次说清楚BCD编码

背景 在银行报文中,有很多用到BCD编码的地方,BCD编码和常见的二进制编码或者ASCII编码又有区别,所以很容易搞错,弄错概念,下面笔者就一次把BCD编码讲清楚。 一,概念 1,BCD编码,…

vue开发调试

1、调试方式 1.1 为什么调试 当遇到应用逻辑出现错误,但又无法准确定位的时候,同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。 1.2 调试方法…

NC 添加IRule 后置前置规则

1、在保存后触发后置规则,找到保存的规则,在里面进行添加后置规则。 编写自己的规则,通过 CompareAroundProcesser 《AggCLMasterVo》 processor 的processor.addAfterRule(rule); 方法进行后置规则添加 Cl_SAVE_IRule : 实现 IR…

【API 管理】什么是 API 管理,为什么它很重要?

当今复杂的数字生态系统由许多相互关联的部分组成。API 作为看门人和连接器在其中发挥着关键作用——提供了许多最终用户甚至没有注意到的自动化机会和效率。 企业密切关注 API。它们对于应用程序、数据和各种客户交互的功能至关重要。 这使得 API 管理成为几乎每个部门的组织…

[计算机入门] 搜索文件

3.7 搜索文件 随着计算机的使用,里面存放的资料会越来越多,有些文件我们可能不记得存放在哪里了,这个时候就可以通过计算机自带的搜索功能进行搜索。 1、点击任务栏中的放大镜图标: 2、在弹出的窗口下方输入要查询的文件名&…

华为云云服务器评测|详解 Nacos 安装部署

环境配置 服务器云耀云服务器L操作系统CentOS 7.9 64bit | 公共镜像JDK64 bit JDK 1.8MavenMaven 3.2.xnacos-server2.2.3 下载地址 官方githubRelease 2.2.3 (May 25th, 2023) alibaba/nacos GitHub百度网盘链接:https://pan.baidu.com/s/1K8UE6iJL2ZnosUY83b…

案例聚焦:F5怎么样提升游戏玩家体验?

对手机游戏市场有过了解的小伙伴,定然对Deltatech Gaming Limited这个公司不会陌生。作为印度在线游戏和娱乐行业的领跑者,两个最受欢迎的多人游戏应用分别为多人游戏的 “Addagames” 和扑克类游戏 “Adda52” ,它们会定期举办在线联赛。而这…

【Apollo】Apollo的入门介绍

阿波罗是百度发布的名为“Apollo(阿波罗)”的向汽车行业及自动驾驶领域的合作伙伴提供的软件平台。 帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统,快速搭建一套属于自己的自动驾驶系统。 百度开放此项计划旨在建立一个以合作为中…

c语言 3.0

💂 个人主页: 程序员爱摸鱼🤟 版权: 本文由【程序员爱摸鱼】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注点赞收藏(一键三连)哦💅 想寻找共同成长的小伙伴,可以互粉哦 💬文章目录…

某堡垒机SQL注入漏洞

声明 本文仅用于技术交流,请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,文章作者不为此承担任何责任。 一、概述 中远麒麟堡垒机能够提供细粒度的访问控制,最大限度保护用户资…

前后端分离项目-基于springboot+vue的it职业生涯规划系统的设计与实现(内含代码+文档+报告)

it职业生涯规划系统在jdk环境中,使用Java语言进行编码,使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务。总之,it职业生涯规划系统集中管理信息,有着保密性强,效率高,存储空间大…