/**
 * 顶部header
 */
Vue.component("cz-distribution-echart", {
    template: `
        <div :style="{height: height+'px'}"  ref="chart"> </div>
    `,
    props: {
        distribute:{
            type: Object,
        },
        height:{
            type:Number
        },
    },
    data() {
        return {
            option:{}
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        //预警分布
        init(){
            this.warningDistributeChart(this.distribute)
        },
        //预警分布  Echart
        warningDistributeChart(data){
            //console.log(data);
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var myChart = echarts.init(this.$refs.chart);
                var series = []
                if(data.legend != undefined) {
                    for (let i = 0; i <data.legend.length ; i++) {
                        series.push(
                            {
                                type: "bar",
                                name: data.legend[i],
                                barGap:'80%',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true, //开启显示
                                            position: "right", //在右显示
                                            textStyle: {
                                                //数值样式
                                                color: data.color[i][1],
                                                fontSize: 16,
                                            },
                                        },
                                        color: data.color[i][0],
                                        borderColor: data.color[i][1],
                                        borderWidth: 2,
                                    },
                                },
                                barWidth: '20%',
                                data:data.data[i],
                            },
                        )
                    }
                    option = {
                        legend: {
                            data: data.legend,
                            top: "2%",
                            right: "10",
                            itemHeight: 15,
                            itemWidth: 20,
                            textStyle: {
                                color: "#c8d7ff",
                                fontSize: 14,
                            },
                        },
                        grid: {
                            top: "10%",
                            right: "10%",
                            left: "2%",
                            bottom: "2%",
                            containLabel: true
                        },
                        xAxis: {
                            type: "value",
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                show: false,
                            },
                        },
                        yAxis: {
                            type: "category",
                            inverse:true,               //让y轴数据逆向
                            data:data.yAxis,
                            splitLine: {show: false,},
                            axisTick: {show: false,},
                            axisLine: {show: false,},
                            axisLabel: {
                                //  改变y轴字体颜色和大小
                                //formatter: '{value} m³ ', //  给y轴添加单位
                                textStyle: {
                                    color: "#c8d7ff",
                                    fontSize: 14,
                                },

                            },
                        },
                        series: series
                    };

                    myChart.setOption(option);
                    window.onresize = myChart.resize;
                }

            })
        },

    },
    watch:{
        distribute: function (n,o) {
            this.warningDistributeChart(this.distribute)
        }
    },
})