需求
echarts设置了datazoom同时也设置了tooltip的时候,左右滚动时候就会这样:
产品提出需求说要滚动的时候隐藏tooltip,要这样:
代码
这里其实需要记录状态,记录tooltip是否允许显示,如果不允许就关闭tooltip的显示,反之同理。
这里可以使用我上一篇文章提供的mixin
的方法,可以阅读上一篇文章
引入了一个变量HIDE_ALL_TOOLTIP
,监听它
watch: {
// 动态隐藏tooltip
HIDE_ALL_TOOLTIP(v) {
this.$refs.chart.mergeOptions({
tooltip: {
show: !v,
},
});
},
},
滚动事件监听
这里就不添加touchmove
,而是添加echart提供的datazoom
的事件监听。
mounted(){
this.$refs.echart.on('datazoom',this.chartScroll)
},
beforeDestroy() {
this.$refs.echart.off('datazoom',this.chartScroll)
},
methods:{
// 滚动事件
chartScroll({ batch = [{}] }) {
// 滚动的时候隐藏tooltip
this.changeGlobalState({
hideAllToolTip: true,
});
},
}
点击事件
滚动之后,如果发生点击的话,就需要显示tooltip,这里在mixin里添加了重置的功能,只要用户点击图表的时候,就会显示tooltip,这样就满足以上的功能。