vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法

文章目录

      • 1、原因
      • 2、思路
      • 3、解决方法
        • 3.1、使用alignTicks解决
        • 3.2、结合min和max属性去配置interval属性
          • 1、首先固定两边的分隔的段数。
          • 2、结合min和max属性去配置interval。

在这里插入图片描述

1、原因

刻度在显示时,分割段数不一样,导致左右的刻度线不一致,不能重合在一起。

2、思路

根据上面的原因去分析,要想左右的刻度线一致,分隔的段数是必须是一样的,这样才能重合。

3、解决方法

3.1、使用alignTicks解决
  • 从 v5.3.0 开始支持

  • 在多个 y 轴为数值轴的时候,可以开启该配置项自动对齐刻度。只对’value’和’log’类型的轴有效。

yAxis: [{type: 'value',name: '水量',alignTicks: true,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '温度',alignTicks: true,axisLabel: {formatter: '{value} °C'}}
],
  • 效果展示
    在这里插入图片描述
3.2、结合min和max属性去配置interval属性
1、首先固定两边的分隔的段数。
  • 分别求出左边Y轴和右边Y轴的最大值max和最小值min,根据max和min之间的和去除以分隔的段数,分别算出左边Y轴和右边Y轴的分隔间隔。

在ECharts中有两个很重要的属性:

  • interval:强制设置坐标轴分割间隔。

  • splitNumber:坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

2、结合min和max属性去配置interval。
  • 这是测试数据
let lData = [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]let rData = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 92.0, 6.2]
  • 计算最大值和最小值
let lMax = Number(Math.max(...lData))
let lMin = Number(Math.min(...lData))
let rMax = Number(Math.max(...rData))
let rMin = Number(Math.min(...rData))
  • 最大值向上取整,最小值向下取整,让显示的数据为10的倍数或100的倍数整数显示。
lMax = Math.ceil(lMax / 100) * 100
lMin = Math.floor(lMin / 100) * 100
rMax = Math.ceil(rMax / 10) * 10
rMin = Math.floor(rMin / 10) * 10
  • 计算分隔间隔
let splitNumber = 10
let lInterval = lMax / splitNumber
let rInterval = rMax / splitNumber
  • 配置yAxis
yAxis: [{type: 'value',name: '水量',splitNumber:splitNumber,min: lMin,max: lMax,interval: lInterval,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: '温度',splitNumber:splitNumber,min: rMin,max: rMax,interval: rInterval,axisLabel: {formatter: '{value} °C'}}
],
  • 效果展示
    在这里插入图片描述

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

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

相关文章

GPT 的基础 - T(Transformer)

我们知道GPT的含义是: Generative - 生成下一个词 Pre-trained - 文本预训练 Transformer - 基于Transformer架构 我们看到Transformer模型是GPT的基础,这篇博客梳理了一下Transformer的知识点。 BERT: 用于语言理解。(Transformer的Encoder…

Redis 在 Linux 系统下安装部署的两种方式详细说明

小伙伴们好,欢迎关注,一起学习,无限进步 Redis安装和配置 1、首先在官网下载好redis-6.0.9.tar.gzhttp://redis.io/ 或者使用 wget 命令下载:wget http://download.redis.io/releases/redis-6.0.9.tar.gz 2、下载使用上传到阿里…

vue使用gitshot生成gif

vue使用gitshot生成gif 问题背景 本文将介绍vue中使用gitshot生成gif。 问题分析 解决思路: 使用input组件上传一个视频,获取视频文件后用一个video组件进行播放,播放过程进行截图生成图片数组。 demo演示上传一个视频,然后生…

【InternLM 实战营笔记】大模型评测

随着人工智能技术的快速发展, 大规模预训练自然语言模型成为了研究热点和关注焦点。OpenAI于2018年提出了第一代GPT模型,开辟了自然语言模型生成式预训练的路线。沿着这条路线,随后又陆续发布了GPT-2和GPT-3模型。与此同时,谷歌也…

微服务之qiankun主项目+子项目搭建

主项目使用history,子项目使用hash模式 1. 下载安装"qiankun": "^2.10.13"2. 手动调用qiankun,使用vue脚手架搭建的项目1. 主项目配置(我使用的是手动调用乾坤,在指定页面显示内容)1. 要使用的页面中引入乾坤…

微服务学习

一、服务注册发现 服务注册就是维护一个登记簿,它管理系统内所有的服务地址。当新的服务启动后,它会向登记簿交待自己的地址信息。服务的依赖方直接向登记簿要Service Provider地址就行了。当下用于服务注册的工具非常多ZooKeeper,Consul&am…

使用 Gradle 版本目录进行依赖管理 - Android

/ 前言 / 在软件开发中,依赖管理是一个至关重要的方面。合理的依赖版本控制有助于确保项目的稳定性、安全性和可维护性。 Gradle版本目录(Version Catalogs)是 Gradle 构建工具的一个强大功能,它为项目提供了一种集中管理依赖…

TSINGSEE青犀AI智能分析网关V4区域入侵检测算法及应用介绍

区域入侵检测算法主要应用于需要高度安全防护的场所,如:电力、水利、石油等国家基础设施场所;政府机关、军事基地等重要设施;监狱、看守所等监管场所;大型企业、工厂等生产区域;校园、住宅小区、楼宇等。这…

智能SQL生成:后端技术与LLM的完美结合

文章目录 引言一、什么是大模型二、为什么选择LLM三、开发技术说明四、系统架构说明五、编码实战1. Maven2. 讯飞大模型配置类3. LLM相关的封装4. 编写LLM的service5. 编写controller6. 运行测试 六、总结 引言 本篇文章主要是关于实现一个类似Chat2DB的根据自然语言生成SQL的…

【Leetcode每日一刷】哈希表|纲领、242.有效的字母异位词、349. 两个数组的交集

纲领 🔗代码随想录理论部分 关于哈希表这个数据结构就不再重复讲了,下面对几个关键点记录一下: 哈希碰撞 解决方法1:拉链法 解决方法2:线性探测法 下面针对做题要用到的三种结构讲一下(也是重复造轮子了…

NebulaGraph入门

感谢阅读 官方文档链接NebulaGraph简介nGQLnGQL简介占位标识符和占位符值注释实列大小写区分关键字 基本概念以及相关代码实现补充说明图空间语法以及列子创建克隆官方示例代码(创建并克隆)USE语句指定图空间时查看所有SPACESPACE详情CLEAR SPACE删库跑路(看玩笑的说…

fastAdmin表格列表的功能

更多文章,请关注:fastAdmin后台功能详解 | 夜空中最亮的星 FastAdmin是一款基于ThinkPHP5Bootstrap的极速后台开发框架。优点见开发文档 介绍 - FastAdmin框架文档 - FastAdmin开发文档 在这里上传几张优秀的快速入门图: 一张图解析FastAdmin中的表格列…

idea集成git详解教程(实用篇)

0.Git常用命令 Git常用命令-CSDN博客 1.下载git Git - Downloads 一路傻瓜式安装即可(NEXT) 2.软件测试 在Windows桌面空白处,点击鼠标右键,弹出右键菜单 Git软件安装后,会在右键菜单中增加两个菜单 Git GUI He…

Android Studio level过滤查看各个等级的日志

Android Studio level过滤查看各个等级的日志 旧版as可以在下方的日志输出框选择debug、info,warn、error日志,新版的需要通过在过滤框手动/联想输入 level:xxx,过滤相应等级的日志,如图: android studio/idea返回/前进…

【C语言基础】:深入理解指针(一)

文章目录 一、内存和地址1. 内存2. 如何理解编址 二、指针变量和地址2.1 取地址操作符(&)2.2 指针变量和解引用操作符(*)2.2.1 指针变量2.2.2 如何拆解指针变量2.2.3 解引用操作符 2.3 指针变量的大小 三、指针变量类型的意义3.1 指针的解引用3.2 指针 - 整数3.3 void*指针…

Linux第67步_linux字符设备驱动_注册和注销

1、字符设备注册与注销的函数原型” /*字符设备注册的函数原型*/ static inline int register_chrdev(unsigned int major,\ const char *name, \ const struct file_operations *fops) /* major:主设备号,Limnux下每个设备都有一个设备号,设备号分…

HTTP详解(HTTP的特点,状态码,工作原理,GET和POST的区别,如何解决无状态通信)!!!

文章目录 一、HTTP协议简介二、HTTP的主要特点三、HTTP之URL四、Request和Respons五、HTTP的状态码六、HTTP工作原理七、GET和POST请求的区别八、解决HTTP无状态通信——Cookie和Session 一、HTTP协议简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议&…

基础!!!吴恩达deeplearning.ai:卷积层

以下内容有任何不理解可以翻看我之前的博客哦:吴恩达deeplearning.ai专栏 文章目录 回顾——密集层 Dense Layer卷积层 Convolutional Neural Network定义优势具体说明心电图卷积层搭建 到目前为止,你使用的所有神经网络层都是密集层类型,这…

软件测试有哪些常用的测试方法?

软件测试是软件开发过程中重要组成部分,是用来确认一个程序的质量或者性能是否符合开发之前提出的一些要求。软件测试的目的有两方面,一方面是确认软件的质量,另一方面是提供信息,例如,给开发人员或者程序经理反馈意见…

基于vue-office实现docx、xlsx、pdf文件的在线预览

概述 在做项目的时候会遇到docx、xlsx、pdf等文件的在线预览需求,实现此需求可以有多种解决方式,本文基于vue-office实现纯前端的文件预览。 效果 如下图,分别为docx、xlsx、pdf三种类型的文件在线加载后的效果。你也可以访问官方预览网址…