/**
 * 顶部header
 */
Vue.component("idle-list-chart", {
    template: `
            <div :style="{'width': width+'px','height':height+'px'}" ref="chart"></div>
    `,
    props: {
        prop:{
            type:Number
        },
        color:{
            type:String
        },
        width:{
            type:Number,
            default:175
        },
        height:{
            type:Number,
            default:40
        }
    },
    data() {
        return {
            option:{},
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.getChartData()
        },
        getChartData(){
            //品类金额占比 饼图
            var chChart = echarts.init(this.$refs.chart);
            this.echart(chChart,this.prop,this.color)
        },
        echart(chChart,data,color){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var prop = []
                prop.push(data)
                this.option = {
                    grid: {
                        left: "1%",
                        right: "0%",
                        bottom: "0%",
                        top: "25",
                        containLabel: true,
                    },
                    xAxis: {
                        show: false,
                        type: "value",
                    },
                    yAxis: [
                        {
                            type: "category",
                            inverse: true,
                            axisLabel: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                        },
                        {
                            type: "category",
                            inverse: true,
                            axisTick: "none",
                            axisLine: "none",
                            show: true,
                            axisLabel: {
                                textStyle: {
                                    color: "#cbdaff",
                                    fontSize: "16",
                                },
                                formatter: function(params,i){
                                    var text = "{a|   "+ prop[i]+ "%}";
                                    return text;
                                },
                                rich: {
                                    a: {
                                        fontSize: '14',
                                        color: color,
                                    },
                                },
                            },
                            data: prop,
                        },
                    ],
                    series: [
                        {
                            type: "bar",
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    color: color,
                                },
                            },
                            barWidth:8,
                            data: prop,
                        },
                        {
                            type: "bar",
                            barWidth: 10,
                            barGap: "-100%",
                            data: [100],
                            itemStyle: {
                                normal: {
                                    color: "rgba(24,31,68,0.8)",
                                },
                            },
                        },
                    ],
                };

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