import React, { Component } from 'react';
import PropTypes from 'prop-types';
import R from 'ramda';
import echarts from 'echarts/lib/echarts';
class ChartTip extends Component {
constructor(props) {
super(props);
};
componentDidMount() {
this.ChartTip = echarts.init(this.chartDiv);
if(this.props.getChart){
this.props.getChart(this.ChartTip);
}
debugger
var option = this.props.option;
var chart = this.ChartTip;
//轮播展示
var currentIndex = -1;
setInterval(function() {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0, //表示series中的第几个data数据循环展示
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
// 高亮当前图形
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 6000);
this.ChartTip.setOption(this.props.option);
}
componentWillUnmount() {
this.ChartTip.clear();
this.ChartTip.dispose();
this.chartDiv = null;
// Chart.on('click'.this.handleClick);
}
componentWillReceiveProps(nextProps) {
if (this.ChartTip) {
this.ChartTip.resize();
if (!R.equals(nextProps, this.props)) {
this.ChartTip.setOption(nextProps.option);
}else{
if(this.props.autoAnimate){
let tempOp = this.chart.getOption();
this.ChartTip.clear();
this.ChartTip.setOption(tempOp);
}
}
}
}
render() {
return (
<div ref={(chartDiv)=>{this.chartDiv=chartDiv;}}
style={this.props.style} className = {this.props.className}
>
</div>
);
}
};
ChartTip.propTypes = {
option: PropTypes.object.isRequired
}
export default ChartTip;
react框架 echarts 自动轮播选中
最新推荐文章于 2023-12-14 22:38:10 发布