/**
 * 顶部header
 */
Vue.component("norm-pie-small", {
    template: `
       <div style=" height:  160px"  ref="chart"> </div>
    `,
    props: {
        value:{
            type:Number
        },
        text:{
            type:String
        }
    },
    data() {
        return {
            option:{}
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.getChartData()
        },
        //分类及工时情况
        getChartData(){
            var chChartBar = echarts.init(this.$refs.chart);
            this.echartBar(chChartBar,this.value,this.text)
        },
        echartBar(chChart,value,text){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var placeHolderStyle = {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                    },
                    emphasis: {
                        color: "rgba(0,0,0,0)",
                        borderWidth: 0,
                    },
                };

                var dataStyle = {

                };
                this.option ={
                    title: [
                        {
                            text: value+'%',
                            textAlign: "center",
                            left: "48%",
                            top: "30%",
                            textStyle: {
                                color: "#67abf2",
                                fontSize: 23,
                            },
                        },
                        {
                            text: text,
                            left: "48%",
                            top: "80%",
                            textAlign: "center",
                            textStyle: {
                                color: "#cdd7fa",
                                fontWeight: "normal",
                                fontSize: "16",
                                textAlign: "center",
                            },
                        },
                    ],
                    series: [
                        {
                            type: "pie",
                            hoverAnimation: false,
                            radius: ["60%", "59%"],
                            center: ["50%", "40%"],
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            label: {
                                normal: {
                                    position: "center",
                                },
                            },
                            data: [
                                {
                                    value: 100,
                                    itemStyle: {
                                        normal: {
                                            color: "#255788",
                                        },
                                    },
                                },

                            ],
                        },
                        {
                            type: "pie",
                            hoverAnimation: false,
                            radius: ["53%", "60%"],
                            center: ["50%", "40%"],
                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            label: {
                                normal: {
                                    position: "center",
                                },
                            },
                            data: [
                                {
                                    value: value,
                                    itemStyle: {
                                        normal: {
                                            color: "#68a8f2",
                                        },
                                    },
                                    normal: {
                                        show: false,
                                    },
                                },
                                {
                                    value: 100-value,
                                    itemStyle: placeHolderStyle,
                                },
                            ],
                        },
                    ],
                };

                chChart.setOption(this.option);
                window.onresize = chChart.resize;
            })
        },
    },
    watch:{
        value: function (n,o) {
            this.init()
        }
    }

})