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'
  }]
}
相关推荐
NewChapter °6 小时前
如何通过 Gitee API 上传文件到指定仓库
前端·vue.js·gitee·uni-app
SY_FC8 小时前
uniapp阿里云验证码使用
阿里云·uni-app·notepad++
—Qeyser9 小时前
好看的背景颜色 uniapp+小程序
小程序·uni-app·uniapp·微信小游戏
2501_916008899 小时前
uni-app iOS 日志与崩溃分析全流程 多工具协作的实战指南
android·ios·小程序·https·uni-app·iphone·webview
Dark_programmer9 小时前
钉钉小程序 - - - - - 小程序内打开OA文档链接
小程序·钉钉
weixin_lynhgworld9 小时前
剧本杀APP系统开发:引领娱乐行业新潮流的科技力量
小程序·剧本杀
2501_9159214310 小时前
iOS混淆工具实战 在线教育直播类 App 的课程与互动安全防护
android·安全·ios·小程序·uni-app·iphone·webview
工业互联网专业11 小时前
基于Spark的新冠肺炎疫情实时监控系统_django+spider
python·spark·django·vue·毕业设计·源码·课程设计
叫我阿柒啊11 小时前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
流***陌12 小时前
医疗问诊陪诊小程序:以人性化设计构建健康服务新生态
小程序