echarts实现横轴刻度名倾斜展示,并且解决文字超出部分消失问题

需求背景:

xAxis.axisLabel. interval如果不手动设值的话,默认就是‘auto’,会采用标签不重叠的策略间隔显示标签。当数据量特别大的时候,展示出来的刻度标签就会很少,导致用户体验不好。如下图所示:
interval为auto时的效果
如果给interval设为0,让所有标签都展示出来,那就会全部重叠,直接看不清标签了。如下图所示:
interval为0时的效果
或者可以手动计算出interval的值,动态设置,但如果在标签不重叠的情况下,能够展示出来的标签还是非常少。
所以最后采用倾斜刻度标签的方式来尽可能多的展示出坐标轴标签。
如果要设置刻度名倾斜展示,需要给xAxis.axisLabel.rotate设置一个在(-90,90)之内的值。例如chartOption.xAxis.axisLabel.rotate = 60(具体可以参考官网:官网rotate配置地址)。效果图如下:
设置倾斜角度后的效果

当x轴刻度标签名过长的时候,会出现超过图表区域的文字被隐藏的问题

没有做任何处理的效果:
没有做任何处理的效果

解决思路:

1、计算出横坐标刻度标签中最长的长度
2、根据这个长度计算出图表的grid.bottom的值。因为设置的倾斜角度是60度,可以通过三角函数计算得出:最大长度*Math.sin(60 * Math.PI / 180)
3、同时如果最左边的标签特别长的话,还需要设置grid.left才行。grid.left也可以通过三角函数计算得出:最左侧标签长度*Math.cos(60 *Math.PI / 180)。
(备注:最好是取前三条标签对应的左侧宽度的最大值,可以避免出现第一条很短,第二条很长导致第二条长度超出的问题)
4、将计算出来的值赋给grid.left以及grid.bottom

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

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

相关文章

“高级Vue状态管理 - Vuex的魅力与应用“

目录 引言1. Vuex的简介1.1 什么是Vuex?1.2 Vuex的核心概念 2. Vuex的值获取与改变(综合案例)3. Vuex的异步请求总结 引言 在现代Web开发中,前端应用变得越来越复杂。随着应用规模的扩大和数据流的复杂性增加,有效地管理应用的状态成为了一项…

2023年中国饲料酸化剂产量、需求量及市场规模分析[图]

饲料酸化剂又称酸度调节剂,作为新型的饲料添加剂,其作用是保持动物体内的电解质平衡,促进动物健康生长。饲料酸化剂的众多作用机理都源于其酸化效应,即通过降低消化道中pH值使影响动物生长、生产所需的一些相关因素得以很好地发挥…

招投标系统软件源码,招投标全流程在线化管理

功能描述 1、门户管理:所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含:招标公告、非招标公告、系统通知、政策法规。 2、立项管理:企业用户可对需要采购的项目进行立项申请,并提交审批,查看所…

完整教程:Java+Vue+Websocket实现OSS文件上传进度条功能

引言 文件上传是Web应用开发中常见的需求之一,而实时显示文件上传的进度条可以提升用户体验。本教程将介绍如何使用Java后端和Vue前端实现文件上传进度条功能,借助阿里云的OSS服务进行文件上传。 技术栈 后端:Java、Spring Boot 、WebSock…

软件TFN 2K的分布式拒绝攻击(DDos)实战详解

写在前头 本人写这篇博客的目的,并不是我想成为黑客或者鼓励大家做损坏任何人安全和利益的事情。因科研需要,我学习软件TFN 2K的分布式拒绝攻击,只是分享自己的学习过程和经历,有助于大家更好的关注到网络安全及网络维护上。 需要…

LabVIEW将视觉生成器AI用作OPC服务器

LabVIEW将视觉生成器AI用作OPC服务器 介绍如何将视觉生成器AI配置为OPC服务器,并使用共享变量共享视觉生成器AI生成的结果。OPC是一系列标准规范,定义了来自不同制造商的控制设备之间的实时数据通信。OPC数据访问通信是基于客户端服务器的通信。 共享系…

Java架构师缓存架构设计

目录 1 导学2 高性能概述2.1 高性能的定义和衡量指标2.2 如何实现高性能的计算机系统或软件程序2.3 木桶理论2.4 如何实现计算机系统或软件程序的高性能3 多级缓存设计3.1 浏览器缓存3.2 CDN缓存3.3 负载均衡的缓存3.4 进程内缓存3.5 分布式缓存4 缓存技术方案5 如何进行缓存拆…

cad由于找不到mfc140u.dll怎么回事?mfc140u.dll丢失的解决方法

当你在使用 CAD(计算机辅助设计)软件时,如果出现“找不到 mfc140u.dll”的错误提示,这通常意味着你的计算机上缺少这个重要的动态链接库文件。Mfc140u.dll 是 Microsoft Foundation Class(MFC)库的一部分&a…

IIS 解析漏洞复现

文章目录 IIS 解析漏洞复现1. 漏洞描述2. 漏洞复现3. 漏洞原因4. 安全加固5. 安全防护 IIS 解析漏洞复现 1. 漏洞描述 说明内容漏洞编号漏洞名称IIS 解析漏洞漏洞评级高危影响范围IIS 6.0及以前版本IIS 7.0IIS 7.5漏洞描述IIS 解析漏洞是指在 IIS 服务器上存在的安全漏洞&…

【postgresql】ERROR: integer out of range

查询文章都类似,只是类型没有对应上,根据实际情况处理。 前情 使用postgresql数据库数据库ID类型int4实体类代码private Long id; 异常 ### Cause: org.postgresql.util.PSQLException: ERROR: integer out of range ; ERROR: integer out of range;…

【RKNN】YOLO V5中pytorch2onnx,pytorch和onnx模型输出不一致,精度降低

在yolo v5训练的模型,转onnx,再转rknn后,测试发现: rknn模型,量化与非量化,相较于pytorch模型,测试精度都有降低onnx模型,相较于pytorch模型,测试精度也有降低&#xff…

VUE echarts 柱状图、折线图 双Y轴 显示

weekData: [“1周”,“2周”,“3周”,“4周”,“5周”,“6周”,“7周”,“8周”,“9周”,“10周”], //柱状图横轴 jdslData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200], // 折线图的数据 cyslData: [100, 200, 400, 300, 500, 500, 500, 450, 480, 400], // 柱状图…