Preface
Use of tree diagrams. Official documentation
text
Solve the problem of incomplete display of root node labels
The initial series->margins are set as follows. So the label of the root node is only displayed more than half.
top: "1%",
left: "7%",
bottom: "1%",
right: "20%",
Later modified to
top: "1%",
left: "15%",
bottom: "1%",
right: "15%",
It will be displayed completely.
The effect is as follows:
The same applies if it is blocked in other directions. Just modify the width of the top, bottom, left, and right.
Solve the problem that the node text is too long
Method 1: Constrain series->label->widththe width of the property, set series->label->overflowthe property to 'break' [From Reference 1]: There are provided effects and codes, you can refer to the use
Disadvantages: If the border and background color are used, the above method will affect others due to the fixed width Shorter text. (So if you don’t need to use borders + background colors, this method is simple and convenient)
Method 2: Modify series->labeland use formatter to process the content.
Effect:
label: {
position: "left",
verticalAlign: "middle",
align: "right",
fontSize: 12,
color: "#FFFFFF",
backgroundColor: "#525252",
borderColor: "#777777",
borderWidth: 1,
borderType: "solid",
formatter: function (params) {
var text = params.name;
var len = text.length;
var lines = [];
var line = "";
var width = 0;
for (var i = 0; i < len; i++) {
var char = text.charAt(i);
var charWidth = /[^\x00-\xff]/.test(char) ? 12 : 6; // 判断字符是否是中文字符
var lineWidth = width + charWidth;
if (lineWidth > 180) {
lines.push(line);
line = "";
width = 0;
}
line += char;
width += charWidth;
}
lines.push(line);
var wrapText = lines.join("\n");
return "{wrap|" + wrapText + "}";
},
rich: {
wrap: {
padding: [4, 4, 4, 4],
width: "auto", // 自适应宽度
overflow: "break",
// textOverflow: "ellipsis",
},
},
},
The main idea is: judge based on the size of the font and the number of words. If it exceeds 180 (maximum width), manually add a line break. The width of Chinese characters is 12px (font size), and the width of other characters is 6px (half)
It seems that ps.formatter can only change the content of the label. I originally wanted to dynamically modify the width + using method 1, but it didn't work.
Containers are highly customizable
When there are too many nodes in the ECharts tree, you don’t want to zoom. Adjust the height (width) of the container : with a picture effect diagram, and also explain the principle.
Too many nodes in the echarts tree diagram cause the nodes to overlap. How to adjust : the method used in vue. The idea is actually the same as the previous one.