echarts X轴类目名太长时隐藏，hover时显示全部
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
echarts X轴类目名太长时隐藏，hover时显示全部的更多相关文章
- “sgen.exe”未能运行。文件名或扩展名太长
问题 创建项目后无法运行 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 MSB6003 指定的任务可执行文件"sgen.exe"未能运行.System.Component ...
- Java Mail 附件名太长导致接收端附件名解析出错
问题前提:公司需要往邮件中写 excle 文件,返送成功后发现文件格式有误(如:xxxx.bat 等文件后缀),但是有些文件又不会, 后来发现是由于文件名称太长所导致. 问题原因:java mail中 ...
- "CreateProcess error=206, 文件名或扩展名太长。"，用gradle构建项目创建mapper文件时提示这个错误，是Windows Gradle长类路径问题，官方已经修复
用gradle构建项目mapper文件时,提示这个错误,这个是Windows Gradle长类路径问题, gradle官方已经解决了这个问题. 官网给出的解决方法地址:https://plugins. ...
- 【DOS】Win7系统文件夹名太长无法删除问题的解决
一个测试工具产生了几个坑爹文件夹名为n个“x” ,系统提示删除不掉. 网上百度,说什么压缩.写bat文件...统统没用. 猛地看到右击菜单中安装了git客户端工具,想试试看.在该文件夹目录下Git B ...
- CreateProcess error=206, 文件名或扩展名太长。
改:
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts x轴文字显示不全（解决方案）
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts x轴标签文字过多导致显示不全
原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...
- echarts Y轴名称显示不全（转载）
转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...
- OC中协议, 类目, 时间, 延展, 属性
只有继承和协议需要引IMPORT "头文件"; 必须接受marryprotocol协议, id<marryprotocol>基于类型的限定, 才能给实例变量赋值 @pr ...
随机推荐
- 【Azure 应用服务】查看App Service for Linux上部署PHP 7.4 和 8.0时，所使用的WEB服务器是什么？
问题描述 如何查看PHP应用部署到App Service后,Azure上面使用的应用服务器是什么呢?因为App Service支持两种操作系统,Windows 和 Linux.在Windows中,使用 ...
- 固态硬盘使用f2fs作为根分区安装linux
目录 前言 碰到的问题 对策 我的实际操作步骤 0.警告 1. 准备 2. 分区 3. 使用网络安装debian10 4. 备份根分区 5. 修改固态硬盘linux根分区为f2fs 6.恢复备份 7. ...
- Java 客户信息管理软件 （面向对象 封装 总结）
1 package com.bytezero.cim.bean; 2 3 /** 4 * 5 * @Description Customer为实体对象,用来封装客户信息 6 * @author Byt ...
- 什么是docker的多阶段构建
Docker多阶段构建是一种技术,允许在不同的构建阶段中使用不同的基础镜像,并只复制构建所需的文件和依赖项.这种技术旨在减少最终生成的Docker镜像的大小和运行时的资源消耗. 多阶段构建的一般工作流 ...
- 数据库表到java类转换工具
//该工具类可以实现:给定一个指定的数据库表名,即可自动生成对应的java实体类 package com.iamzken.utils; import java.io.BufferedWriter; i ...
- 13_AAC编码介绍
AAC(Advanced Audio Coding,译为:高级音频编码),是由Fraunhofer IIS.杜比实验室.AT&T.Sony.Nokia等公司共同开发的有损音频编码和文件格式. ...
- 修复华硕笔记本fn+f2在ubuntu下wifi不能够正常使用和WiFi Disabled (Hard-blocked) (译文)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文发布于 2014-12-22 11:49:16 ...
- HttpClient 3.1 发送 https 请求跳过验证
环境: 依赖: <dependency> <groupId>commons-httpclient</groupId> <artifactId>commo ...
- 开发必会系列：hibernate事务
一 事务定义及特性 1.数据库事务的定义:数据库事务(Database Transaction) 是指由一个或多个SQL语句组成的工作单元,这个工作单元中的SQL语句相互依赖,如果有一个SQL语句执 ...
- ssm整合简单配置
最近由于系统重装,之前已经写好了的框架都被我删的一干二净,于是自己动手重新搭了个简单的ssm(spring springmvc mybatis) 运行环境 (java1.8,Tomcat8.5,mav ...