import React from 'react';
//导入echarts
let echarts = require('echarts/lib/echarts'); //必须

export class LineArea extends React.Component{
    constructor(props){
        super(props);
	    this.setLineOption = this.setLineOption.bind(this)
	    this.initLineArea = this.initLineArea.bind(this)
    }
    initLineArea(){
		const { data } = this.props //外部传入的data数据
		let myChart = echarts.init(this.refs.lineArea) //初始化echarts
		//我们要定义一个setLineOption函数将data传入option里面
		let options = this.setLineOption(data)
		//设置options
		myChart.setOption(options)
    }
	setLineOption(data) {
	  	return {	
            title: {
                text: '车间产出图'
            },
	  		color: ['#108ee9','#f46e65'],
	  		grid: {
	  			top:60,
	  			left:'60',
	  			right:'20'
	  		},    
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data:['标准产能','实际产量'],
				right:10
		    },
		    xAxis: {
		        type: 'category', 
		        boundaryGap: false,
                data: ['0:00','1:00','2:00','3:00','4:00','5:00','6:00'
                        ,'7:00','8:00','9:00']
		    },
		    yAxis: {
		        type: 'value',
                axisLabel: {
                    formatter: '{value}Kg'
                }
		    },
		    series: data
		}
	}
	componentDidMount() {
	    this.initLineArea()
	}

	componentDidUpdate() {
	    this.initLineArea()
	}
    render(){
        return (
            <div className="line-area">
                <div ref="lineArea" style={{width: "100%", height: "300px"}}></div>
            </div>
        );
    }
}