echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全,最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错!
如图:
办法1:xAxis.axisLabel 属性
axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的)axisLabel: {
interval:0,
rotate:40}
以上就可解决x轴文字显示不全并将文字倾斜。如图:
稍微解释一下
interval
坐标轴刻度标签的显示间隔(在类目轴中有效哦),默认会采用标签不重叠的方式显示标签(也就是默认会将部分文字显示不全) 可以设置为0强制显示所有标签,如果设置为1,表示隔一个标签显示一个标签,如果为3,表示隔3个标签显示一个标签,以此类推
rotate
标签倾斜的角度,在类目轴的类目标签显示不全时可以通过旋转防止标签重叠(官方这样说的)旋转的角度是-90到90度 问题又来了,这个名称x轴的文字如果太长会受到遮挡,还是显示不全,这个时候可以用grid属性解决grid: {
left: '10%',
bottom:'35%'},
如图:
办法2:调用formatter文字竖直显示
一般很多人都习惯办法1的方式虽然不是很完美,但是在一定程度上还是解决了一些问题。在文字不是非常多的情况下还是可以的,感觉还没第一种方法好
axisLabel中使用formatter回调,formatter有两个参数,使用方法是这样的formatter:function(value,index){} ,value是类目(测试医院A,人民医院),index 是类目索引。axisLabel: {
interval: 0,
formatter:function(value)
{ returnvalue.split("").join("\n");
}
}
如图:
文字竖直这个formatter实在有点太简单化了,所以我们来做一个两个字的加\n的换行。formatter如下:axisLabel: {
interval: 0,
formatter:function(value)
{
debugger var ret = "";//拼接加\n返回的类目项var maxLength = 2;//每项显示文字个数var valLength = value.length;//X轴类目项的文字个数var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数if (rowN > 1)//如果类目项的文字大于3,{ for (var i = 0; i < rowN; i++) { var temp = "";//每次截取的字符串var start = i * maxLength;//开始截取的位置var end = start + maxLength;//结束截取的位置//这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串} return ret;
} else { returnvalue;
}
}
}
效果如图
办法3:X轴类目项隔一个换行(使用formatter中index参数)
都是上面的第二种方法是利用formatter中的value参数实现了文字拼接\n换行的,但是index参数并没有使用,现在我们就一起来使用这两个参数实现隔一个类目项换行。
效果如图:
代码比较简单:axisLabel: {
interval: 0,
formatter:function(value,index)
{ debugger if (index % 2 != 0) { return'\n\n' + value;
} else { returnvalue;
}
}
}
这种做法是我比较推荐的一种。以上几种方法基本上能解决问题,但是都不是很完美。
大家可能会遇到共同的一个
估计大家都会碰到这样的一个问题,因为这个数据几乎都是动态的,xAxis类目轴的类目数很少的时候都能显示出来,就没有必要这样倾斜。那咋办呢?这的确有点尴尬,似乎好像没有解决的方法,真的有点尴尬,如果你有可以告诉我,谢谢!
作者:张林
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
转载注明出处
echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全,最有效的3种解决方法...相关推荐
- echarts的legend显示不全_Echarts【1、数据过多导致显示不全分页,2、数据展示探讨分析】...
var len=; var dataZoom_end=null; //为空默认100%所以默认显示5个是能显示下的 if(len >5 ){ var dataZoom_end = (5/len) ...
- echarts 饼图标签过多导致显示不全
先看一下缺失效果: 可以看到,紫色和红色的数据是没有显示出来的,这是因为标签过多导致标签重叠了,只要让重叠的标签显示出来就可以了,配置里面加上hideOverlap:false ...series: ...
- Echarts给折线图给横竖坐标轴添加箭头与标签文字过长显示不全处理
本人在做监控数据大屏时曾踩过不少坑,现将踩坑经验总结如下,数据大屏demo请点击这里 一.饼图处理标签文字过长而显示不全的解决方案 在使用echarts的过程中,有时会遇到标签文字过长导致显示不全的问 ...
- Echarts-axislabel文字过长导致显示不全或重叠
先看两张图 按目前情况,官方并为对axislabel的高度或者宽度做调整.所以解决方案只能从其他方案下手 解决方案有几种 第一种为上图解决方案 设置grid属性定义图的大小来释放空间,使得axisla ...
- android opengl版本太低,安卓模拟器opengl_安卓模拟器无法安装“系统opengl版本过低”的通用解决方法_安卓模拟器通用版_通用安卓模拟器...
安卓模拟器无法安装"系统opengl版本过低"的通用解决方法 在安装安卓模拟器时,出现"系统opengl版本过低",下图提示,说明你的显卡暂不支持模拟器: 遇到 ...
- jq实现文字个数限制_js实现文本框输入文字个数限制代码
html: 课程评价 0/5 js: var contentBox = document.getElementById('comment_content'); var max = +document. ...
- 在linux中运行多文件,在Linux中打开了太多文件(Too many open files)的三种解决方法...
回答一. [root@lxadmin nginx]# cat /proc/sys/fs/file-max 8192 文件系统最大可打开文件数 [root@lxadmin nginx]# ulimit ...
- 网页文字无法免费复制的几种解决方法
1.开发人员选项(推荐) 这里以无忧考网的思想汇报为例进行演示(网址),我用的是Microsoft edge浏览器(chromium内核),首先按F12进入开发人员选项(这里也可以直接右键,点检查), ...
- deepin 网速(WIFI)太慢的一种解决方法
Deepin系统是一个非常好用的Linux发行版本,图形化桌面非常美观,还可以通过deepin-wine安装很多windows平台才能安装的软件,非常方便.但是也经常会碰到一些小bug,比如网速慢.这 ...
最新文章
- meson 中调用shell script
- python基于tpot训练模型在获得最佳模型之后对模型进行交叉验证分析并可视化实战
- 突破屏蔽限制,自己的网站使劲弹新IE窗口
- 砂.随笔.三十四.用时间在等待
- 用Unity3D的50个技巧:Unity3D最佳实践
- CentOS通过yum安装高版本gcc
- ASP.NET站点构建之减少不必要的请求
- 2.移植uboot-添加2440单板,并实现NOR、NAND启动
- 每日长难句打卡Day22
- JSP中Session的使用
- 双十一虽过,李宁老师视频课程优惠仍将继续
- 两个Activity左右滑动手势切换
- linux centos8安装nginx_如何在 Fedora 30 Server 上安装 LEMP(Linux、Nginx、MariaDB、PHP)| Linux 中国...
- 【水果识别】基于matlab GUI形态学水果识别(含识别率)【含Matlab源码 907期】
- 基于Helm和Operator的K8S应用管理
- Android之提示Could not find com.android.support:appcompat-v7:25.3.1
- Apple Watch Ultra和Apple Watch Series 8 区别 续航 功能介绍
- matlab中删除照片_matlab中删除对象
- Java(学习笔记三,kk自用)
- JAVA垃圾分类管理系统-含论文基于SSM【数据库设计、毕业设计、源码、开题报告】
热门文章
- scipy csr_matrix csc_matrix
- tornado 异步两种实现形式 通过回调可以利用
- npm install 提示权限不足 Error: EPERM: operation not permitted, unlink XXX
- 智能驾驶开发的几个问题
- 2021年大数据ELK(二十五):添加Elasticsearch数据源
- Python 代理爬取网站数据
- DOM相关内容(课程来源:B站 后盾人)
- android.mk 里面内容介绍
- Android 自定义View ——Matrix (矩阵)
- 如何在Fragment中使用findViewById