import React, { Component } from 'react';
import * as echarts from 'echarts';
class XColumn extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    componentDidMount() {
        const { xAxis, yAxis, domId } = this.props;
        this.createCharts(xAxis, yAxis, domId);
    }

    componentWillReceiveProps(nextProps) {
        let { xAxis, yAxis, domId } = nextProps;
        if (JSON.stringify(xAxis) != JSON.stringify(this.props.xAxis) || JSON.stringify(yAxis) != JSON.stringify(this.props.yAxis)) {
            this.createCharts(xAxis, yAxis, domId);
        }
    }

    createCharts = (xAxis, yAxis, domId) => {
        this.clearEchart();
        let chartDom = document.getElementById(domId);
        this.chart = echarts.init(chartDom);
        let option = this.getOption(xAxis, yAxis);
        this.chart.setOption(option);
        this.onSize = () => {
            this.chart.resize();
        }
        window.addEventListener("resize", this.onSize);
    };
    // 组件销毁删除监听
    componentWillUnmount() {
        window.removeEventListener("resize", this.onSize)
    }
    clearEchart = () => {
        if (this.chart) {
            this.chart.dispose();
        }
    };

    getOption = (xAxis, yAxis) => {
        let option = {
            title: {
                text: '实时故障点位分析'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '10%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: yAxis
            },
            series: [
                {
                    name: '异常数',
                    type: 'bar',
                    data: xAxis,
                    barMaxWidth: 30,//柱子最大宽度
                }
            ]
        };
        return option;
    };

    render() {
        const { domId, width, height } = this.props;
        return <div id={domId} style={{ height: height, width: width || '100%', margin: '0px auto' }} />;
    }
}

export default XColumn;