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"

相关推荐
!win !3 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
xw53 小时前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝
百思可瑞教育9 小时前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
百思可瑞教育20 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
风早爽太1 天前
在uni-app中使用lottie-web来展示Lottie动画
uni-app
Autumn_yun1 天前
uniapp 实现项目多语言切换
uni-app
懒大王95271 天前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王95271 天前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
百思可瑞教育1 天前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
jingling5551 天前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app