素材编辑 | 宋大狮
排版运营 | 小唐狮
ONE 问题描述
今天要和大家分享的是关于uni的问题，如何在ucharts提示窗中自定义内容，包括更改内容、内容换行、更改竖杠颜色。
需求： 在ucharts图表中，点击图表某一坐标，会以提示框的形式显示此坐标点的信息，并且自定义提示框中内容的格式。
问题： 自定义提示框中内容的格式时，提示窗配置 opts.extra.tooltip中，并没有直接的配置项来更改内容和内容格式。
TWO 解决过程
尝试一：
思路： 因为没有直接的配置项，所以考虑是否存在相关的组件props。
实现： 遇到问题，优先想到通过官方文档解决。于是继续查找官方文档，在文档-基本配置-组件props中，存在tooltipFormat属性，可以用来自定义格式化Tooltip显示内容。有了思路起点之后，继续去网上搜索tooltipFormat属性详细用法，了解到在目录uni_modules\qiun-data-charts\js_sdk\config-ucharts.js配置文件中，修改cfu对象-formatter对象-pieDemo函数的返回值，即可自定义内容。
结果： 成功自定义提示框中的内容，但无法内容换行、更改竖杠颜色。
尝试二：
思路： 既然在配置文件中成功自定义提示框中的内容，则内容换行、更改竖杠颜色也可以在某一配置文件中被修改。
实现： 在网上搜索一番后，发现在目录uni_modules\qiun-data-charts\js_sdk\u-charts.js配置文件中，修改drawToolTip函数即可实现内容换行、更改竖杠颜色。通过把内容字符串分割成数组，再将单一数组对象替换成两个数组对象，并在每个对象中单独设置内容和竖杠颜色。
结果： 成功实现内容换行、更改竖杠颜色。
THREE 知识总结
总结一： 问题复盘
uni中使用ucharts，在自定义提示框中内容的格式时，提示窗配置 opts.extra.tooltip中，并没有直接的配置项来更改内容和内容格式。需要使用组件tooltipFormat属性，并在config-ucharts.js配置文件中，配置pieDemo函数的返回值，可实现自定义内容。然后，在u-charts.js配置文件中，修改drawToolTip函数，可实现内容换行、更改竖杠颜色。
总结二： 提示框自定义内容
示例：
<qiun-data-charts class="charts" type="line" :opts="opts"
:chartData="chartData" :loadingType='0' tooltipFormat="pieDemo" />
"formatter": {
"pieDemo": function(val, index, series, opts) {
let time = index
let interest = twoDecimal(val.data)
return `${time} ${interest}`
},
总结三： 提示框内容换行、更改竖杠颜色示例：
// 建议全部打印查看
console.log(textList,'textList');
// 将提示框的自定义字符串内容 分割 成数组，分割符根据实际情况自定义
console.log(textList[0].text.split(" "),"split")
// 将单一数组对象 替换成 两个数组对象，实现自定义字内容换行效果
let newTextList=[
{
"color":"#1890FF",
"text":textList[0].text.split(" ")[0]
},
{
"color":"#EE6666",
"text":textList[0].text.split(" ")[1]
},
]
textList=newTextList
FOUR 集思广益
欢迎大家对本问题留言或私信指教，一起学习提高！
- END -
ABOUT 关于作者
- 宋大狮 | 轻轻松松工作，简简单单生活
- 小唐狮 | 广场舞大军中最靓的仔
