import ReactEchartsCore from 'echarts-for-react/lib/core';
import React, { Component } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/scatter';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/legendScroll';
import 'echarts/lib/component/dataZoom';

class Echarts extends Component {
    componentDidMount() {
        const { events, option } = this.props;
        const echart = this.echartsRef;
        if( Object.keys(events).length>0 ){
            for (let key in events) {
                if( events[key] ){
                    if( key==='click' ){
                        //如果是饼图 作用域只在饼块上
                        if( option.baseOption.pie ){
                            echart.getEchartsInstance().on(key,events[key]) 
                        }else{
                            //下钻使用的点击事件 绑定在任意处
                            echart.getEchartsInstance().getZr().on(key,function(e){
                                events[key](e,echart);
                            })
                        }
                    }else{
                        echart.getEchartsInstance().on(key,events[key])
                    }
                }
            }
        }
    }
    render() { 
        return ( 
            <ReactEchartsCore
                ref={node => this.echartsRef = node}
                echarts={echarts}
                option={this.props.option}
                className='rc-echarts'
                style={{height: '100%'}}
            />
        );
    }
}
 
export default Echarts;