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"

相关推荐
浩星10 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
2501_9159184119 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
初出茅庐的21 小时前
uniapp - AI 聊天中的md组件
前端·vue.js·uni-app
于慨1 天前
uniapp用webview导入本地网页,ios端打开页面空白问题
uni-app
于慨1 天前
uniapp云托管前端网页
前端·uni-app
y东施效颦1 天前
uni-app 配置华为离线推送流程
前端·vue.js·uni-app
paopaokaka_luck1 天前
基于SpringBoot+Uniapp球场预约小程序(腾讯地图API、Echarts图形化分析、二维码识别)
spring boot·小程序·uni-app
于慨1 天前
uniapp各端通过webview实现互相通信
uni-app
初出茅庐的2 天前
uniapp - AI 聊天页面布局的实现
前端·vue.js·uni-app