echarts的axisLabel的文字内容过长的解决办法

通过查找资料学习,我总结了四种解决的办法,不一定是最好的,但是希望能够帮助到需要的童鞋,同时如果大家有什么更好的方法欢迎指导。

方法一:这种方法就是将文本内容转换为字符串数组,然后再按需求换行,需要每行显示几个字可以自己设置

axisLabel:{
                                interval: 0,
                                //rotate:30,
                                formatter: function(val) {
                                    var strs = val.split(‘‘); //字符串数组
                                    var str = ‘‘
                                    for(var i = 0, s; s = strs[i++];) { //遍历字符串数组
                                        str += s;
                                        if(!(i % 8)) str += ‘\n‘; //按需要求余
                                    }
                                    return str
                                }
                            },

方法二:就是让坐标值的内容旋转一定的角度这样也可以全部显示出来

axisLabel:{
                                interval: 0,//让所有坐标值全部显示
                                rotate:30,//让坐标值旋转一定的角度

}

方法三:这种方法就是将文本内容按一定的长度截取,然后多余的部分用 ... 拼接代替,这个方法的一个缺点就是没办法直观的全部显示文本内容

axisLabel:{
                                interval: 0,
                                //rotate:30,
                                formatter: function (name) {
                                    return (name.length > 8 ? (name.slice(0,8)+"...") : name );
                                },

}

方法四:这个方法和第一个方法类似,看起来比第一个方法复杂,不过能更完善一点

axisLabel : {
                               interval : 0,
                               function(params){
                                var newParamsName = "";// 最终拼接成的字符串
                                var paramsNameNumber = params.length;// 实际标签的个数
                                var provideNumber = 8;// 每行能显示的字的个数
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需要显示几行,向上取整
                                /** 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签 */
                              
                                if (paramsNameNumber > provideNumber) {// 条件等同于rowNumber>1
                                    /** 循环每一行,p表示行 */
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";// 表示每一次截取的字符串
                                        var start = p * provideNumber;// 开始截取的位置
                                        var end = start + provideNumber;// 结束截取的位置
                                        // 此处特殊处理最后一行的索引值
                                        if (p == rowNumber - 1) {
                                            // 最后一次不换行
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            // 每一次拼接字符串并换行
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;// 最终拼成的字符串
                                    }
                            
                                } else {
                                    // 将旧标签的值赋给新标签
                                    newParamsName = params;
                                }
                                //将最终的字符串返回
                                return newParamsName
                            }
           }

一共就这么多了,如果有什么问题希望大家多多指导,希望对大家有帮助。



原文地址:https://www.cnblogs.com/lxl0419/p/9081453.html

时间: 2024-11-07 10:31:03

echarts的axisLabel的文字内容过长的解决办法的相关文章

电力项目七--js控制文字内容过长的显示

当文本框中文字内容过长时,需要调整显示的样式 如上图所示的样式 对应的代码为: <div id="showInfomation" style="visibility: hidden"></div> <tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';

phpcms发布与生成内容页面空白的解决办法

phpcms发布与生成内容页面空白的解决办法 2014/10/14 技术文章评论:暂无评论浏览: 想换个CMS来用,所以新装了几个CMS系统,最后选定了PHPCMS.倒不是因为它非常优秀,而是因帝国的那种标签不太喜欢.顺便提一下,帝国CMS的栏目自定义字段,我觉得很好,如果用来做一个分类性的栏目,分类自身的属性可以自定义字段来实现,像一些游戏网站分区就很方便了.还是转回正题,使用PHPCMS创建好栏目,正要添加内容的时候,这时问题来了,弹出的添加内容页一片空白什么也没有.网上查了一下资料,有说是

录制输入富文本框内容无脚本生成解决办法

录制输入富文本框内容无脚本生成解决办法: 1.将富文本框加入到对象库中 2.编写脚本如下 'Browser("通用呼叫中心后台").Page("通用呼叫中心后台_2").Frame("Frame").WebElement("html tag:=p").Object.innerText="nei5555r" 改行为设置富文本框内容Browser("通用呼叫中心后台").Page("

防止表格被内容撑破的解决办法总结

默认情况下,设定了表格大小,看起来没什么问题,但当表格里装了很多比表格宽度要宽的内容时就会发现表格自然的被撑大了. 第一种情况是表格被英文单词撑破了.解决办法是在表格的属性里设置style="word-wrap:break-word;" 但其实还是有问题.当往表格里装一长串的英文字母时,表格还是会被撑破.这就是第2种情况了解决办法是在表格风格属性里再加一个属性.style="word-wrap:break-word;word-break:break-all;" 但还

【Linux】SSH连接远程主机等待时间很长的解决办法

最近在使用SSH连接远程主机的时候发现在输入SSH命令之后要等很长很长时间才会出现输入密码的提示,而在别人机器上基本都是立即就可以显示输入密码的提示.令我非常不爽.谁叫咱是个急性子呢!所以也不想就这么等着,索性找找解决办法.终于,咱的机器也可以秒连远程主机啦! 解决办法如下: 1.首先找到/etc/ssh/ssh_config文件 2.用vim使用root权限打开该文件并编辑 3.将27行的 #GSSAPIAuthentication no前面的'#'去掉.

【转】ssh登录慢,等待输入密码时间长的解决办法

http://youhuiba.net/2013/06/09/520.html 有时候在ssh远程登录到其他主机上时发现登录时间太长,要等待很久才会出现输入密码的提示,google了一下,发现主要有两个问题会导致ssh登录慢: 1.使用了dns反查,这样的话当ssh某个IP时,系统会试图通过DNS反查相对应的域名,如果DNS中没有这个IP的域名解析,则会等到DNS查询超时才会进行下一步,消耗很长时间.修改方式: vim /etc/ssh/sshd_config 增加一行记录:UseDNS no

SecureRandom生成随机数超慢 导致tomcat启动时间过长的解决办法

用腾讯云的CentOS 7.2 CVM 服务器跑Tomcat时发现,Tomcat启动的特别慢,通过查看日志,发现时间主要花在实例化SecureRandom对象上了. 由该日志可以看出,实例化该对象使用了460秒,导致整个应用启动了480秒之久. 根本原因是SecureRandom 这个jre的工具类的问题. 具体内容:JDK-6521844 : SecureRandom hangs on Linux Systems 那为什么SecureRandom generateSeed这么慢,甚至挂在Lin

Android SDK Manager无法更新,内容显示不全的解决办法

最近在初学android开发,在更新SDK的时候遇到了麻烦. 发现Extras文件夹下为空,没有内容,包括sdk列表也不全面,更新也没有反应 解决方法: 1.在SDK Manager下Tools->Options打开了SDK Manager的Settings a.在"HTTP Proxy Server"和"HTTP Proxy Port"输入框内填入mirrors.neusoft.edu.cn和80(东软的国内镜像,速度很快,腾讯的镜像速度也挺快的.) b.选

报表reportviewer控件使用时,单行文本过长的解决办法

最近在做winform的报表,客户需要把纸质模板可以在系统中打印.一开始设计,认为vs自带控件reportviewer可以解决,但在测试过程中发现:若单行文本过长,报表自动分页,弊端是分页后,第一页文本框底部边框和第二页文本框顶端边框无法显示,由于客户是政府机关,要求严格,只好解决这个问题.在解决过程中也是想各种办法,第一种,判断是否分页,分页后,该文本框是否存在本页,若存在,则在相应分页底部和顶端划线,可是搜索属性框,并没有这些属性值,放弃.第二种,主体加边框,与矩阵重合,矩阵边框不要,使用主