echart中x轴数据过多时展示不全
项目中遇到需要展示一些柱状图,之前做相关功能时,横坐标x轴一直用的是时间,所以没有注意到这个问题。
如下图所示:

当x轴显示的是”人名“这种类型的值的时候,这种显示情况就有问题了,这样就不会知道,没有显示的具体是谁。
解决这个问题主要有两种方法:
- 让所有的x轴的值显示出来。
- 鼠标悬停显示横坐标内容。
从网上查到了一些方法,这里做一下总结。
首先尝试第一种方法
1.让所有的x轴的值显示出来
让x轴值全部显示出来,一共有两种方式:
第一种方式:
利用axisLabel,axisLabel主要用于坐标轴刻度标签的相关设置。
axisLabel有很多属性,常用的如下所示:
show:true, — 表示:是否显示刻度标签(默认值:true)
interval: ‘auto’, ---- 表示:采用标签不重叠的策略间隔显示标签。(默认值:auto)
除此之外,interval还可以设置具体的值,若是设置为1,表示隔一个标签显示一个标签;若是设置为2,表示隔两个标签显示一个标签。
这里,为了将x轴标签全显示出来,给xAxis添加axisLabel元素,并将interval属性设置为0。如下所示:

显示效果如下:

x轴的所有数据都显示出来了,但是由于空间不够,造成了数据的重叠。这并不是我们想要的结果。
此时,想到axisLabel还有一个属性rotate,它用来控制刻度标签旋转的角度,在类目标签显示占不下的时候可以通过旋转防止标签之间的重叠。旋转角度从-90度到90度。
故,在上面的基础上,可以给文字加上一定程度的旋转。

效果如下:

可以看到,这样的话就会解决重叠的文字的问题,但是这样有一个弊端,就是当我的x轴数据在增多的时候,x轴的标签依旧会重叠。如下所示:

所以,利用axisLabel的interval和rotate属性,解决本文类似问题的前提条件是:x轴的数据量是在某个范围之内,能够正常显示的。
第二种方式:
此时考虑第二种方式,echart中包含一个组件dataZoom,这个组件主要用于区域缩放。
主要有以下几种类型的dataZoom组件,
dataZoomInside:内置于坐标系中,使用户可以在坐标系上鼠标拖拽、滑动来缩放或滚动坐标系。(这种方式看不到滑块)
dataZoomSlider:有单独的滑动条,用户在滑动条上进行缩放或滑动。
dataZoomSelect:提供一个选择框进行数据区域缩放,配置项在toolbox中。
dataZoom组件可同时存在多个,起到共同控制的左右。如果多个dataZoom组件共同控制同一个数轴,它们会自动联动。
为了更好的客户体验,inside和slider方式同时使用,在option里面加上dataZoom组件,代码如下:


显示如下:x轴标签数量少于25个的时候:

当x轴标签数量大于25个的时候:

这样能够很好的解决问题,拖拽窗口展示想要看到的区域。
2.鼠标悬停显示横坐标内容
原本的设置是鼠标悬停显示y轴的坐标值,现在可以设置鼠标悬停同时显示x轴和y轴的值。
这个使用了tooltip组件的formatter属性
代码如下:

显示如下:

这样鼠标悬停时就会显示具体的信息,也是一种解决方法。
不过若是在x轴数据量很庞大的情况下,还是推荐使用dataZoom组件。
更多关于dataZoom组件的知识,请去官网https://echarts.apache.org/zh/option.html#dataZoom
相关文章:
echart中x轴数据过多时展示不全
项目中遇到需要展示一些柱状图,之前做相关功能时,横坐标x轴一直用的是时间,所以没有注意到这个问题。 如下图所示: 当x轴显示的是”人名“这种类型的值的时候,这种显示情况就有问题了,这样就不会知道&…...
关于GIS原理的实际分析应用题的一些解法
话不多说,看题.01 公园选址问题1题目请写出利用GIS技术进行公园选址的空间操作步骤。其中公园选址条件:1)为了安静舒适,要求该园区离主要公路1公里以外,且交通方便,离主要公路3公里以内。2)公园最好依附在大…...
混合精度训练,FP16加速训练,降低内存消耗
计算机中的浮点数表示,按照IEEE754可以分为三种,分别是半精度浮点数、单精度浮点数和双精度浮点数。三种格式的浮点数因占用的存储位数不同,能够表示的数据精度也不同。 Signed bit用于控制浮点数的正负,0表示正数,1表…...
每天五分钟机器学习:新的大规模的机器学习机制——在线学习机制
本文重点 本节课程我们将学习一种新的大规模的机器学习机制--在线学习机制。在线学习机制让我们可以模型化问题。在线学习算法指的是对数据流进行学习而非离线的静态数据集的学习。许多在线网站都有持续不断的用户流,对于每一个用户,网站希望能在不将数据存储到数据库中便顺…...
计算机组成原理错题
静态RAM(SRAM)和动态RAM(DRAM)的基本电路图不同,因此可以通过观察存储器的基本电路图来判断它属于哪一类。 静态RAM的基本电路图包括一个存储单元和一个数据选择器。每个存储单元由一个触发器(flip-flop&a…...
数学基础整理
收纳一些天天忘的结论qwq 线性求逆元 invi(p−pi)invpmodiinv_i(p-\dfrac{p}{i})\times inv_{p\bmod i}invi(p−ip)invpmodi 卡特兰数 组合数公式:HnC2nn−C2nn−1H_nC_{2n}^n-C_{2n}^{n-1}HnC2nn−C2nn−1 递推式:HnHn−1(4n−2)n1H_n\d…...
JavaWeb11-死锁
目录 1.死锁定义 1.1.代码演示 1.2.使用jconsole/jvisualvm/jmc查看死锁 ①使用jconsole:最简单。 ②使用jvisualvm:(Java虚拟机)更方便,更直观,更智能,更高级,是合适的选择。 …...
堆的概念和结构以及堆排序
前言 普通的二叉树是不适合用数组来存储的,因为可能会存在大量的空间浪费。而完全二叉树更适合使用顺序结 构存储。现实中我们通常把堆(一种二叉树)使用顺序结构的数组来存储,需要注意的是这里的堆和操作系统 虚拟进程地址空间中的堆是两回事,…...
【Linux学习笔记】1.Linux 简介及安装
前言 本章介绍Linux及其安装方法。 Linux 简介 Linux 内核最初只是由芬兰人林纳斯托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的。 Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 UNIX 的多…...
代码练习2~
在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数。def …...
微信小程序 之 云开发
一、概念1. 传统开发模式2. 新开发模式 ( 云开发模式 )3. 传统、云开发的模式对比4. 传统、云开发的项目流程对比5. 云开发的定位1. 个人的项目或者想法,不想开发服务器,直接使用云开发2. 某些公司的小程序项目是使用云开发的,但是不多&#…...
程序员的三门课,学习成长笔记
最近是有了解到一本好书,叫做程序员的三门课在这本书的内容当中我也确实汲取到了很多前辈能够传达出来的很多关于程序员职业规划以及成长路线上的见解,令我受益匪浅,故此想要把阅读完的每一章节结合自己的工作经验做一个精细化的小结…...
[技术经理]01 程序员最优的成长之路是什么?
00前言 谈起程序员的职业规划,针对大部分的职场人士,最优的成长之路应该是走技术管理路线,而不是走技术专家路线。 01关键的一步 中国自古就有“学而优则仕”的传统,发展到今天,在我们的现代企业里面,尤…...
linux集群技术(三)--七层负载均衡-nginx
nginx特点nginx优势、缺点生产架构nginx 7层负载均衡语法示例nginx负载均衡算法测试案例生产案例 1.nginx特点 1. 功能强大,性能卓越,运行稳定。 2. 配置简单灵活。 3. 能够自动剔除工作不正常的后端服务器。 4. 上传文件使用异步模式。client---nginx---web1 web2 web3 lvs同…...
阿里云物联网平台设备模拟器
在使用阿里云物联网平台过程中,如果开始调试没有实际的物理设备,可以考虑在阿里云物联网平台使用官方自带的模拟器进行调试。不过也可以通过叶帆科技开发的阿里云物联网平台设备模拟器AliIoTSimulator进行调试,AliIoTSimulator可以独立运行&a…...
docker全解
目录说明docker简介为什么是docker容器与虚拟机比较容器发展简史传统虚拟机技术容器虚拟化技术docker能干什么带来技术职级的变化开发/运维(Devops)新一代开发工程师Docker应用场景why docker?docker的优势docker和dockerHub官网Docker安装CentOS Docker…...
Vue3 基础
Vue3 基础 概述 Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面&…...
【Linux】冯.诺依曼体系结构与操作系统
环境:centos7.6,腾讯云服务器Linux文章都放在了专栏:【Linux】欢迎支持订阅🌹冯.诺依曼体系结构什么是冯诺依曼体系结构?我们如今的计算机比如笔记本,或者是服务器,基本上都遵循冯诺依曼体系结构…...
WSO2 apim 多租户来区分api
WSO2 apim 多租户来区分api1. Tenant1.1 Add new tenant1.2 Add Role/User1.3 Published Api2. Delete Teant3. AwakeningWSO2安装使用的全过程详解: https://blog.csdn.net/weixin_43916074/article/details/127987099. Official Document: Managing Tenants. 1. Tenant 1.1 …...
TodoList(Vue前端经典项目)
TodoList主要是包含了CRUD功能,本地存储功能(loaclStorage)总结:全选按纽可以通过forEach循环来讲数据中的isCheck中的false删除实现就通过传递id,然后根据filter循环将符合条件的数据返回成数组,然后将返回…...
告别虚拟机卡顿:在VMware里给CentOS 7最小化安装分配多少内存和CPU才够用?
虚拟机性能优化指南:CentOS 7最小化安装的资源分配策略在个人电脑上运行虚拟机时,最令人头疼的问题莫过于性能瓶颈。许多初学者在创建CentOS 7虚拟机时,常常陷入两难境地:分配过多资源会影响宿主机运行,分配过少又会导…...
Windows Defender移除工具深度解析:3步彻底禁用微软安全组件,性能飙升30%的终极方案
Windows Defender移除工具深度解析:3步彻底禁用微软安全组件,性能飙升30%的终极方案 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地…...
LoRA微调实战2026:从零到生产的完整工程指南
为什么2026年LoRA仍然是最重要的微调方法 大模型微调技术日新月异,但LoRA(Low-Rank Adaptation)自2021年提出以来,不仅没有被淘汰,反而在2026年成为工业界微调的主流方法之一。原因很简单:极致的参数效率。…...
数字主权还是数字枷锁?德国eIDAS钱包的Apple/Google账户依赖之困
数字主权还是数字枷锁?德国eIDAS钱包的Apple/Google账户依赖之困 2025年的深秋,一则来自德国联邦内政部(BMI)的技术文档在开发者社区引发了轩然大波。文档明确指出,即将在德国落地的eIDAS钱包——这个承载着欧盟数字身…...
如何快速提升电脑性能:5个终极系统调优技巧指南
如何快速提升电脑性能:5个终极系统调优技巧指南 【免费下载链接】Universal-x86-Tuning-Utility Unlock the full potential of your Intel/AMD based device. 项目地址: https://gitcode.com/gh_mirrors/un/Universal-x86-Tuning-Utility 你是否遇到过这样的…...
LeetCode 523:连续的子数组和 | 前缀和同余定理
LeetCode 523:连续的子数组和 | 前缀和同余定理 引言 连续的子数组和(Continuous Subarray Sum)是 LeetCode 第 523 题,难度为 Medium。题目要求判断数组中是否存在长度至少为 2 的连续子数组,其元素和是 K 的倍数。这…...
2026年合肥惊现AI奇迹,广禾元引领本土企业行业之巅
2026年合肥AI行业现状与用户痛点2026年,随着科技的飞速发展,合肥的AI行业呈现出蓬勃发展的态势。然而,用户在选择AI服务时,往往面临着诸多痛点。例如,市场上AI企业众多,服务质量参差不齐,用户难…...
Kubernetes多租户管理:实现资源隔离与安全的完整指南
Kubernetes多租户管理:实现资源隔离与安全的完整指南 引言 在企业环境中,多租户管理是Kubernetes的重要功能。通过多租户管理,可以实现不同团队或客户之间的资源隔离和安全控制。这对于共享Kubernetes集群的场景尤为重要。 作为一名资深的Dev…...
显卡驱动彻底清理解决方案:Display Driver Uninstaller专业使用指南
显卡驱动彻底清理解决方案:Display Driver Uninstaller专业使用指南 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-drivers…...
大模型底座的技术路线
主流大模型目前以token为单位处理文本,因其算力效率高、生态成熟。但byte-level/tokenizer-free路线正快速发展,它更端到端、跨语言统一且对噪声文本鲁棒。未来几年,外部接口可能仍用token,内部却将更多采用byte、patch或latent s…...
