After setting the Echarts DataZoom mobile terminal, hide the tooltip while Rolling

essential

Echarts installs DataZoom and at the same time the toolkit is also installed, this is how it rolls left and right:

The product should hide the tip of the tool when it crumbles.

code

In fact, the write state must be written. Logs allow you to view the rise of the instrument. If not enabled, the tooltip display is disabled.

Here you can use my previous articlemixinMethod, you can read the previous article

Introduce the variableHIDE_ALL_TOOLTIPObservation

  watch: {
    
    HIDE_ALL_TOOLTIP(v) {
      this.$refs.chart.mergeOptions({
        tooltip: {
          show: !v,
        },
      });
    },
  },

Monitor events

Do not add heretouchmoveInstead, add a signaldatazoomIncident monitoring.

mounted(){
	this.$refs.echart.on('datazoom',this.chartScroll)
},
  beforeDestroy() {
  	this.$refs.echart.off('datazoom',this.chartScroll)
  },
methods:{
	    
    chartScroll({ batch = [{}] }) {
      
      this.changeGlobalState({
        hideAllToolTip: true,
      });
    },
}

Click an event

After cutting, if you click the button, you need to display a tooltip. Reset feature is added to MixIn. As long as the user clicks on the chart, a tooltip corresponding to the above functions will be displayed.