如图所示,当字数超过16个数字后进行换行操作;其中 lenged是根据list 遍历取得name汇总的数组,
list =[
{
"name": "费用报销和成本列支情况,存在长账龄往来款未及时清理的情况。",
"value": 1
},
{
"name": "费用报销和成本列支情况",
"value": 1
}
];const legend = data.map(item => item.name);
其中lenged过多设置页码,如何所示
其中textStyle中是对最后显示在图表上的文字样式,如图所示:(其中name,value)添加的样式在第一张图黄框中有提示
整体代码如图所示
legend: [{
x: '53%',
y: 'center',
orient: 'vertical',
icon: 'square',
itemWidth: 8,
itemHeight: 8,
type: 'scroll', //legend要多,进行分页处理
pageIconColor:'#c2c2c2',
pageIconInactiveColor : '#1175ec',
pageIconSize : 10,
textStyle: {
align: 'left',
verticalAlign: 'middle',
rich: {
name: {
color: '#303133',
fontSize: 12,
},
value: {
color: '#6d6d6d',
fontWeight: 'bold',
fontSize: 12,
},
rate: {
color: '#1175ec',
fontSize: 12,
},
},
},
data: legend,
formatter: function (name) {
let newParamsName = "";// 最终拼接成的字符串
const paramsNameNumber = name.length;// 实际标签的个数
const provideNumber = 16;// 每行能显示的字的个数
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需要显示几行,向上取整
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = "";// 表示每一次截取的字符串
const start = p * provideNumber;// 开始截取的位置
const end = start + provideNumber;// 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = name.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = name.substring(start, end) + "\n";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = name;
}
const item = data.filter((item) => item.name === name)[0];
return `{name|${newParamsName}:}{value|${item.value}}`;
},
},