当前位置: 首页 > news >正文

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"

相关文章:

  • 基于Python脚本实现Flink on YARN任务批量触发Savepoint的实践指南
  • consul服务注册与发现(go)-学习笔记
  • aspx目录扫描字典
  • 优选算法系列(6. BFS 解决 FloodFill 算法)
  • Ensemble of differential evolution variants(EDEV)
  • 6.综合练习1-创建文件
  • 三轴云台之姿态测量系统篇
  • 10-python面向对象(上)
  • 汽车电子笔记之:基于Tasking编译器怎么制作库文件并将库文件集成进工程释放
  • 内容中台的数字化管理核心是什么?
  • `ConstantPositionProperty` 的使用与应用
  • 汇丰xxx
  • Java学习笔记(多线程):ReentrantLock 源码分析
  • java基础 可拆分迭代器 Spliterator<T>
  • 行星际空间的磁流体动力激波:理论综述
  • 深圳市杉川机器人Verify入职测评SHL题库真题考什么?
  • 蓝桥20250-字符串拼接
  • 爱普生RTC模块RA8804CE在ADAS域控制器的应用
  • ES:账号、索引、ILM
  • Android XML布局与Compose组件对照手册