react中使用echarts,并實現(xiàn)tooltip循環(huán)輪播方式

更新時間：2024年01月24日 14:33:10 作者：土豆Coder

這篇文章主要介紹了react中使用echarts,并實現(xiàn)tooltip循環(huán)輪播方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

react使用echarts,實現(xiàn)tooltip循環(huán)輪播

查看效果

當(dāng)我們開發(fā)數(shù)據(jù)看板類需求時，需要圖標(biāo)實現(xiàn)自動輪播的效果，

具體效果如下：

實現(xiàn)代碼

這里整個圖表為一個組件，通過傳data和配置入組件來顯示
按需加載echarts組件
react生命鉤子中實現(xiàn)echarts的resize事件
當(dāng)傳入的props數(shù)據(jù)發(fā)生變化后需要重新渲染echarts

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
	}
	// 當(dāng)props發(fā)生改變--start
	// 當(dāng)props發(fā)生變化后將值賦給當(dāng)前組件的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
	    })
	    // 循環(huán)輪播
	    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)
			// 這里可以加判斷，是否需要循環(huán)輪播
			// 這里默認(rèn)顯示
			this.loopShowTooltip()
		}
	}
	// 當(dāng)props發(fā)生改變--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>
	    )
	}
}