uniapp使用ucharts修改Y、X轴标题超出换行

找到ucharts里面的u-charts.js。

Y轴的话找到drawYAxis方法。然后找到方法里面绘制文字的context.fillText方法。先把这个代码注释掉，然后加上下面代码

let labelLines = item.split('\n');
let currentY = pos + yAxisFontSize / 2 - 3 * opts.pix;
labelLines.forEach((line, index) => {// 绘制每一行标签context.fillText(String(line), tmpstrat, currentY);// 更新y坐标，实现换行效果currentY += yAxisFontSize + (yAxisFontSize / 2 - 5);
});
// context.fillText(String(item), tmpstrat, pos + yAxisFontSize / 2 - 3 * opts.pix);

X轴的话找到drawXAxis方法。修改方法跟Y轴一致。

然后找到calYAxisData方法。搜索找到下面代码的位置

rangesFormatArr[i] = rangesArr[i].map(function(items,index) {

然后把这个代码修改成下面这样

rangesFormatArr[i] = rangesArr[i].map(function(items,index) {items = yData.formatter(items,index,opts);// 如果文字过长，只保留5个字符。其他进行换行处理let font5 = items;if(font5.length >5){font5 = font5.slice(0,5);}yAxisWidthArr[i].width = Math.max(yAxisWidthArr[i].width, measureText(font5, yAxisFontSizes, context) + 5);return items;
});

找到ucharts里面的config-ucharts.js。找到formatter参数。里面添加下面这段代码

"yAxisDemo3":function(val, index, opts){let result = '';for (let i = 0; i < val.length; i++) {result += val[i];if (i > 0 && (i+1) % 5 === 0) {result += '\n';}}return result;
}

上面就是修改ucharts源码信息。

然后引用的话，直接在opts里面的yAxis进行添加即可。

yAxis: {data:[{type:'categories',format:'yAxisDemo3'}]
}