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/chart/scatter';
import 'echarts/lib/chart/effectScatter';
import 'echarts/lib/chart/map';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/dataZoom';
import 'echarts/lib/component/geo';
import 'echarts/lib/component/visualMap';

// import china from 'echarts/map/json/china-cities.json'
// echarts.registerMap('china', china)

import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
console.log(china,'chinachinachina')
// import china from 'echarts/map/json/china.json'
// echarts.registerMap('china', china)
// import { ChinaData } from './china';

// echarts.registerMap('china', ChinaData);

// import * as echarts from 'echarts/core';
// import {
//     TitleComponent,
//     TooltipComponent
// } from 'echarts/components';
// import {
//     ScatterChart,
//     EffectScatterChart,
//     CustomChart
// } from 'echarts/charts';
// import {
//     CanvasRenderer
// } from 'echarts/renderers';

// echarts.use(
//     [TitleComponent, TooltipComponent, ScatterChart, EffectScatterChart, CustomChart, CanvasRenderer]
// );


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 || {},
            }


            this.chart.setOption(options);
        }
    }

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

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

export default EchartsTest;
