echarts X轴类目名太长时隐藏，hover时显示全部

news/发布时间2024/8/25 17:40:21

echarts图表X轴

在柱状图中，X轴类目名如果数据太长；
echarts会默认进行隐藏部分字段；
如果我们想让每一个类目名都显示出来，需要进行额外的处理

X轴类目名太长时,默认只显示一部分类目名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>4.9.0</title><script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts-en.common.js"></script>
</head><body><div style="width: 400px;height: 300px;"></div><script>let myChart = echarts.init(document.querySelector('div'))let colors = ['#4C98FB', '#83CCE7', '#26C7C8', '#73DEBD'];let option = {xAxis: {type: 'category',data: ['我是字段1cccccccc', '我是字段2', '我是字段3', '我是字段4', '我是字段5', '我是字段6', '我是字段7']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};myChart.setOption(option);</script>
</body>
</html>

分析原因

通过上面的现象，我们发现：
展示不出来的原因是水平标签过多导致；
我们如果可以让它倾斜的话，说不定可以全部展示出来；
我们可以使用 xAxis下的 axisLabel中的 rotate属性来解决；
rotate:刻度标签旋转角度；这个值在 【90，-90】的范围类
在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。

使用倾斜角度让每一个类目名显示出来

xAxis: {type: 'category',data: ['我是字段1cccccccc2', '我是字段2', '段3', '我是字段4', '我是字段5', '我', '我是字段7'],axisLabel: {  interval:0,  rotate:-20  // 表示倾斜的角度}  
},

interval这个属性的简单介绍

interval:坐标轴刻度标签的显示间隔，在类目轴中有效。
默认会采用标签不重叠的策略显示标签。
可以设置成0表示强制显示所有标签。
如果设置为 1，表示『隔一个标签』
可以用数值表示间隔的数据，也可以通过回调函数控制。
回调函数格式如下：
interval:(index:number, value: string) => {// index表示该类目名的下标// string表示该类目名console.log(index,string)return 1
},
如果返回的是true,表示显示该类目名；
也就是说：可以返回数字或者布尔值

let option = {xAxis: {type: 'category',axisLabel: {  interval:2, // x轴间隔2个类目名},data: ['我是1', '我是2', '我是3', '我是4', '我是5', '我是6', '我是7']},
}

换行\n来处理这个问题

我们通过倾斜可以完全的把这个问题处理了；
可是有些时候，我们ui不想倾斜；那还有其他办法吗？可以换行
换行的话我们有两种方式；
第1种:直接在data中通过\n换行
不推荐第1种这样的方式去做；是因为如果图表还有tooltip的话，会影响。
第2种：在formatter函数中去处理

xAxis: {type: 'category',data: ['我是\n字段1', '我是\n字段2', '段3', '我是\n字段4', '我是\n字段5', '我是\n字段6', '我是\n字段7'],
},

在data中通过\n换行会在 tooltip 会产生一个空格【不推荐有有副作用】

tooltip: {// 使用formatter回调函数自定义显示内容formatter: function (params) {// params是包含数据信息的对象return params.name + ': ' + params.value;}
},
xAxis: {type: 'category',data: ['我是\n字段1', '我是\n字段2', '段3', '我是\n字段4', '我是\n字段5', '我是\n字段6', '我是\n字段7'],
},

通过 axisLabel中的formatter函数来换行 【推荐】没有副作用

我们可以通过xAxis下的axisLabel下的formatter函数来进行换行,
这样做不会改变原始数组，tooltip也不会出现任何问题；
如果像上面那样做；改变原始数据；

 tooltip: {// 使用formatter回调函数自定义显示内容formatter: function (params) {// params是包含数据信息的对象return params.name + ': ' + params.value;}},xAxis: {interval: 0, type: 'category',data: ['我是字段1', '我是字段2', '我是字段3', '我是字段4', '我是字段5', '我是字段6', '我是字段7'],axisLabel: {  formatter: function (params) {console.log('x',params)return params.substring(0,2) + '\n' + params.substring(2)}}
},

超出进行隐藏部分名称，hover显示全部

现在我们要做这样一个效果，
X轴中的类目名默认显示2个字，超出部分隐藏，hover的时候显示全部；
我们需要使用到echarts中的 mouseover 事件；
同时设置xAxis中的triggerEvent为true
xAxis: {triggerEvent: true,interval: 0, type: 'category',...其他配置项...
}
如果我们不设置triggerEvent: true鼠标移入X轴的类名不会被触发myChart.on('mouseover', (e) => {console.log('鼠标移入X轴的类名不会被触发',e)
})

实现的思路

我们需要动态创建一个dom节点，通过createElement来实现
注册鼠标移入事件 myChart.on('mouseover',(e)=>{ })
通过e.event可以拿到offsetX和offsetY
紧接着将这个元素赋值(X轴类的全名称),添加到html页面中
鼠标的移出事件 myChart.on('mouseout',(e)=>{ })

let option = {xAxis: {// X轴的类目名必须设置这个属性，移入事件才会被触发triggerEvent: true,interval: 0, type: 'category',data: ['我是字段111111', '我是字段222222', '我是字段33333', '我是字段4', '我是字段5', '我是字段6', '我是字段7'],axisLabel: {  formatter: function (params) {return params.substring(0,2) + '...'}}},... 其他配置项
}
myChart.setOption(option);myChart.on('mouseover', (e) => {console.log('鼠标移入',e)if(e.componentType === "xAxis"){// 我们这里先判断一个创建的dom节点是否存在let tipNameDom = document.getElementById('tipNameDom')console.log(1, tipNameDom)// 如果不存在我们创建一个dom节点if(!tipNameDom){// 创建一个元素var createDivElement = document.createElement('div')// 给这个元素设置属性createDivElement.setAttribute('id', 'tipNameDom')// // 设置元素的位置createDivElement.style.display = 'block'createDivElement.style.position = 'absolute'// 获取当前位置createDivElement.style.top =  e.event.offsetY + 15 + 'px'createDivElement.style.left = e.event.offsetX - 10 + 'px'// 这里需要使用 innerHTML，因为我们设置了一样html的属性createDivElement.innerHTML = e.value// document.querySelector('body').appendChild(createDivElement)document.querySelector('body').appendChild(createDivElement)}else {tipNameDom.style.display = 'block'tipNameDom.style.position = 'absolute'// 获取当前位置tipNameDom.style.top =  e.event.offsetY + 15 + 'px'tipNameDom.style.left = e.event.offsetX - 10 + 'px'// 这里需要使用 innerHTML，因为我们设置了一样html的属性tipNameDom.innerHTML = e.value}}
})//  移入事件如果被多次触发，则hover的时候无法显示全部
myChart.on('mouseout', function(params) {console.log('移除元素',params )if (params.componentType === 'xAxis') {let elementDiv = document.querySelector('#tipNameDom')console.log('elementDiv', elementDiv)elementDiv.style.display = 'none'}  
})

是不是这样就OK了？

其实，并不是的；
如果小伙伴们多次移入移出；
偶尔会出现光标明明是移入的状态，但是类目名并没有全部显示出来；
此时已发现了移入事件被多次触发；
怎么解决这个问题呢？
目前的我，并不知道如何去解决。我感觉是echarts的bug;
如果知道的大佬；可以解答一下，万分感激；


全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>4.9.0</title><!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> --><script src="https://cdn.staticfile.net/echarts/4.9.0-rc.1/echarts-en.common.js"></script><script>window.onload =function (){let myChart = echarts.init(document.querySelector('.echars'))let colors = ['#4C98FB', '#83CCE7', '#26C7C8', '#73DEBD'];let option = {tooltip: {// 使用formatter回调函数自定义显示内容formatter: function (params) {// params是包含数据信息的对象return params.name + ': ' + params.value;}},xAxis: {// X轴的类目名必须设置这个属性，移入事件才会被触发triggerEvent: true,interval: 0, type: 'category',data: ['我是字段111111', '我是字段222222', '我是字段33333', '我是字段4', '我是字段5', '我是字段6', '我是字段7'],axisLabel: {  formatter: function (params) {return params.substring(0,2) + '...'}}},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};myChart.setOption(option);myChart.on('mouseover', (e) => {console.log('鼠标移入',e)if(e.componentType === "xAxis"){// 我们这里先判断一个创建的dom节点是否存在let tipNameDom = document.getElementById('tipNameDom')console.log(1, tipNameDom)// 如果不存在我们创建一个dom节点if(!tipNameDom){// 创建一个元素var createDivElement = document.createElement('div')// 给这个元素设置属性createDivElement.setAttribute('id', 'tipNameDom')// // 设置元素的位置createDivElement.style.display = 'block'createDivElement.style.position = 'absolute'// 获取当前位置createDivElement.style.top =  e.event.offsetY + 15 + 'px'createDivElement.style.left = e.event.offsetX - 10 + 'px'// 这里需要使用 innerHTML，因为我们设置了一样html的属性createDivElement.innerHTML = e.value// document.querySelector('body').appendChild(createDivElement)document.querySelector('body').appendChild(createDivElement)}else {tipNameDom.style.display = 'block'tipNameDom.style.position = 'absolute'// 获取当前位置tipNameDom.style.top =  e.event.offsetY + 15 + 'px'tipNameDom.style.left = e.event.offsetX - 10 + 'px'// 这里需要使用 innerHTML，因为我们设置了一样html的属性tipNameDom.innerHTML = e.value}}})//  移入事件如果被多次触发，则hover的时候无法显示全部myChart.on('mouseout', function(params) {console.log('移除元素',params )if (params.componentType === 'xAxis') {let elementDiv = document.querySelector('#tipNameDom')console.log('elementDiv', elementDiv)elementDiv.style.display = 'none'}  })}
</script>
</head>
<body><div style="width: 400px;height: 300px;" class="echars"></div>
</body></html>

尾声

如果你觉得我写的不错的话，点一下推荐。感谢了
我已经几个月没有人给我推荐了。
听说打赏的小哥哥都追到女朋友了，
咦！你不信，不信你给我打赏看一下！
保准你追到到喜欢的Ta

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

如若内容造成侵权/违法违规/事实不符，请联系连锁易网进行投诉反馈email:xxxxxxxx@qq.com，一经查实，立即删除！

相关文章

IREE HLO与MLIR编译器

IREE HLO与MLIR编译器

IREE HLO与MLIR编译器 MLIR(Multi-Level Intermediate Representation）是谷歌团队开发的开源编译器框架，提供了一套灵活的软件基础设施，以便规范中间表达式（IR）及其相互之间的转换，建立了一个友好的编译器开发平台，一些比较好的对MLIR框架解读可以参考。IREE项目也是谷歌…
阅读更多...
【EF Core】Code first

【EF Core】Code first

简介 前期环境 Visual Studio 2022 .net framework 4.7.2 Sqlite3 Navicat 15 CodeFirst的三种方式使用新数据库 使用现有数据库 迁移一、使用新数据库的CodeFirst 查看：https://learn.microsoft.com/zh-cn/ef/ef6/modeling/code-first/workflows/existing-database 查看：htt…
阅读更多...
【Azure Storage Account /ADLS】可用性指标降低的警告和是否会发生故障转移

【Azure Storage Account /ADLS】可用性指标降低的警告和是否会发生故障转移

问题描述使用存储位于Azure的存储账号和ADLS Gen2，为存储账号的可用性配置了告警。 想了解： 1) 可用性报警对业务依赖并使用存储账号的业务程序是否会产生影响，比如是否会导致依赖存储账号的程序不能正常工作，报错等 2) 当可用性降低后，存储账号是否会产生故障转移？或者是…
阅读更多...
蓝桥杯STM32G431RBT6-各个外设的配置过程

蓝桥杯STM32G431RBT6-各个外设的配置过程

LED,按键配置LED点亮，按键采集按键值前期准备：通过Cubemx生成一个源文件方便后续直接使用。 源文件准备完毕以后开始进行按键和LED的配置 LED　　对比芯片引脚连接图可以知道8个LED分别连接在GPIOC的如下8个引脚中　 Cubemx中对该8个引脚进行配置，分别配置为推挽输出模式…
阅读更多...
高级项目管理

高级项目管理

4、六西格玛认为业务流程改进遵循5步循环改进法，即 DMAIC模式:定义、度量、分析、改进、控制。（1）定义（Define）：识别需要改进的产品或过程，确定改进项目所需的资源。（2）度量（Measure）：定义缺陷，收集产品或过程的表现作为工作基准，建立改进目标。（3）分析（Analy…
阅读更多...
python爬虫—学习笔记-3

python爬虫—学习笔记-3

python爬虫—学习笔记-3 ps：因为本人近一个月住院，文章为队友所著。 此次学习内容为如何搭建服务器 1.打开pycharm，创建目录server在设置中的Python解释器中安装Flask2．在创建的server1中输入本节课所学代码在网页中输入ip 端口号 子目录 本机访问127.0.0.1:5000/子目录 外…
阅读更多...
python 使用waitress替代flask自带的web服务器

python 使用waitress替代flask自带的web服务器

首席引入依赖安装waitrss pip intsll waitress然后在flask程序内引入依赖 使用server（）函数代替app.run（）函数 启动时，直接python xxx.py即可from waitress import serve from flask import Flask app = Flask(__name__)@app.route(/) def hello_world(): return Hello Wo…
阅读更多...
sy3

sy3

一、任务详情 密码引擎API的主要标准和规范包括： 1 微软的Crypto API 2 RAS公司的PKCS#11标准 3 中国商用密码标准：GMT 0016-2012 智能密码钥匙密码应用接口规范，GMT 0018-2012密码设备应用接口规范等 研究以上API接口，总结他们的异同，并以龙脉GM3000Key为例，写出调用不同…
阅读更多...
发布一个自己的composer包

发布一个自己的composer包

首先我们创建一个空的目录，并且运行以下命令初始化一个空白的composer包 composer init可以在命令窗口看到有返回提示； 需要输入包名 This command will guide you through creating your composer.json config.` Package name (<vendor>/<name>) :我这里写的是c…
阅读更多...
读所罗门的密码笔记15_数据透明度

读所罗门的密码笔记15_数据透明度

读所罗门的密码笔记15_数据透明度1. 数据透明度与控制权 1.1. 作为人类，我们会带有偏见，而且往往不知道自己在智力和情感上的盲区 1.2. 精心制作的人工智能机器，即使有自己的缺点，也能帮助我们做出更客观的决定，为提升我们的生活质量和改善社区的生态环境做出贡献 1.3. 美…
阅读更多...
QAT量化感知训练

QAT量化感知训练

QAT量化感知训练 基本原理 相比训练后量化因为其不是全局最优而导致的精度损失，QAT量化感知训练能做到基于loss优化的全局最优，而尽可能的降低量化精度损失，其基本原理是：在fp32模型训练中就提前引入推理时量化导致的权重与激活的误差，用任务loss在训练集上来优化可学习的…
阅读更多...
树状数组快速入门

树状数组快速入门

树状数组、 Fenwick Tree 或 Binary Indexed Tree ，通常用缩写 BIT 代表。 是一种 “一种基于二进制 lowbit ，用于维护（加法、位运算、max、gcd 的）前缀和的树形数组” 。 可以叫做 一个树状数组 或 一棵 Fenwick Tree 。 重要性质：同时满足即是数组又是树的性质。针对定义…
阅读更多...
蓝桥杯2020年C组-试题I-数字三角形（简化版-少一个左右路径差不大于1条件）

蓝桥杯2020年C组-试题I-数字三角形（简化版-少一个左右路径差不大于1条件）

1. 题目介绍上图给出了一个数字三角形。 从三角形的顶部到底部有很多条不同的路径。 对于每条路径，把路径上面的数加起来可以得到一个和，你的任务就是找到最大的和。 路径上的每一步只能从一个数走到下一层和它最近的左边的那个数或者右边的那个数。 输入格式 输入的第一行包…
阅读更多...
e/易语言 按钮界面弹出气泡提示

e/易语言 按钮界面弹出气泡提示

案例本文来自博客园，作者：__username，转载请注明原文链接：https://www.cnblogs.com/code3/p/18125232
阅读更多...
Linux安装JDK详细教程

Linux安装JDK详细教程

Linux安装JDK详细教程（图文教程） 这里介绍两种方式：yum安装方式和手动安装1、yum安装 1.1 查看JDK版本，找到你想要安装的JDK版本，这里以 JDK1.8 为例 输入命令：yum -y list java*1.2 安装JDK1.8 输入命令：yum install -y java-1.8.0-openjdk.x86_64 没权限执行这行：sud…
阅读更多...
查询下属

查询下属

win +R 键sqlplus1 用户名：scott密码 ：tigerselect * from emp;select * from dept;select ename,sal,comm from emp;select ename,sal+nvl(comm,0) from emp;select ename,12*(sal+nvl(comm,0))年薪 from emp;1 select empno from emp where ename=upper(king);2 select …
阅读更多...
PHP代码审计——Day7-Bells

PHP代码审计——Day7-Bells

漏洞解析 function getUser($id) {global $config, $db;if (!is_resource($db)) {$db = new MySQLi($config[dbhost],$config[dbuser],$config[dbpass],$config[dbname]);}$sql = "SELECT username FROM users WHERE id = ?";$stmt = $db->prepare($sql); // 调用…
阅读更多...
【每周例题】蓝桥杯 C++ 多数

【每周例题】蓝桥杯 C++ 多数

多数元素 题目 多数元素思路分析一 .第一个想法，暴力遍历，然后会发现容易超时，那么更进一步想：哈希表使用哈希表存储每个数出现的次数，即使用哈希映射（HashMap）来存储每个元素以及出现的次数。对于哈希映射中的每个键值对，键表示一个元素，值表示该元素出现的次数 加入…
阅读更多...
Python函数

Python函数

一、函数定义以及作用 函数/方法/function(功能)：函数是组织好的，可重复使用的，用来实现单一或相关联功能的代码段（块）。函数能提高应用的模块性和代码的重复利用率。比如我们天天使用的函数print()，这个就是函数（一个Python内置的函数）。也可以自己创建函数，这类函数…
阅读更多...
linux环境安装——kafka安装复习

linux环境安装——kafka安装复习

需要安装jdk、zk；然后才是kafkakafka版本：kafka_2.13-3.2.3.tgz[root@iZf8zi6zcbssmm6c2nrhapZ /]# ls -alt total 84 drwxrwxrwt. 9 root root 4096 Apr 9 14:42 tmp drwxr-xr-x 7 root root 4096 Apr 9 14:38 soft drwxr-xr-x 7 root root 4096 Apr 9 14:38 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023