react中使用echarts,并实现tooltip循环轮播方式

import React, { Component } from 'react'
import { Empty } from 'antd'
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/title'

class LineBarShow extends Component {
	echartsObj = null
	loopTooltipTimer = null
	state = {
	  xAxisData: [],
	  seriesData: []
	}
	componentDidMount () {
	 window.addEventListener('resize', this.chartResize)
	}
	chartResize = () => {
	 setTimeout(() => {
	   this.echartsObj && this.echartsObj.resize()
	 }, 100)
	}
	componentWillUnmount () {
	 window.removeEventListener('resize', this.chartResize)
	 this.loopTooltipTimer = null
	}
	// 当props发生改变--start
	// 当props发生变化后将值赋给当前组件的state变量
	static getDerivedStateFromProps (nextProps, prevState) {
	  return {
	    xAxisData: nextProps.data.xAxisData,
	    seriesData: nextProps.data.seriesData
	  }
	}
	loopShowTooltip = () => {
	  let index = 0
	  this.loopTooltipTimer = setInterval(() => {
	    this.echartsObj.dispatchAction({
	      type: 'showTip',
	      seriesIndex: 0,
	      dataIndex: index
	    })
	    // 循环轮播
	    index = this.state.xAxisData.length - 1 ? 0 : ++index
	  }, 1000)
	}
	componentDidUpdate () {
		let { xAxisData } = this.state
		if (xAxisData && xAxisData.length) {
			this.echartsObj = echarts.init(document.getElementById(this.props.id))
			let option = {...}
			this.echartsObj.setOption(option)
			// 这里可以加判断，是否需要循环轮播
			// 这里默认显示
			this.loopShowTooltip()
		}
	}
	// 当props发生改变--end
	render () {
		let { xAxisData } = this.state
	    return (
	      <div className="full-height">
	        { xAxisData && xAxisData.length ? (
	          <div id={this.props.id} className="full-height"></div>
	        ) : (
	          <Empty />
	        )}
	      </div>
	    )
	}
}