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

根据项目需要,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 时默认间隔,此处为 1intervalY1 = 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)+ 20max: 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)+ 20max: intervalY2 * 6,  // 最大值splitNumber: 6, // 坐标轴的分割段数(预估值)interval: intervalY2, // 强制设置坐标轴分割间隔。},
],

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

摘要-签名-PKI-访问控制-DOS-欺骗技术

摘要-签名-PKI-访问控制-DOS-欺骗技术 信息摘要数字签名PKI访问控制抗攻击技术欺骗技术ARP欺骗DNS欺骗IP欺骗 信息摘要 信息摘要通过哈希函数生成的 信息摘要保证数据的完整性 MD5 和 SHA-1 数字签名 唯一确定发送方 基于非对称加密技术(公钥和私钥技术)…

鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统

工程项目管理软件(工程项目管理系统)对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营,全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&am…

LLVM 与代码混淆技术

项目源码 什么是 LLVM LLVM 计划启动于2000年,开始由美国 UIUC 大学的 Chris Lattner 博士主持开展,后来 Apple 也加入其中。最初的目的是开发一套提供中间代码和编译基础设施的虚拟系统。 LLVM 命名最早源自于底层虚拟机(Low Level Virtu…

中国行政区域带坐标经纬度sql文件及地点获取经纬度方法

文章目录 前言一、如何获取某地的经纬度?1.1 搜索百度地图1.2 在下方找到地图开放平台1.3 下滑找到坐标拾取器1.4 使用 二、sql文件2.1 创建表2.2 插入数据 前言 当工作业务上需要涉及地图,给前端返回经纬度等场景,需要掌握区域经纬度的获取…

第5章 驱动模块传参实验(iTOP-RK3568开发板驱动开发指南 )

经过前两章实验的实战操作,我们已经完成最简单的helloworld驱动实验和模块驱动实验,加载模块可以使用“insmod”函数,使用“insmod”函数进行模块加载时也能进行参数的传递。运用得当可以极大提升内核测试速度。本节就来学习一下如何进行驱动…

【已解决】pycharm 突然每次点击都开新页面,关不掉怎么办?

今天在 pycharm 中写代码,突然发现,新开的文件不再原来的页面上,而是新增了页面,导致整个屏幕全都是新开的页面,最难受的是,关不掉! 无奈,我只能关闭 pycharm,重新双击…

力扣373. 查找和最小的 K 对数字 优先队列法

题目 给定两个以 非递减顺序排列 的整数数组 nums1 和 nums2 , 以及一个整数 k 。 定义一对值 (u,v),其中第一个元素来自 nums1,第二个元素来自 nums2 。 请找到和最小的 k 个数对 (u1,v1), (u2,v2) … (uk,vk) 。 示例 1: 输入: nums1 [1,7,11], …

stm32 学习笔记:GPIO输出

一、GPIO简介 引脚电平 0-3.3V,部分可容忍5V,对输出而言最大只能输出3.3V, 只要可以用高低电平来控制的地方,都可以用GPIO来完成,如果控制的功率比较大的设备,只需加入驱动电路即可 GPIO 通用输入输出口,可配置为 8种 …

PyCharm 虚拟环境搭建

Anaconda搭建虚拟环境 安装 前往Anaconda官网(https://www.anaconda.com/products/individual),下载适合您操作系统的Anaconda版本,建议下载最新的稳定版。这里可以直接进入这个:https://repo.anaconda.com/archive/ …

M1 Pro 新芯片安装python2 方案汇总

前言:磨刀不误砍柴工,环境装好,才能打工。M1 Pro 新芯片安装python2 文章目录 方案一 docker 容器构造环境(如果涉及本地两个仓库需要关联则不适用)方案二 使用 pyenv 🚀 作者简介:作为某云服务…

uniapp 下拉框数据回显的问题

问题 : 现在是下拉框数据回显不了, 绑定的v-model 原因 : uniui 下拉框数据绑定要是 value text 这种格式的 解决办法: 将获取到的后端数据 转换为 需要的格式 ,再进行绑定 下拉框的数据 遍历

【Java SE】抽象类与接口

目录 【1】抽象类 【1.1】抽象类概念 【1.2】抽象类语法 【1.3】抽象类特性 【1.4】抽象类的作用 【2】接口 【2.1】接口的概念 【2.2】语法规则 【2.3】接口使用 【2.4】接口特性 【2.5】实现多个接口 【2.6】接口间的继承 【2.7】接口使用实例 【2.8】Clonable …