import React from 'react'
import ReactEcharts from 'echarts-for-react'

class PieEchart extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '',
            total: 0,
            ratio: 0,
            color1: '#60F2B8',
            color2: '#1EBBE8',
            title:'',
            unit:''
        }
    }

    componentDidMount() {
        const data = this.props.data;
        const currState = {
            name: data.Name,
            total: data.Total,
            ratio: data.Ratio,
            color1: data.Color1,
            color2: data.Color2,
            title:data.Title,
            unit:data.Unit
        }
        this.setState(currState)
    }

    getOption = () => {
        const { name, total, ratio, color1, color2,title,unit } = this.state
        const val = ratio / 100;
        let option = {
            title: {
                text: title?title:'',
                x: '50%',
                y: '90%',
                textAlign: "center",
                textStyle: {
                    fontSize: 14
                }
            },
            series: [{
                name: '',
                type: 'pie',
                radius: ['62%', '82%'],
                startAngle: 225,
                color: [{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0.75,
                    y2: 0.75,
                    colorStops: [{
                        offset: 0,
                        color: color1 // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: color2 // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }, '#E0FAF0', 'none'],
                hoverAnimation: false,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{
                    value: 75 * val,
                    label: {
                        normal: {
                            rich: {
                                a: {
                                    color: '#109AA0',
                                    align: 'center',
                                    fontSize: 18
                                },
                                b: {
                                    color: '#109AA0',
                                    align: 'center',
                                    fontWeight: "bold",
                                    fontSize: 24
                                },
                                c: {
                                    align: 'center',
                                    fontSize: 22
                                }
                            },
                            formatter: function (params) {
                                return "{c|" + (name?name:'') + "}\n\n{a|" + total + unit + "}\n\n{b|" + ratio + "%}";
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'normal',
                                color: '#fff'
                            }
                        }
                    },
                }, {
                    value: 75 * (1 - val)
                }, {
                    value: 25
                }]
            }],
        };
        return option
    }

    render() {
        return (
            <ReactEcharts style={{ height: 200 }} option={this.getOption()} />
        )
    }
}

export default PieEchart