在使用echarts的过程中,有时会遇到标签文字过长导致显示不完整的问题,可能需要换行显示,需要用到标签里的formatter回调函数来解决问题。
代码如下:
// 正常情况写的是这种形式
formatter: '{a|{b}:}\n{b|{d}%}',
// 标签文字换行,则需要写成函数形式
// 可以将函数写在外面,好看点
formatter: function (params) {
// 业务的标签文字是英文单词字符串,所以根据空格进行切割
var newParamsName = '';
var paramsName = params.name.split(' ')
for (var p = 0; p < paramsName.length; p++) {
var tempStr = '';
if (p === paramsName.length - 1) {
tempStr = paramsName[p];
} else {
tempStr = paramsName[p] + '\n';
}
newParamsName += tempStr;
}
// 根据业务需求,返回对应的格式
return '{a|' + newParamsName + '}' + '\n' + '{b|' + params.percent + '%' + '}'
},
// 对应样式
rich: {
a: {
fontFamily: 'Verdana',
fontStyle: 'normal',
fontWeight: 'normal',
color: "#fff",
lineHeight: 24,
fontSize: 16,
align: 'center'
},
b: {
fontFamily: 'Verdana',
fontStyle: 'normal',
color: "#fff",
fontSize: 20,
fontWeight: 'bold',
lineHeight: 24,
align: 'center'
}
}
返回的形式为什么要写成这样?
return '{a|' + newParamsName + '}' + '\n' + '{b|' + params.percent + '%' + '}'
因为写成函数后,如果直接写成这样
// params.percent 百分比数值
return newParamsName + '\n' + params.percent + '%';
会导致rich里面的 a、b、c、d样式样式失效,不能改变形式文字的形式。
如果标签文字是汉字,则可以用如下函数形式:
formatter: function(params) {
// 将标签文字按照适当的位置进行换行
var newParamsName = '';
var paramsNameNumber = params.name.length;
var provideNumber = 6; // 每行能显示的字的个数
// 根据每行能显示的字数,计算出标签文字需要换行的次数
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.name.substring(start, paramsNameNumber);
} else {
tempStr = params.name.substring(start, end) + '\n';
}
newParamsName += tempStr;
}
} else {
newParamsName = params.name;
}
// 返回的格式,根据具体的业务需求确定
return newParamsName;
},