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

export class ComRateGauge 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.gauge) //初始化echarts
		//我们要定义一个setLineOption函数将data传入option里面
		let options = this.setLineOption(data)
		//设置options
		myChart.setOption(options)
    }
	setLineOption(data) {
	  	return {	
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    detail: {formatter:'{value}%'},
                    data: [{value: 50, name: '完成率'}]
                }
            ]
		}
	}
	componentDidMount() {
	    this.initLineArea()
	}

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