在 ECharts 中,可以通过设置节点的 label 属性来控制节点文字的显示方式。如果节点文字太长,可以通过设置 formatter 函数来对文字进行换行。具体步骤如下:
1.在 option 中找到树图的节点配置,例如:
series: [{
type: 'tree',
data: [...],
label: {
show: true,
position: 'insideRight',
verticalAlign: 'middle',
align: 'left'
},
...
}]
2.在 label 中添加 formatter 属性,该属性需要传入一个函数,用于格式化节点文字。例如:
label: {
show: true,
position: 'insideRight',
verticalAlign: 'middle',
align: 'left',
formatter: function(params) {
var text = params.name;
var length = text.length;
var lineHeight = 16; // 每行的高度
var maxLineLength = 10; // 每行最多显示的字符数
var lineCount = Math.ceil(length / maxLineLength); // 计算需要几行
var lines = [];
for (var i = 0; i < lineCount; i++) {
var line = text.substr(i * maxLineLength, maxLineLength);
lines.push(line);
}
return lines.join('\n');
}
},
3.在 formatter 函数中,计算节点文字需要显示的行数,然后将文字按照每行最多显示的字符数进行拆分,最后使用 \n 来拼接成多行文字。
通过以上方式,可以实现树图节点文字的换行。需要注意的是,根据节点的不同层级,可能需要调整 maxLineLength 和 lineHeight 的值来适应不同的节点。