【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://www.mzph.cn/news/874705.shtml

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

相关文章

Windows系统设置暂停更新,暂停时间可达3000天,“永久”暂停更新,亲测有效

好多小伙伴被Windows系统的更新搞得很烦,经常在使用中自己下载更新包,占用网路资源,过段时间就要更新,特别讨厌 今天教你一招,可以暂停更新长达3000天,亲测有效 1、打开系统CMD命令执行窗口,输…

英伟达、Mistral AI 开源企业级大模型,120亿参数、可商用

全球AI领导者英伟达(Nvidia)和著名开源大模型平台Mistral.ai联合开源了,企业级大模型Mistral NeMo 12B。(以下简称“MN 12B”) 据悉,MN 12B一共有基础和指令微调两种模型,支持128K上下文长度&a…

因为很会用工具,拿下了很多客户!

作为一名想要得到更多业绩的打工人,能提高工作效率的工具一定要拥有! 今天,就给大家分享一个职场必备的提效神器,一起来看看它都有哪些功能吧! 1、多渠道客源 它可以从多个渠道去获取你想要的客户资源,无…

代码随想录——一和零(Leetcode474)

题目链接 0-1背包 class Solution {public int findMaxForm(String[] strs, int m, int n) {// 本题m,n为背包两个维度// dp[i][j]:最多右i个0和j个1的strs的最大子集大小int[][] dp new int[m 1][n 1];// 遍历strs中字符串for(String str : strs){int num0 …

免费【2024】springboot 必录德健身器材用品网的设计与实现

博主介绍:✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围:SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

java面向对象进阶进阶篇--《包和final》

一、前言 今天还是面向对象相关知识点的分享,包是写小型项目时不可或缺的存在,final关键字用的地方不算太多。idea会提示我们导包,有时会自动导包,确实十分方便。但是我们也不能不会自己去导包。 面向对象篇不出意外的话本周就要…

22集 如何minimax密钥和groupid-《MCU嵌入式AI开发笔记》

22集 如何获取minimax密钥和groupid-《MCU嵌入式AI开发笔记》 minimax密钥获取 https://www.minimaxi.com/platform 进入minimax网站,注册登录后,进入“账户管理”, 然后再点击“接口密钥”,然后再点击“创建新的密钥”。 之…

《0基础》学习Python——第十九讲__爬虫/<2>

一、用get请求爬取一般网页 首先由上节课我们可以找到URL、请求方式、User-Agent以及content-type 即:在所在浏览器页面按下F12键,之后点击网路-刷新,找到第一条双击打开标头即可查看上述所有内容,将上述URL、User-Agent所对应的…

1.6、计算机系结构

Flynn分类法 Flynn分类法是1966年,M. J. Flynn提出的根据指令流、数据流的多倍性特征对计算机系统的分类方法。 指令流为机器执行的指令序列。数据流是由指令调用的数据序列。包括输入数据和中间结果,不包括输出数据 分类 Flynn把计算机系统的结构分…

初学MWA(Modern Web App)那些事-3-做一个简单的计算器

初学MWA(Modern Web App)那些事-3-做一个简单的计算器 目录 初学MWA(Modern Web App)那些事-3-做一个简单的计算器前言一、本节学习目标二、计算器实例项目创建过程2.1 创建一个HTML文档2.2 查看新建的html文档2.3 Web应用开发:初始化设置2.4…

linux C++ onnxruntime yolov8 视频检测Demo

linux C onnxruntime yolov8 视频检测Demo 目录 项目目录 效果 ​编辑CMakeLists.txt 代码 下载 项目目录 效果 ./yolov8_demo --help ./yolov8_demo -c2 -ptrue ./yolov8_demo -c1 -strue CMakeLists.txt # cmake needs this line cmake_minimum_required(VERSION 3…

AMD EPYC处理器性能宣称远超Nvidia Grace CPU

AMD近期发布了一份博客文章,其中对比了其EPYC处理器与Nvidia Grace Hopper Superchip(基于Arm架构的72核CPU)在一系列基准测试中的性能,声称EPYC处理器在多种工作负载下的表现最多可高出两倍。这一比较突显了AMD在数据中心CPU市场…

Covalent(CXT)运营商网络规模扩大 42%,以满足激增的需求

Covalent Network(CXT)是领先的人工智能模块化数据基础设施,网络集成了超过 230 条链并积累了数千名客户,目前 Covalent Network(CXT)网络迎来了五位新运营商的加入,包括 Graphyte Labs、PierTw…

使用PicGo操作gitee图床(及web端html不能访问图片的解决办法)

1.新建仓库 2.输入仓库名称,也就是图床名称,必须设置开源可见 也可以在创建仓库后,点击管理->基本信息->是否开源进行设置 鼠标悬浮到右上角头像->设置 点击私人令牌 点击生成新令牌,填写描述,直接点提交即可 点击提交后输入登录密码会生成一个token秘钥,如下,这个…

【C++】——初识模版

文章目录 前言函数模版函数模版的原理函数模版的实例化 类模版类模版的实例化 前言 当我们使用一个通用的函数: //为每一个类型都编写一个重载版本 void Swap(int& left, int& right) {int temp left;left right;right temp; } void Swap(double& …

在Linux、Windows和macOS上释放IP地址并重新获取新IP地址的方法

文章目录 LinuxWindowsmacOS 在Linux、Windows和macOS上释放IP地址并重新获取新IP地址的方法各有不同。以下是针对每种操作系统的详细步骤: Linux 使用DHCP客户端:大多数Linux发行版都使用DHCP(动态主机配置协议)来自动获取IP地址…

七、系统配置与性能评价(考点篇)

1 性能指标 性能指标,是软、硬件的性能指标的集成。在硬件中,包括计算机、各种通信交换设备、各类网 络设备等;在软件中,包括:操作系统、协议以及应用程序等。 1.计算机 对计算机评价的主要性能指标有: 时…

【嵌入式开发之数据结构】树的基本概念、逻辑结构和四种常用的遍历算法及实现

树(Tree)的定义及基本概念 树的定义 树(Tree)是个结点的有限集合T,它满足两个条件: 有且仅有一个特定的称为根(Root)的节点;其余的节点分为个互不相交的有限合集,其中每一个集合又…

日常开发记录分享——C#控件ToolTip实现分栏显示内容

文章目录 需求来源实现思路实施请看VCR等等别走,有优化 需求来源 需要在鼠标浮动到指定位置后提示出详细的信息,一开始使用的tooltip实现,但是里面的内容效果并不理想,需要有条理性,于是就想到能不能将展示的东西分列…

【Goland编辑器】Goland编辑器设置代码跳转的地方

记录一下: 关闭了插件里面proto相关的插件后, 在这里将Custom folding regions打开后, 点击代码跳转时,由proto生成的文件,就不会再跳转到proto定义处,而是跳转到代码使用的地方【正是我需要的】。