移动端echarts设置dataZoom之后，滚动时隐藏tooltip

需求

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，这样就满足以上的功能。