uni问题：如何在ucharts提示窗中自定义内容

 

素材编辑 | 宋大狮

排版运营 | 小唐狮

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 关于作者

• 宋大狮 | 轻轻松松工作，简简单单生活

• 小唐狮 | 广场舞大军中最靓的仔