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

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

news 2025/6/29 0:07:16

欢迎点击领取 -《前端开发面试题进阶秘籍》：前端登顶之巅-最全面的前端知识点梳理总结

*分享一个使用比较久的🪜
在这里插入图片描述

一、需求描述分析

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(…函数，进行修改如下：

// 新增处理函数显示内容函数
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({}, {// .....省略源码})
}