echarts 轴文字内容太长导致显示不全解决方案

news2024/11/18 1:23:50

情况:Y轴内容是文字,内容太长可能会系那是不全。调整grid会导致短数据前的留白过于多。

解决方案: 

方法一: 首先可以配置grid自适应 , containLabel 属性设置true (这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。)

grid: {
       top: '0%',
       left: '3%',
       right: '2%',
       bottom: '3%',
       containLabel: true
  },

方法二:将文字设置超出部分显示省略号;在yAxis中的axisLabel中加入以下属性配置:

yAxis: {
    axisLabel: {
        width: 60,//将内容的宽度固定
        overflow: 'truncate',//超出的部分截断
        truncate: '...',//截断的部分用...代替
    }
}

方法三: 如果是数字,可将数字进行处理;axisLabel 的formatter 进行处理

yAxis: {
    axisLabel: {
        formatter(v) {
                    v = v.toString()
                    if (v >= 100000000000) {
                        return (v.substring(0, 5) / 10) + '亿'
                    } else if (v >= 10000000000) {
                        return (v.substring(0, 4) / 10) + '亿'
                    } else if (v >= 1000000000) {
                        return (v.substring(0, 3) / 10) + '亿'
                    } else if (v >= 100000000) {
                        return (v.substring(0, 2) / 10) + '亿'
                    } else if (v >= 10000000) {
                        return v.substring(0, 4) + '万'
                    } else if (v >= 1000000) {
                        return v.substring(0, 3) + '万'
                    } else if (v >= 100000) {
                        return v.substring(0, 2) + '万'
                    } else if (v >= 10000) {
                        return (v.substring(0, 2) / 10) + '万'
                    } else if (v >= 1000) {
                        return v
                    } else {
                        return v
                    }
                },
    }
}

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

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

相关文章

51单片机光照强度检测自动路灯开关仿真( proteus仿真+程序+报告+讲解视频)

51单片机光照强度检测自动路灯开关仿真( proteus仿真程序报告讲解视频) 仿真图proteus7.8及以上 程序编译器:keil 4/keil 5 编程语言:C语言 设计编号:S0052 讲解视频 基于51单片机的光照检测自动路灯控制仿真设计( proteus仿…

42V转5V芯片——高效率、宽压输入范围和强大输出能力

42V转5V芯片——高效率、宽压输入范围和强大输出能力 摘要: 42V转5V芯片是一种电源管理解决方案,可以将高达42V的输入电压转换为稳定的5V输出电压。该芯片以其高效率、宽压输入范围和强大的输出能力而备受关注。它具有93%的转换效率,能够在广…

学Python的漫画漫步进阶 -- 第十五步.访问数据库

学Python的漫画漫步进阶 -- 第十五步.访问数据库 十五、访问数据库15.1 SQLite数据库15.1.1 SQLite数据类型15.1.2 Python数据类型与SQLite数据类型的映射15.1.3 使用GUI管理工具管理SQLite数据库 15.2 数据库编程的基本操作过程15.3 sqlite3模块API15.3.1 数据库连接对象Conne…

使用Tensorboard碰到AttributeError: module ‘distutils‘ has no attribute ‘version‘

当出现这个错误时 说明 当前tensorboard的版本和你安装的pytorch版本不匹配,tensorboard版本太 高,pytorch太低。 使用conda list查看你的setuptools版本 conda list我的版本有点高68,所以我需要降低版本,使用以下命令降低版本…

解读|美创深度参与5项电信和互联网行业数据安全标准发布实施

《数据安全法》、《个人信息保护法》等法律法规的颁布实施,坚持安全和发展并重的原则,积极应对复杂严峻的安全风险与挑战,加速构建数据安全保障体系,成为电信和互联网行业重要工作。 “安全发展、标准先行”,标准化工作…

ATLAS 200通过PCIE 接入RK3588-EP模式

ATLAS 200 作为算理模块,可以作为主/协处理器接入RK3588,有两种模式:RC 模式和EP模式 RC模式:rk3588 和 ATLAS 200 可分别独立处理自身业务数据,不存在业务互相依赖,二者可通过网络等方式进行通信,ATLAS …

用它免费查询电商评论数据,轻松实现品牌洞察!

item_review-获得淘宝商品评论 公共参数 名称类型必须描述keyString是调用key(注册账号获取key)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等]cacheString否[…

Spring配置非定义的Bean

前言 在前文中,xml配置文件中的Bean都是我们自己定义配置的,例如:UserDaoImpl,UserDAO等。但是在实际开发过程中有些功能类并不是我们自己定义的,而是使用第三方jar包中的,俺么这些Bean要想让Spring进行管…

2023年PMP考试改革情况?新教材和新题型?

改革就是使用新考纲和新教材。教材由第六版变为第七版,这个问题也不大,主要是根据考纲的内容出题,备考学习预测敏捷项目管理内容即可。 没有出新的改为新题型的通知,但要随时做好题型变化的准备,或许题型会增加填空题…

多少得有点升级,才能对得起价格!iPhone15系列电池寿命见长

我有一些好消息。根据我们的电池测试,iPhone 15系列中的每一款机型都比前代机型提供了更好的电池寿命。这可能是由于每部手机中都有稍大的电池和更高效的芯片。 我们对iPhone 15、iPhone 15 Plus、iPhone 15 Pro和iPhone 15 Pro Max进行了Tom’s Guide电池测试&…

SAP DN已发货但是需求还挂在MD04上的异常处理(SE38执行程序:ATP_VBBE_CONSISTENCY OR SDRQCR21)

背景:DN 80074061已经发完货,但是在MD04上还挂着它的需求 处理方法: HANA S4 版本, SE38 执行程序 ATP_VBBE_CONSISTENCY HANA之前的版本执行程序 SDRQCR21 以 ATP_VBBE_CONSISTENCY 为例,先选择模拟模式 执行&…

C#上位机:现代编程中的全能工具?

C#上位机:现代编程中的全能工具? C#作为现代、安全、易用的编程语言,在多领域具有广泛应用,尤其在上位机开发中脱颖而出。输入“777”,即刻获取关于上位机开发和数据可视化的专业学习资料,工业自动化、物…

打造自己的美颜应用:使用视频直播美颜sdk的步骤

当下,视频直播已经成为人们分享自己生活、技能和兴趣的流行方式。但是,随着竞争的加剧,提供高质量视频直播体验变得至关重要。其中一个重要因素是美颜效果,这已经成为吸引观众的重要因素之一。幸运的是,现在有许多视频…

pycharm导入包提示:ModuleNotFoundError: No module named ‘xxx‘

解决方法 1、进入file-settings-projects-python interpreter,点击Show All: 2、在Show All窗口中按如下操作: 保存后即可

电脑内存怎么看?一分钟搞定!

电脑内存是计算机系统中重要的硬件组件之一,它直接影响着系统的性能和运行速度。了解电脑内存的使用情况对于优化系统性能和进行硬件升级非常重要。本文将介绍电脑内存怎么看的三个方法,以便更好地管理计算机性能。 方法1:任务管理器 电脑使…

易点易动RFID固定资产管理系统:实现极速盘点与全生命周期管理

在现代企业管理中,固定资产的盘点和管理一直是一项繁琐而重要的任务。然而,通过易点易动RFID固定资产管理系统,集团公司可以实现固定资产的快速盘点、全生命周期管理以及有效防止资产丢失。本文将详细介绍易点易动RFID固定资产管理系统如何助…

Jmeter性能测试吞吐量控制器使用小结

吞吐量控制器(Throughput Controller)场景: 在同一个线程组里, 有10个并发, 7个做A业务, 3个做B业务,要模拟这种场景,可以通过吞吐量模拟器来实现.。 jmeter性能测试:2023最新的大厂jmeter性能测试全过程项目实战详解,悄悄收藏,后面就看不到…

【新版】系统架构设计师 - 案例分析 - 系统维护与设计模式

个人总结,仅供参考,欢迎加好友一起讨论 文章目录 架构 - 案例分析 - 系统维护与设计模式典型例题 1典型例题 2 架构 - 案例分析 - 系统维护与设计模式 典型例题 1 某企业两年前自主研发的消防集中控制软件系统在市场上取得了较好的业绩,目前…

【Hash表】出现次数最多的单词-力扣 819

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

GE WESDAC D20ME 模拟输入电子模块

GE WESDAC D20ME 是一款模拟输入电子模块,通常用于工业自动化和控制系统中,用于采集模拟信号和传感器数据。以下是该模块的一些主要产品功能: 模拟输入通道:WESDAC D20ME 模块通常具有多个模拟输入通道,用于接收模拟信…