uni-app ucharts自定义换行tooltips

实现效果:

第一步:在uni_modules文件夹下找到config-ucharts.js和u-charts.js文件

第二步:在config-ucharts.js文件中配置换行格式

复制代码
// 换行格式
	"wrapTooltip":function(item, category, index, opts){
		return item.name+':'+item.data
	},

第三步:在u-charts.js文件中找到getToolTipData函数,修改换行文本

复制代码
var wrapTitleText = null;
  var textList = seriesData.map(function(item) {
    let titleText = null;
    if (opts.categories && opts.categories.length>0) {
      titleText = categories[index];
    };
	wrapTitleText = titleText;
    return {
      text: option.formatter ? option.formatter(item, titleText, index, opts) : item.name + ': ' + item.data,
      color: item.color,
      legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
    };
  });
  textList.unshift({text:wrapTitleText,color:null})
  var offset = {
    x: Math.round(points.x),
    y: Math.round(points.y)
  };
  // console.log("文本"+JSON.stringify(textList))
  return {
    textList: textList,
    offset: offset
  };

第五步:在图表页面引入提示框格式,tooltipFormat="wrapTooltip"

相关推荐
today喝咖啡了吗3 小时前
uniapp,Anroid10+版本如何保存图片并删除
uni-app
为风而战5 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
雪碧聊技术9 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
@Dream_Chaser9 小时前
uniapp页面间通信
uni-app
@Dream_Chaser14 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
鱼是一只鱼啊14 小时前
uniapp移动端地图提示鉴权失败请传入正确的key问题处理
uni-app
毛毛三由14 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
雪碧聊技术16 小时前
uniapp简介
uni-app·hbuilder
一只一只妖16 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
y东施效颦20 小时前
uni-app uni-push 2.0推送图标不展示问题
uni-app·github