import React, { Component } from 'react';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';


class EchartsTest extends Component {
    chartRef = React.createRef();
    chart = undefined
    defaultChartOption = {}

    componentDidMount () {
        this.chart = echarts.init(this.chartRef.current)

        // 绘制图表
        this.chart.setOption({
            ...this.defaultChartOption,
            ...this.props.options || {},
        });
    }

    componentDidUpdate (preProps) {
        if (preProps.options != this.props.options) {
            const options = {
                ...this.defaultChartOption,
                ...this.props.options || {},
            }

            console.log(options)

            this.chart.setOption(options);
        }
    }

    render () {
        const style = {
            width: '600px',
            height: '400px',
            ...this.props.style || {}
        }

        return (
            <div ref={this.chartRef} style={style}></div>
        );
    }
}

export default EchartsTest;
