Echarts 标签中文本内容太长的时候怎么办 ?
- 1对文本进行倾斜
在xAxis.axisLabe中修改rotate的值
xAxis: {
data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"], name:"123", nameLocation:'end', axisLabel : { interval:0, rotate:"45" }
},
interval
坐标轴刻度标签的显示间隔(在类目轴中有效哦),默认会采用标签不重叠的方式显示标签(也就是默认会将部分文字显示不全)
可以设置为0强制显示所有标签,如果设置为1,表示隔一个标签显示一个标签,如果为3,表示隔3个标签显示一个标签,以此类推
一开始我没设置 因为标签文本过长的原因他就自动不显示全部
被遮挡住就让grid 组件离容器向上移动 把grid中的bottom的值调大一些
grid: show:true left:"20%" right:"30px",
borderColor:"#c45455" bottom:"20%" },
- 2.换行显示
在xAxis.axisLabel中 使用formatter回调函数实现换行
axisLabel : { formatter : function(params){ var newParamsName = ""; var paramsNameNumber = params.length; var provideNumber = 4; var rowNumber = Math.ceil(paramsNameNumber / provideNumber); /**
* 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
*/ if (paramsNameNumber > provideNumber) { /** 循环每一行,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
}
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
3.文字竖直显示
同样和换行一个道理,只是这个是单个文字换行
在xAxis.axisLabel中 使用formatter回调函数实现换行
axisLabel: { interval: 0,
formatter:function(value) {
return value.split("").join("\n"); } }
-
4.隔一个换行
在xAxis.axisLabel中 使用formatter回调函数实现换行
axisLabel : { clickable:true, interval : 0,
formatter : function(params,index){ if (index % 2 != 0) { return '\n\n' + params;
} else { return params;
}
}
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务