首页 前端知识 uni问题:如何在ucharts提示窗中自定义内容

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

2024-10-28 20:10:57 前端知识 前端哥 943 134 我要收藏

 

素材编辑 | 宋大狮

排版运营 | 小唐狮

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

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19391.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!