ucharts 自定义tooltip弹窗内容且换行

3,406 阅读1分钟

自定义弹窗内容

第一步: 使用tooltipFormat属性

image.png

第二步:找到uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js文件

image.png

修改formatter,增加所需格式

image.png

效果图如下:

image.png

换行

第一步:修改自定义内容

image.png

第二步:找到uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js文件,找到drawToolTip方法,加入下面代码即可

if (textList[0].text.split("/")[0] == "换行") {
    let newTextList = [{
            "color": "#FCDB66",
            "legendShape": "circle",
            "text": textList[0].text.split("/")[1]
        },
        {
            "color": "transparent",
            "text": textList[0].text.split("/")[2]
        },
    ]
    textList = newTextList
}

image.png

效果图如下:

image.png

参考链接:blog.csdn.net/weixin_5053…