echarts-for-weixin tooltip到了容器边缘不改变位置

tooltip到了容器边缘不改变位置

Open xujialei123 opened this issue 5 years ago • 10 comments

提问前应该做的事

请确保提问前做了以下事，将完成的项目的 [] 改为 [x]：

[] 我已通读过 README
[] 我已阅读过 FAQ

需提供的信息

将符合项的 [] 改为 [x]，并补充需要的信息：

简单描述问题：

tooltip里面的position无效无法设置位置，一直在右边如果滑到右边就会截断了

预期效果：

提示框到右边缘不会截断自适应到左边

实际效果：

提示框到了右边缘就会截断不自动去左边

复现环境：

[] 在微信开发工具中不存在该问题
[] 在真机上存在该问题

Feb 18 '19 02:02 xujialei123

为什么我的tooltip不出现呢，神奇啊，就那么几行呀！有什么需要注意的吗？

Mar 11 '19 16:03 xjjrocker

遇到了相同的问题，求官方解决

Mar 12 '19 06:03 SinanJS

我暂时通过传入function的方式解决问题，貌似给 position return 百分数数组无效，返回[number,number]是有效果的

 position: function (pos, params, dom, rect, size) {
                // 鼠标在左侧，tooltip 鼠标在右侧
                if (pos[0] < size.viewSize[0] / 2) {
                    return [pos[0] + 10, pos[1] - 30];
                } else {
                    // 鼠标在右侧，tooltip 鼠标在左侧
                    return [pos[0] - size.contentSize[0] - 15, pos[1] - 30];
                }
            }

Mar 12 '19 06:03 SinanJS

https://github.com/ecomfe/echarts-for-weixin/issues/347 https://github.com/ecomfe/echarts-for-weixin/issues/364

Apr 03 '19 03:04 johnnynode

更改position

tooltip: {
    show: true,
    trigger: 'axis',
    backgroundColor: 'rgba(50,50,50,0.4)',
    axisPointer: {
        axis: 'x',
        snap: true,
    },
    triggerOn: 'click',
    // formatter: '{b0}\n{a0}: {c0}\n{a1}: {c1}\n{a2}: {c2}',
    position: function(point, params, dom, rect, size) {
        // update: jeff@20190409
        // 由于小程序的echart不支持formatter的回调函数功能。无奈又要修改tooltip。
        // 所以只能动态设置dom
        const axisValue = params[0].axisValue
        dom.style.text = `${axisValue}\n${dom.style.text}`

        const { contentSize } = size

        const [tooltipWidth] = contentSize
        const [pointWidth] = point

        let left = 0
        if (pointWidth - tooltipWidth > 5) {
            left = pointWidth - tooltipWidth - 5
        } else {
            left = pointWidth + 5
        }
        obj.left = left
        return obj
    },
}

Apr 09 '19 14:04 oufeng

亲测有效：

tootip: {
  position(point, params, dom, rect, size) {
    let x = point[0];
    const { contentSize, viewSize } = size;
    const maxX = viewSize[0] - contentSize[0];
    if (x > maxX) {
      x -= contentSize[0];
    }
    return [x, point[1]];
  },
}

不知道官方为什么没有解决。