一、问题描述

在使用 Ucharts 图表库进行开发时，发现图表中的 tooltip 不显示。即使在配置中明确设置了 tooltip 的相关属性，但在实际运行时，鼠标悬浮在图表数据点上时，并没有出现预期的 tooltip 提示信息。

二、可能的原因

出现概率 绿>黄>红

• 配置错误
• 可能是在 Ucharts 的配置项中，tooltip 的相关配置出现错误。例如，没有正确设置 show 属性为 true，或者没有指定正确的 formatter 函数来格式化 tooltip 的内容。
• 配置项中的 trigger 属性设置错误，导致 tooltip 无法触发。例如，设置为 none 时，tooltip 将不会显示。
• 数据问题
• 如果图表的数据格式不正确，或者数据中缺少必要的字段，可能会导致 tooltip 无法正常显示。例如，在使用柱状图时，如果数据中没有提供 name 和 value 字段，tooltip 可能无法正确显示对应的数据信息。
• 数据量过大或过小，也可能会影响 tooltip 的显示。如果数据量过大，可能会导致性能问题，从而影响 tooltip 的显示；如果数据量过小，可能会导致 tooltip 无法触发。
• 样式问题
• 可能是由于样式冲突导致 tooltip 无法显示。例如，在页面中设置了全局的 pointer-events: none; 样式，会导致鼠标事件无法触发，从而影响 tooltip 的显示。
• 图表的容器元素的样式设置不当，也可能会影响 tooltip 的显示。例如，设置了 overflow: hidden; 样式，可能会导致 tooltip 被裁剪而无法显示。
• 检查canvas外层包裹了sroll-view或swiper或父元素采用fixed定位导致touch事件的event错乱
• 版本问题
• Ucharts 图表库的版本可能存在问题。如果使用的是旧版本的 Ucharts，可能会存在一些已知的 bug，导致 tooltip 不显示。可以尝试升级到最新版本，看是否能够解决问题。

三、解决方法

• 检查配置项
• 仔细检查 Ucharts 的配置项，确保 tooltip 的相关配置正确。例如，设置 show 属性为 true，并根据需要设置 trigger 属性为 axis 或 item。
• 如果需要自定义 tooltip 的内容，可以设置 formatter 函数来格式化 tooltip 的显示内容。例如：

tooltip: {
    show: true,
    trigger: 'item',
    formatter: function(params) {
        return params.name + ': ' + params.value;
    }
}

• 检查数据格式
• 确保图表的数据格式正确，并且包含必要的字段。例如，在柱状图中，数据应该包含 name 和 value 字段。
• 如果数据量过大或过小，可以尝试调整数据的范围或数量，看是否能够解决问题。
• 检查样式问题
• 检查页面中的样式，确保没有设置会影响鼠标事件触发的样式。例如，避免设置 pointer-events: none; 样式。
• 检查图表的容器元素的样式，确保没有设置会裁剪 tooltip 的样式。例如，避免设置 overflow: hidden; 样式。
• 检查canvas外层包裹了sroll-view或swiper或父元素采用fixed定位。如若必须要定位，采用官方文档给出的方法将错误的event坐标处理回正确的点击坐标，需要在event中加上或减去部分的x，y坐标，具体数值可以通过去掉外层包裹和没有去掉外层包裹打印出来的event计算得出
•   Html

<canvas canvas-id="column" id="column" class="charts" @tap="tap" />

•   Javascript

var uChartsInstance = {};
drawCharts(id, data) {
        var opts = {
            type: "column",
            ......
        };
        uChartsInstance[id] = new uCharts(opts);
    },
    tap(e) {
        //方法一：格式化ToolTip
        uChartsInstance[e.target.id].showToolTip(e, {
            formatter: (item, category, index, opts) => {
                return item.name + ":" + item.data;
            }
        });
        //方法二：自定义ToolTip
        uChartsInstance[e.target.id].showToolTip(e, {
                index: 2,
                offset: {
                    x: 10,
                    y: 10
                }, //不传offset显示位置为点击的坐标textList: [
                {
                    text: "2022年销量",
                    color: null
                },
                {
                    text: "大米：100万斤",
                    color: "#1890FF"
                },
                {
                    text: "豆油：10吨",
                    color: "#91CB74"
                }
            ]
        });
}

参考连接https://www.ucharts.cn/v2/#/document/index

• 升级版本
• 如果以上方法都无法解决问题，可以尝试升级 Ucharts 图表库到最新版本。新版本可能会修复一些已知的 bug，从而解决 tooltip 不显示的问题。

四、总结

在 Uniapp 开发中，使用 Ucharts 图表库时遇到 tooltip 不显示的问题，可以从配置错误、数据问题、样式问题和版本问题等方面进行排查。通过仔细检查配置项、数据格式、样式设置，并尝试升级版本等方法，通常可以解决 tooltip 不显示的问题。在开发过程中，遇到问题时要善于分析和排查，找到问题的根源，才能更好地解决问题。

希望本文对大家在 Uniapp 开发中遇到的 Ucharts 中 tooltip 不显示问题有所帮助。