echart纵坐标标签特别长换行显示
纵坐标
yAxis : [
{
type : 'category',
data : name,
axisLabel: { //坐标轴刻度标签的相关设置。
textStyle: {
color: '#000',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
},
interval : 0,
formatter : function(params){
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 38;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
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
}
},
}
]
效果图:

echart纵坐标标签特别长换行显示的更多相关文章
- python入门2 python字符串换行显示、字符串太长\连接多行
#coding:utf-8 #/usr/bin/python """ 2018-11-03 dinghanhua 缩进 换行 """ &qu ...
- python入门 python字符串换行显示、字符串太长\连接多行
#coding:utf-8#/usr/bin/python"""2018-11-03dinghanhua缩进换行""" "&quo ...
- highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明
在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...
- 关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结
关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结 <dl> <dt>抵押房产:</dt> <dd>1.北京市大兴区兴华大街丽园小区3单大兴 ...
- echarts 纵坐标数字太长显示补全,以及文字倾斜显示
如上数字太长,显示补全,以及x坐标的月份当数量大的时候也会显示补全: x可以调节纵坐标label的宽度 y2可以调节横坐标label的高度 grid: { x: 100, //默认是80px y: 6 ...
- chrome和Firefox对p标签中单词换行的渲染(强制换行)
谷歌和火狐对p标签单词的渲染: 今天在p标签展示url链接中,由于有几个下划线拼接的单词特别长, 所以总有那么几行老是超出p标签的范围,然后设置了强制 换行,才得以解决. word-wrap : br ...
- Echarts-axislabel文字过长导致显示不全或重叠
先看两张图 按目前情况,官方并为对axislabel的高度或者宽度做调整.所以解决方案只能从其他方案下手 解决方案有几种 第一种为上图解决方案 设置grid属性定义图的大小来释放空间,使得axisla ...
- <q>标签,短文本引用;<blockquote>标签,长文本引用
<q>标签,短文本引用 <q>引用文本</q>,默认显示双引号,不需要在文本中添加 <blockquote>标签,长文本引用 浏览器对<block ...
- echarts x轴标签文字过多导致显示不全
原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...
随机推荐
- 搭建`wenblogic`执行`install`脚本失败
搭建weblogic服务,前期准备都已经完成,安装包都是已上传,执行install_wls1213.sh脚本,出现以下报错: install_wls1213.sh: line 1: rectory: ...
- python与php生成二维码对比
php生成二维码 include 引入的库单独下载 <?php header("Content-type:text/html;charset=utf-8"); error_r ...
- MySQL笔记4------面试问题
1.链接1:https://blog.csdn.net/derrantcm/article/details/51533885. 链接2:https://blog.csdn.net/derrantcm/ ...
- 训练1-P
一个矩形的面积为S,已知该矩形的边长都是整数,求所有满足条件的矩形中,周长的最小值. 例如:S = 24,那么有{1 24} {2 12} {3 8} {4 6}这4种矩形,其中{4 6}的周长最小, ...
- 使用 Laravel 5.5+ 更好的来实现 404 响应
译文首发于 使用 Laravel 5.5+ 更好的来实现 404 响应,转载请注明出处! Laravel 5.5.10 封装了两个有用的路由器方法,可以帮助我们为用户提供更好的 404 页面.现在,当 ...
- oracle 创建自增主键
1.创建表 create table Test_Increase( userid number(10) NOT NULL primary key, /*主键,自动增加*/ username varch ...
- 【codeforces 724E】Goods transportation
[题目链接]:http://codeforces.com/problemset/problem/724/E [题意] 有n个城市; 这个些城市每个城市有pi单位的物品; 然后已知每个城市能卖掉si单位 ...
- LightOJ1214 Large Division
/* LightOJ1214 Large Division http://lightoj.com/login_main.php?url=volume_showproblem.php?problem=1 ...
- webuploader 教程
1.引入js和css <!-- Web Uploader --> <link rel="stylesheet" type="text/css" ...
- etymology-R
1)vor = to eat devour vt. 狼吞虎咽地吃光: 吞没,毁灭: 目不转睛地看[de-向下+vour-吃] voracity n.贪食,贪婪.拉丁词根vor-,vorac-表示吞食 ...