echarts-for-weixin
echarts-for-weixin copied to clipboard
tooltip到了容器边缘不改变位置
提问前应该做的事
请确保提问前做了以下事,将完成的项目的 []
改为 [x]
:
需提供的信息
将符合项的 []
改为 [x]
,并补充需要的信息:
简单描述问题:
tooltip里面的position无效 无法设置位置,一直在右边如果滑到右边就会截断了
预期效果:
提示框到右边缘不会截断自适应到左边
实际效果:
提示框到了右边缘就会截断不自动去左边
复现环境:
- [] 在微信开发工具中不存在该问题
- [] 在真机上存在该问题
为什么我的tooltip不出现呢,神奇啊,就那么几行呀!有什么需要注意的吗?
遇到了相同的问题,求官方解决
我暂时通过传入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];
}
}
https://github.com/ecomfe/echarts-for-weixin/issues/347 https://github.com/ecomfe/echarts-for-weixin/issues/364
更改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
},
}
亲测有效:
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]];
},
}
不知道官方为什么没有解决。
为什么我的tooltip不出现呢,神奇啊,就那么几行呀!有什么需要注意的吗?
正常的在data里使用ec对象mock数据在手机上点击可以正常显示tooltips,但是我是调用异步函数通过bind:init这种方式实例对象的但是点击无效
tooltip. confine =true
如果外层容器设置了 overflow: 'hidden', tooltip. confine =true 参数并没有像文档中说明的那样会起作用,超出部分仍然会被截断导致显示不全
position设置了也无效