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'
  }]
}
相关推荐
大大。1 小时前
wepy微信小程序自定义底部弹出框功能,显示与隐藏效果(淡入淡出,滑入滑出)
微信小程序·小程序·notepad++
BBbila2 小时前
小程序主包方法迁移到分包-调用策略
开发语言·javascript·微信小程序
寒寒_3 小时前
uni-app App 端分段导出 JSON 数据为文件
uni-app
一只程序熊3 小时前
Uniapp 字体加载问题(文件本地存储)
uni-app
紫琪软件工作室3 小时前
ElementUI 级联选择器el-cascader启用选择任意一级选项,选中后关闭下拉框
前端·elementui·vue
说私域4 小时前
定制开发开源 AI 智能名片 S2B2C 商城小程序源码在小程序直播营销中的应用与价值
微信小程序·开源·php·零售
星月昭铭5 小时前
uni-app打包h5并部署到nginx,路由模式history
nginx·uni-app
HAPPY酷8 小时前
微信开发者工具内建终端使用不了npm,但是cmd可以
微信小程序·小程序·npm
aristo_boyunv8 小时前
VUE的脚手架搭建&引入类库
vue
源码code11 小时前
微信小程序校园跑腿的设计与实现【lw+源码+部署+视频+讲解】
小程序