echarts x轴文字显示不全(解决方案)
echarts x轴标签文字过多导致显示不全
解决办法1:xAxis.axisLabel 属性
- axisLabel: {interval:0,rotate:40 }
以上就可解决x轴文字显示不全并将文字倾斜。如图:
稍微解释一下
可以设置为0强制显示所有标签,如果设置为1,表示隔一个标签显示一个标签,如果为3,表示隔3个标签显示一个标签,以此类推
问题又来了,这个名称x轴的文字如果太长会受到遮挡,还是显示不全,这个时候可以用grid属性解决
解决办法2:调用formatter文字竖直显示
axisLabel: {
interval: 0,
formatter:function(value){
- debuggervar 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 {return value;}}}
效果如图
解决办法3:X轴类目项隔一个换行(使用formatter中index参数)
- axisLabel: {
- interval: 0,
- formatter:function(value,index) {
- debugger
- if (index % 2 != 0) {
- return '\n\n' + value;
- }else {
- return value;
- }
- }}
这种做法是我比较推荐的一种。以上几种方法基本上能解决问题,但是都不是很完美。
echarts x轴文字显示不全(解决方案)的更多相关文章
- [置顶]
echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts x轴文字显示不全解决办法
标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694
- echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)
出处:http://blog.csdn.net/kebi007/article/details/68488694
- echarts Y轴名称显示不全(转载)
转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- matplotlib y轴标注显示不全以及subplot调整的问题
matplotlib y轴标注显示不全以及subplot调整的问题 问题: 我想在y轴显示的标注太长,想把它变成两行显示,发现生成的图形只显示的第二行的字,把第一行的字挤出去了 想要的是显示两行这样子 ...
- Cell 动态行高文字显示不全问题探索
目录 问题概述 一.新建工程 二.尝试复现问题 尝试解决 修改contentLblBtmCon优先级为High(750) 修改contentLblBtmCon优先级为Low(250) 小结 其他解决思 ...
- echarts x轴坐标文字显示不全
在echarts中应用柱状图或者折线图时,当数据量过多的时候,X轴的坐标就会显示不全(如下图图一),在ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻 ...
- 百度echarts插件x轴坐标显示不全决解方法
X轴显示不全: xAxis.axisLabel.interval number, Function [ default: 'auto' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不 ...
随机推荐
- 使用actioncable做的notification(GoRails教学,2课)
GoRails视频系列: 1. 用actioncable建立Notifications 2. 见博客: 3. 非认证/登陆user不能使用actioncable 用ActionCable 建立 ...
- express 调优的一个过程和心得,不错的文章
Netflix的软件工程师Yunong Xiao最近在公司的技术博客上写了一篇文章,分析了他所在的团队在将Netflix网站UI转移到Node.js上时遇到的延迟问题.在文章中他描述了找到问题根本原因 ...
- uva11551矩阵快速幂
题目看了半天没看懂,,就是把一个数列更新r次,每次更新就是计算和,就是每一个数,只要出现了的表号都要加上去,具体看代码 矩阵快速幂实现加速 #include<map> #include&l ...
- 数论练习(5)——青蛙的约会(扩gcd)
青蛙的约会 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 122502 Accepted: 26015 Descript ...
- MyBatis Generator去掉生成的注解
是不是很讨厌mybatis Generator帮我们生成代码的时候在Mapper和mapper.xml文件中生成的一大堆注解?今天在看MyBatis Generator代码的时候发现,原来mybati ...
- Powerdesigner颜色设置
Powerdesigner颜色设置
- STM32知识点纪要
1.GPIO BSRR(端口位设置寄存器)是赋1相应IO拉高,赋0无影响 BRR(端口位清除寄存器)是是赋1相应IO拉低,赋0无影响 2.UART 连线TX—TX,RX—RX 3.JTAG和SWD接口 ...
- hrbust 1621 迷宫问题II 广搜
题目链接:http://acm.hrbust.edu.cn/vj/index.php?/vj/index.php?c=&c=contest-contest&cid=134#proble ...
- Python+Flask+MysqL的web建设技术过程
一.前言(个人学期总结) 个人总结一下这学期对于Python+Flask+MysqL的web建设技术过程的学习体会,Flask小辣椒框架相对于其他框架而言,更加稳定,不会有莫名其妙的错误,容错性强,运 ...
- kmp&扩展kmp
kmp: KMP的主要目的是求B是不是A的子串,以及若是,B在A中所有出现的位置 写的很详细的大佬的博客:http://www.matrix67.com/blog/archives/115 模板: / ...