react中使用echarts,并实现tooltip循环轮播方式
作者：土豆Coder
这篇文章主要介绍了react中使用echarts,并实现tooltip循环轮播方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react使用echarts,实现tooltip循环轮播
查看效果
当我们开发数据看板类需求时，需要图标实现自动轮播的效果，
具体效果如下：
实现代码
- 这里整个图表为一个组件，通过传data和配置入组件来显示
- 按需加载echarts组件
- react生命钩子中实现echarts的resize事件
- 当传入的props数据发生变化后需要重新渲染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
}
// 当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>
)
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。