【echarts】存在左右Y轴,多个图例切换时,图宽度会缩短(没有右轴,图宽度正常。 高亮右轴,图宽度会变窄。)- 已解决

问题描述:

在绘制图表时,左侧 Y 轴有一条曲线,右侧 Y 轴有三条曲线。初始化时发现,图表的宽度变窄了,这在 PC 端不太明显,但在移动端特别明显。

没有右轴,图宽度正常。
高亮右轴,图宽度会变窄。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

原因:

因为在options的配置中,设置了 “containLabel”: true 导致的。

    "grid": {"top": 10,"bottom": 30,"left": 10,"right": 10,"containLabel": true}

https://echarts.apache.org/zh/option.html#%2Fsearch%2FcontainLabel
在这里插入图片描述
当 “containLabel”: true 配置被启用时,ECharts 会确保图表区域包含所有的标签,即确保图例、坐标轴标签等不会被裁剪。
这可能导致图表的绘制区域(即图表的实际显示区域)变小,从而影响图表的宽度,特别是在右侧有多条曲线时,这种影响更为明显。

我是设置了右轴,而且多个右轴,我只展示了一个,所以当点击图例的时候,由于设置了 “containLabel”: true,
图会动态计算宽度,从而会变窄。
所以,没有右轴图的时候,宽度正常。
在这里插入图片描述

当我点击右轴图的时候,宽度会变窄。
在这里插入图片描述

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

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

相关文章

安全防御2

实验要求: 实验过程: 7,办公区设备可以通过电信链路和移动链路上网(多对多的NAT,并且需要保留一个公网IP不能用来转换): 新建电信区: 新建移动区: 将对应接口划归到各自区域: 新建…

硬件开发——UART/I2C/SPI协议

硬件开发——UART/I2C/SPI协议 小狼http://blog.csdn.net/xiaolangyangyang 1、UART 电压: TTL电平:1:(3.3V~5V),0:(0V)RS232电平:1:&#xff0…

【LeetCode:3112. 访问消失节点的最少时间 + Dijkstra】

🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持,因为它具有很高的价值,算法就是这样✨ 🌲 作者简介:硕风和炜,…

springboot校园网络通信系统-计算机毕业设计源码01829

摘要 在当今信息时代,高效的校园网络通信系统对于促进学术交流、管理学生信息和提高教学质量至关重要。该系统基于SpringBoot框架旨在构建一个高效的信息管理平台,为学生、管理员和教师提供全面的学术和管理功能。 系统为学生提供首页、公告消息、校园资…

微信小程序 button样式设置为图片的方法

微信小程序 button样式设置为图片的方法 background-image background-size与background-repeat与border:none;是button必须的 <view style" position: relative;"><button class"customer-service-btn" style"background-image: url(./st…

sip六大头域深度解析:From头域和To头域

From头域用于标识SIP请求的逻辑发起者&#xff0c;即发送请求的用户或设备。它通常包含用户的SIP URI&#xff08;统一资源标识符&#xff09;和可选的显示名称。 To头域用于标识请求的逻辑接收者&#xff0c;To头域的基本格式通常包括一个SIP URI&#xff0c;和显示名&#x…

matplotlib可视化梯度下降

引言 本文主要基于numpy来进行梯度下降的可视化观察&#xff0c;梯度下降本质上是一种迭代技术&#xff0c;它试图从随机猜测开始&#xff0c;为给定模型和数据点找到最佳可能的参数集。 为什么要基于numpy而不直接使用pytorch&#xff1f; 主要是因为pytorch是一个高度封装的…

去中心化技术的变革力量:探索Web3的潜力

随着区块链技术的发展和应用&#xff0c;去中心化技术正成为数字世界中的一股强大变革力量。Web3作为去中心化应用的新兴范式&#xff0c;正在重新定义人们对于数据、互联网和价值交换的认知。本文将探索去中心化技术的基本概念、Web3的核心特征及其潜力应用&#xff0c;展示其…

C语言 底层逻辑详细阐述指针(一)万字讲解 #指针是什么? #指针和指针类型 #指针的解引用 #野指针 #指针的运算 #指针和数组 #二级指针 #指针数组

文章目录 前言 序1&#xff1a;什么是内存&#xff1f; 序2&#xff1a;地址是怎么产生的&#xff1f; 一、指针是什么 1、指针变量的创建及其意义&#xff1a; 2、指针变量的大小 二、指针的解引用 三、指针类型存在的意义 四、野指针 1、什么是野指针 2、野指针的成因 a、指…

自定义注解 + Redis 实现业务的幂等性

1.实现幂等性思路 实现幂等性有两种方式&#xff1a; ⭐ 1. 在数据库层面进行幂等性处理&#xff08;数据库添加唯一约束&#xff09;. 例如&#xff1a;新增用户幂等性处理&#xff0c;username 字段可以添加唯一约束. ⭐ 2. 在应用程序层面进行幂等性处理. 而在应用程序…

JVM(day2)经典垃圾收集器

经典垃圾收集器 Serial收集 使用一个处理器或一条收集线程去完成垃圾收集工作&#xff0c;更重要的是强调在它进行垃圾收集时&#xff0c;必须暂停其他所有工作线程&#xff0c;直到它收集结束。 ParNew收集器 ParNew 收集器除了支持多线程并行收集之外&#xff0c;其他与 …

博客园运营危机,我为了保护我的博客回到CSDN

文章目录 前言我与博客园程序员和创业后续更新计划 前言 博客园最近的运营危机大家应该也有所耳闻。我之前是因为CSDN的广告太多&#xff0c;所以换的博客园。但是我现在因为害怕博客园运营倒闭&#xff0c;我又来到了CSDN上面继续发博客。 我与博客园 首先&#xff0c;先上…

鸿道Intewell软件版本发布:Intewell-Hyper II_V2.2.0_实时操作系统

Intewell-Hyper II_V2.2.0 版本号&#xff1a;V2.2.0 版本特点 1.新增系统配置服务V1.0 2.新增系统配置工具V1.0 3.新增license ManagerV1.0 4.升级Tool Box至V1.1 5.升级Developer至V2.1.3 6.升级Intewell RTOS至V2.1.3 特殊说明 版本或修改说明: 1.增加系统配置服务&…

工时记录软件选型指南

国内外主流的10款工时计算软件对比&#xff1a;PingCode、Worktile、Tita、易企秀、奇鱼、Teambition、Timely、Toggl Track、RescueTime、ClickUp。 在忙碌的工作中&#xff0c;记录和管理工时常常是令人头疼的问题。工时记录软件的选择不仅能帮你省时省力&#xff0c;还能大幅…

Transformer是怎样处理序列数据的?

Transformer模型最初是一种广泛应用于自然语言处理&#xff08;NLP&#xff09;和其他序列建模任务的架构。它由编码器&#xff08;encoder&#xff09;和解码器&#xff08;decoder&#xff09;组成。 以下是Transformer模型输入和输出的详细介绍&#xff1a; 输入 1. 输入…

数据结构-java中链表的存储原理及使用方式

目录 链表&#xff08;线性表的链式存储&#xff09; 代码实例&#xff1a;&#xff08;链表构建&#xff0c;头插尾插&#xff09; LinkedList LinkedList的使用&#xff1a; 1、构造方法 2、操作方法 LinkedList 和 ArrayList 的区别 链表&#xff08;线性表的链式存储…

C语言 ——— 输入两个正整数,求出最小公倍数

目录 何为最小公倍数 题目要求 代码实现 方法一&#xff1a;暴力求解法&#xff08;不推荐&#xff09; 方法二&#xff1a;递乘试摸法&#xff08;推荐&#xff09; 何为最小公倍数 最小公倍数是指两个或者多个正整数&#xff08;除了0以外&#xff09;的最小的公共倍数…

吴恩达深度学习笔记:机器学习策略(2)(ML Strategy (2)) 2.9-2.10

目录 第三门课 结构化机器学习项目&#xff08;Structuring Machine Learning Projects&#xff09;第二周&#xff1a;机器学习策略&#xff08;2&#xff09;(ML Strategy (2))2.9 什么是端到端的深度学习&#xff1f;&#xff08;What is end-to-end deep learning?&#x…

【matlab 投影寻踪】基于PSO算法的最优投影方向优化

一 投影寻踪算法 投影寻踪是处理和分析高维数据的一类统计方法&#xff0c;其基本思想是将高维数据投影到低维&#xff08;1&#xff5e;3维&#xff09;子空间上&#xff0c;寻找出反映原高维数据的结构或特征的投影&#xff0c;以达到研究和分析高维数据的目的。1974年&…

深度学习中的正则化技术 - Dropout篇

序言 在深度学习的浩瀚领域中&#xff0c;模型过拟合一直是研究者们面临的挑战之一。当模型在训练集上表现得近乎完美&#xff0c;却难以在未见过的数据&#xff08;测试集&#xff09;上保持同样优异的性能时&#xff0c;过拟合现象便悄然发生。为了有效缓解这一问题&#xf…