素材编辑 | 宋大狮
排版运营 | 小唐狮
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 关于作者
-
宋大狮 | 轻轻松松工作,简简单单生活
-
小唐狮 | 广场舞大军中最靓的仔