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

素材编辑 | 宋大狮

排版运营  | 小唐狮

ONE 问题描述

今天要和大家分享的是关于 uni 的问题，如何在 ucharts 提示窗中自定义内容，包括更改内容、内容换行、更改竖杠颜色。

需求： 在 ucharts 图表中，点击图表某一坐标，会以提示框的形式显示此坐标点的信息，并且自定义提示框中内容的格式。

问题： 自定义提示框中内容的格式时，提示窗配置 opts.extra.tooltip 中，并没有直接的配置项来更改内容和内容格式。

TWO 解决过程

尝试一：

思路： 因为没有直接的配置项，所以考虑是否存在相关的组件 props。

实现： 遇到问题，优先想到通过官方文档解决。于是继续查找官方文档，在文档 - 基本配置 - 组件 props 中，存在 tooltipFormat 属性，可以用来自定义格式化 Tooltip 显示内容。有了思路起点之后，继续去网上搜索 tooltipFormat 属性详细用法，了解到在目录 uni_modulesqiun-data-chartsjs_sdkconfig-ucharts.js 配置文件中，修改 cfu 对象 -formatter 对象 -pieDemo 函数的返回值，即可自定义内容。

结果： 成功自定义提示框中的内容，但无法内容换行、更改竖杠颜色。

尝试二：

思路： 既然在配置文件中成功自定义提示框中的内容，则内容换行、更改竖杠颜色也可以在某一配置文件中被修改。

实现： 在网上搜索一番后，发现在目录 uni_modulesqiun-data-chartsjs_sdku-charts.js 配置文件中，修改 drawToolTip 函数即可实现内容换行、更改竖杠颜色。通过把内容字符串分割成数组，再将单一数组对象替换成两个数组对象，并在每个对象中单独设置内容和竖杠颜色。

结果： 成功实现内容换行、更改竖杠颜色。

THREE 知识总结

总结一： 问题复盘

uni 中使用 ucharts，在自定义提示框中内容的格式时，提示窗配置 opts.extra.tooltip 中，并没有直接的配置项来更改内容和内容格式。需要使用组件 tooltipFormat 属性，并在 config-ucharts.js 配置文件中，配置 pieDemo 函数的返回值，可实现自定义内容。然后，在 u -charts.js 配置文件中，修改 drawToolTip 函数，可实现内容换行、更改竖杠颜色。

总结二： 提示框自定义内容

示例：

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