echarts tooltip 自动轮播

一、效果展示

echarts tooltip 自动轮播_第1张图片

二、使用步骤

代码如下(示例):

  data () {
    return {
      setInterval: ''
    }
  },
 const myChart = this.$echarts.init(document.getElementById("id"))
 let option={
	     tooltip: {
			//鼠标滑过配置项
	      },
 	//其他配置项
 }
  myChart.setOption(option)
    let idx = 1
    this.setInterval = setInterval(() => {
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: idx
      })
      idx++
	//this.xAxis.length   为x轴数据长度(自行修改)
      if (idx >= this.xAxisData.length) {
        idx = 0
      }
    }, 2000)
  mounted () {
  //初始化图表
    this.$nextTick(() => {
      this.init()
    })
  },
  //清除定时器
  beforeDestroy () {
    clearInterval(this.setInterval)
  },

总结

提示:以上内容仅供参考!如有不正;请指出

你可能感兴趣的:(可视化,vue.js,echarts,vue.js)