ECharts 移动端 tooltip 触发多个focus的bug
时间: 2023-06-19 10:05:28 浏览: 61
ECharts 移动端 tooltip 触发多个 focus 的 bug,是因为在移动设备上,用户触摸屏幕会触发 touchstart、touchmove 和 touchend 事件,而这些事件会触发多次 tooltip 的显示与隐藏。解决这个问题,可以通过设置 ECharts 的 touchEvents 属性来限制事件触发的次数。
具体做法是,在初始化 ECharts 实例时,通过设置 touchEvents 属性来限制触发 tooltip 的事件。例如:
```
var myChart = echarts.init(document.getElementById('main'), null, {
touchEvents: ['touchstart', 'touchmove']
});
```
这样,只有当用户触摸屏幕时,才会触发 tooltip 的显示与隐藏,避免了多次触发的问题。
相关问题
echarts移动端tooltip
移动端的echarts tooltip是指在移动设备上显示的提示框组件。在移动端echarts中,可以使用axisPointer来配置坐标轴指示器,使用tooltip来配置提示框组件。具体的移动端tooltip的使用方法可以参考ECharts API中的相关文档。在Vue项目中使用移动端tooltip时,可以通过触发图表行为来显示和隐藏提示框,可以使用showTip方法来主动触发展示tooltip提示框,使用hide方法来隐藏tooltip和axisPointer。在方法中,可以通过dispatchAction来触发相关的行为,例如showTip和hideTip来显示和隐藏提示框,updateAxisPointer来更新坐标轴指示器。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [echarts---tooltip(提示框组件)配置项](https://blog.csdn.net/weixin_45407412/article/details/126297158)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [移动端echarts手动控制tooltip和axisPointer的展示隐藏](https://blog.csdn.net/tiven_/article/details/126395387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
echarts的tooltip触发条件
echarts的tooltip触发条件可以通过配置trigger来设置。常见的触发时机有鼠标移动到图形上触发(默认值),鼠标点击图形上触发等。具体配置方法如下:
1. 鼠标移动到图形上触发:tooltip: { trigger: 'item' }
2. 鼠标点击图形上触发:tooltip: { trigger: 'item', triggerOn: 'click' }
同时,我们还可以通过配置formatter来设置tooltip的提示内容格式化,例如显示数据的名称和数值等。如果需要在tooltip中添加一个查看按钮,并且点击获得触发点的数据进行操作,可以通过在formatter中添加HTML元素来实现。具体实现方法可以参考引用中的示例代码。