ucharts自定义添加tooltip悬浮框显示项内容且换行

《前端开发面试题进阶秘籍》：前端登顶-前端知识点梳理

一、需求描述分析

1、小程序上实现图表的绘制，多条线路，不同颜色，悬浮框对应内容不同数据进行处理
2、技术框架：uni-app vue3脚手架创建，引入组件ucharts相关文件；

3、折线图tooltip点击的返回值：item, category, index, opts中没有想要展示的数据信息；想添加其他内容，就需要自己添加额外的信息用于展示，于是需要修改源码，使其可以在外部定义的而不是按需在源码内处理；像echarts一样进行外部处理

效果示意图：

二、针对源码进行改动，分两种不同情况：修改路径

1、路径一：使用uniapp官网工具开发，位置：uni_modules\qiun-data-charts\js_sdk\config-ucharts.js
2、路径二：本篇脚手架创建自定义框架项目，位置：src/components/u-charts.js
3、在上述文件中找到 function drawToolTip(…函数，进行修改如下：

// 依据项目自定义x轴显示文案，本项目是针对日期做处理MM-DD,否则显示原有
function processedData (item) {
  const text = item?.text;
  const newTextArr = item?.text?.split(' ');
  const regExgs = /(?<date>\d{2,4}-\d{2}(?:-\d{2})?(?: \d{2}:\d{2}(?::\d{2})?)?)\s(?<content>.*)/;
  const match = text?.match(regExgs);
  if (match) {
    const date = match[1];
    const content = match[2]
    return { date, content };
  }
  return { date: newTextArr?.[0] || '', content: newTextArr?.[1] || '' };
};

// 新增处理函数显示内容函数
function formatText(item, tooltip) {
  const { content } = processedData(item)
  const [label, value] = content?.split(':')
  let formattedText = label + '：';
  if (tooltip?.formatter) {
    formattedText += tooltip?.formatter(value, item) // 通过回调在外部自定义处理显示
  } else {
    formattedText += value; // 默认
  }
  return { ...item, text: formattedText };
}

// 源码 drawToolTip处理,label和value
function drawToolTip(textList, offset, opts, config, context, eachSpacing, xAxisPoints) {
  const { extra: { tooltip } } = opts || {} // 获取拓展的tooltip内容属性
  const { date } = processedData(textList?.[0]) || {} // 对应x轴坐标值，并去掉默认角标
  const newTextList = textList.map(item => formatText(item, tooltip)) // 处理自定义内容值
  const resList = [{ color: null, text: date}, ...newTextList]; // 重新生成最新的内容
  textList = JSON.parse(JSON.stringify(resList));
  var toolTipOption = assign({}, {
	// .....省略源码
	})
}

三、使用：自定义在外部动态修改：对应内容的值

四、总结：

1、不建议：网上的文章很多，大部分的处理方式依旧是依赖原官网提供的tooltipFormat方法进行一个个处理，从而失去灵活性和动态性

2、而本篇文章其实新增的代码量并不多，举一反三，使其更加灵活，而不是层层修改源码去依赖业务的变动而变动；