labelformatter（echart的label标签文字过长显示不全怎么办）
本文目录
echart的label标签文字过长显示不全怎么办
echart的官方只提供label标签文字过长是斜着显示的方式，并且文字显示不全重叠等现象。那么只能自己的方式来实现。
option = {
title : {
text: ’世界人口总量’,
subtext: ’数据来自网络’
},
tooltip : {
trigger: ’axis’
},
legend: {
data:[’2011年’, ’2012年’]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType: {show: true, type: [’line’, ’bar’]},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : ’value’,
boundaryGap : [0, 0.01]
}
],
grid: { // 控制图的大小，调整下面这些值就可以，
x: 400,//x的值可以空值y轴与label标签的距离，效果如下图：
x2: 100,
y2: 50,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
},
yAxis : [
{
type : ’category’,
data : [’巴西闪亮的空间粉丝的房间里睡觉法律手段尚福林时间浪费时间f’
,’印尼三家公司的房间里睡上了飞机哦我i金佛我i额酸辣粉鸡尾酒佛问’
,’美国’,’印度’,’中国’],
axisLabel:{
interval: 0,//标签设置为全部显示
formatter:function(params){
var newParamsName = ““;// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 20;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber》1
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
}
}
}
],
series : [
{
name:’2011年’,
type:’bar’,
data:[18203, 23489, 29034, 104970, 131744]
},
{
name:’2012年’,
type:’bar’,
data:[19325, 23438, 31000, 121594, 134141]
}
]
};
echarts label太长
Introduce
许多人使用百度的echarts.js时候会出现数据名太长覆盖的情况，newline-echarts.js能够很好解决这种换行问题
Usage
newline(option, 6, ’yAxis’)
参数一：是你的option
参数二：是多少个字就换行
参数三：是x轴还是y轴 可选项 ’yAxis’ OR ’xAxis’
Example
var chart = echarts.init(document.getElementById(“main“));
《script src=“js/echarts.js“》《/script》
var option =
{
# your options
}
option = newline(option, 6, ’yAxis’)
chart.setOption(option)
本文相关文章：
怎么办脱口秀（《怎么办脱口秀专场》这部综艺有哪些创新点你喜欢这部综艺吗）
2026年9月26日 06:10
自己开网店没有货源怎么办（想创业做电商开网店，但是没有货源，也不会运营，怎么办）
2026年9月25日 05:30
2026年9月23日 11:10
2026年9月16日 07:10
网站一年了百度不收录（网站seo优化了很久，却一直没有被百度收录，怎么办）
2026年8月31日 01:40
2026年8月26日 10:20
2026年8月20日 09:00
2026年8月10日 19:00
大庆油田app下载安装（大庆油田工会app3.0下载不了怎么办）
2026年7月21日 09:40
怎么办脱口秀（《怎么办！脱口秀专场》杨幂讲警察父亲，这个综艺都有谁参加）
2026年7月19日 07:10
更多文章：
2026年10月11日 00:20
2026年10月11日 00:10
maven配置idea（如何在idea中用maven配置spark和scala）
2026年10月10日 22:50
详情页模板免费网站有哪些（我是一名淘宝美工，要做一个宝贝详情页，去什么网站能找到比较好的素材）
2026年10月10日 22:30
2026年10月10日 22:20
关于C语言中长整型数？C语言中无符号长整型数的输入输出格式是什么
2026年10月10日 21:00
2026年10月10日 20:40
中易广告联盟系统（中易广告联盟程序怎么添加右下角漂浮点击类广告）
2026年10月10日 20:10
2026年10月10日 19:30
java中foreach用法（关于java中c标签foreach的用法）
2026年10月10日 19:20
