echart x轴 倾斜,Echarts x轴字体倾斜
民谣太穷了,一听就是一根烟,一听就是一瓶酒。而我只有一根烟了,还要撑一夜,只剩一点爱了,还要过一生。
前端QQ群: 981668406
在此附上我的QQ: 2489757828 有问题的话可以一同探讨
我的github: 李大玄
我的私人博客: 李大玄
我的简书: 李大玄
我的CSDN: 李大玄
echarts x轴标签文字过多导致显示不全
在这里插入图片描述
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) {
return value.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 {
return value;
}
}
}
效果如图
在这里插入图片描述
解决办法3:X轴类目项隔一个换行(使用formatter中index参数)
都是上面的第二种方法是利用formatter中的value参数实现了文字拼接\n换行的,但是index参数并没有使用,现在我们就一起来使用这两个参数实现隔一个类目项换行。
效果如图:
在这里插入图片描述
代码比较简单:
axisLabel: {
interval: 0,
formatter:function(value,index) {
if (index % 2 != 0) {
return ’\n\n’ + value;
}
else {
return value;
}
}
}
echart x轴 倾斜,Echarts x轴字体倾斜相关推荐
- html折线图怎么控制y轴数值,echarts Y轴数据类型不同怎么让折线图显示差距不大...
for(var j in this.initVal) { legendData.push(this.initVal[j]);var i = 0;var newSeriesData =[];//遍历店铺 ...
- css字体倾斜角度_css怎么设置倾斜的字体样式?(代码详解)
css怎么设置倾斜的字体样式?本篇文章就给大家介绍用css设置倾斜字体样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们要知道在css中设置对象内字体倾斜常常是使用 ...
- Echarts柱状纵向横向、圆角、渐变、x轴字体倾斜或垂直显示
1.柱状纵向变横向 将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 //纵向xAxis: [{type: 'value'}],yAxis: [{ ...
- Echarts x轴字体倾斜
echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...
- echarts x轴文字个数太多_echarts x轴标签文字过多导致显示不全,最有效的3种解决方法...
echarts x轴标签文字过多导致显示不全,只是我之前在csdn发表过,经过实践,效果不错! 如图: 办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用 ...
- echarts x轴加箭头,ECharts X轴(xAxis)
xAxis: { show: true, // 是否显示 x 轴 position: 'top', // x 轴的位置('top','bottom') type: 'category', // 坐标轴 ...
- echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
- ECharts y轴(yAxis)
yAxis: {show: true, // 是否显示 y 轴position: 'top', // y 轴的位置('top','bottom') type: 'category', // 坐标轴类型 ...
- ECharts X 轴标签过长导致文字重叠的 4 种解决方案
目录 方法一:Echarts X 轴 标签倾斜摆放 方法二:Echarts X 轴 限制每行字数,换行显示 方法三:Echarts X 轴 垂直竖显文字 方法四:Echarts X 轴 隔行显示 使用 ...
最新文章
- 某程序员哀叹:连续帮三任女朋友进360,京东等互联网大厂,进去后却都惨遭分手!...
- jQuery 要点总结
- [Java,MVC] Eclipse下搭建Spring MVC
- 分享自己的C#开发类库
- JZOJ 5643. 【NOI2018模拟4.10】最小代价
- 2016.07.17-18 集合方法
- python爬虫实训心得_Python爬虫小结
- Super Jumping! Jumping! Jumping!
- ARC077E - guruguru(差分)
- python脚本编程100例_python100例,python经典例题
- matlab 细化函数,MATLAB图像处理工具箱函数(细化篇).doc
- 从 Amazon Graviton3 发布,看 2022 云计算的核心方向
- js跨域 jsop 使用
- 编译OpenJDK8-u332:/bin/sh: 1: [: -a: unexpected operator/line 0: [: too many arguments
- visio画图复制粘贴到word_怎么将visio绘图导入Word(visio绘图插入word后如何调整大小)...
- 【盘点】imx6的应用
- java 四级联动_使用js实现四级联动
- java实现网络下载进度_Retrofit+Rxjava下载文件进度的实现
- matlab 判断 正态分布,用MATLAB判断一组数据是否符合正态分布
- 华东交通大学计算机调剂,【通知】华东交通大学2020年硕士研究生调剂通知