文字换行显示:
xAxis: { // x轴文字配置 axisLabel: { interval: 0, // 文字换行 formatter: function (value) { let res = ""; // 拼接加\n返回的类目项 let maxLength = 1; // 每项显示文字个数 数字设置几,就一行显示几个文字 let valLength = value.length; // X轴上的文字个数 let rowN = Math.ceil(valLength / maxLength); // 需要换行的行数 // 换行的行数大于1, if (rowN > 1) { for (let i = 0; i < rowN; i++) { let temp = ""; //每次截取的字符串 let start = i * maxLength; //开始截取的位置 let end = start + maxLength; //结束截取的位置 temp = value.substring(start, end) + "\n"; res += temp; //拼接字符串 } return res; } else { return value; } }, }, },
文字倾斜显示:rotate
xAxis: { // x轴文字配置 axisLabel: { interval: 0, // 设置文字倾斜显示 rotate: -60, color: "#fff", // 默认x轴字体大小 fontSize: 12, // margin:文字到x轴的距离 margin: 5, }, },
效果展示:
文字显示省略号:
xAxis: { // x轴文字配置 axisLabel: { interval: 0, formatter: function (value) { // 当文字长度大于2时,使用slice方法截取字符串并拼接省略号;否则直接返回原文字 if (value.length > 2) { return `${value.slice(0, 2)}...`; } else { return value; } }, }, },
效果展示: