一、原因:
在使用echarts图表时x、y轴会遇到文字太长(对于这种情况echarts会自动换行)导致容器面积被挤压的情况,如下图所示:
因此,为了使字不自动换行,容器面积不被挤压,可以手动控制每行的字数下面封装了一个方法
二、解决
封装方法创建一个utils.js文件内容如下:
/**
* 用于对每行字数限制
* @param {*} words 文本
* @param {*} num 每行可展示的字数
* @param {*} did 换行符
*/
export function breakWords(words = '', num, did = '\n') {
let str = '';
let len = words.length;
for (let i = 1; i <= len; i++) {
str += words[i - 1];
if (i % num === 0 && i !== len) {
str += did;
}
}
return str;
}
在图表文件中引入该方法:
import { breakWords } from '@/utils';
xAxis: {
type: 'category',
data: [],
axisLine: {
// 轴线设置
show: true, // 显示轴线
lineStyle: {
// 轴线样式设置
color: '#95C7FF', // 轴线颜色
width: 1, // 轴线宽度
},
},
axisLabel: {
interval: 0,
color: '#fff',
fontSize: 12,
formatter: function (value) {
return breakWords(value, 3);
},
},
boundaryGap: true,
}