Vue.component("material-many-bar-chart", {
    template: `
        <div :style="{'height': height+'px'}" ref="chart"> </div>
    `,
    props: {
        data:{
            type:Object
        },
        yaxis:{
            type:Boolean
        },
        height:{
            type:Number
        }
    },
    data() {
        return {
            option:{},
        }
    },
    created(){

    },
    mounted() {
        this.init()
    },
    methods: {
        init(){
            this.getChartData()
        },
        //分类及工时情况
        getChartData(){
            // console.log(this.data)
            // console.log(this.yaxis)

            var chChartBar = echarts.init(this.$refs.chart);
            this.$nextTick(() => {
                this.echartBar(chChartBar,this.data,this.yaxis)
            })
        },
        echartBar(myChart,data,state){
            var that = this
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var unit = ''
                if(data.unit){
                    unit = '单位：'+ data.unit
                }

                var yAxis= []
                var grid = ''
                if(state == true){
                    yAxis.push(
                        {
                            name:unit,
                            nameTextStyle: {		//Y轴那么的样式
                                color: '#42d0ff',
                                fontSize: 14,
                            },
                            max:data.max,
                            type: "value",
                            axisLabel: {
                                textStyle: {
                                    color: "#cbdaff",
                                },
                                formatter: "{value}",
                            },
                            splitLine: {
                                lineStyle: {
                                    type: "dashed",
                                    color: "#2f4472",
                                },
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#2f4472",
                                },
                            },
                        }
                    )
                    grid = {
                        left: "15%",
                        top: "20%",
                        right: "0%",
                        bottom: "10%",
                    }
                }else{
                    yAxis.push(
                        {
                            nameTextStyle: {		//Y轴那么的样式
                                color: '#42d0ff',
                                fontSize: 14,
                            },
                            max:data.max,
                            type: "value",
                            axisLabel: {show: false},
                            axisTick: {show: false},
                            splitLine: {
                                lineStyle: {
                                    type: "dashed",
                                    color: "#2f4472",
                                },
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#2f4472",
                                },
                            },
                        }
                    )
                    grid = {
                        left: "0%",
                        top: "30%",
                        right: "0%",
                        bottom: "10%",
                    }
                }
                this.option = {
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                            },
                        },
                    },
                    grid: grid,
                    xAxis: {
                        data: data.xData,
                        axisLine: {
                            show: true, //隐藏X轴轴线
                            lineStyle: {
                                color: "#2f4472",
                                width: 1,
                            },
                        },
                        axisTick: {
                            show: true, //隐藏X轴刻度
                            alignWithLabel: true,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#cbdaff", //X轴文字颜色
                                fontSize: 14,
                            },
                            interval: 0,

                        },
                    },
                    yAxis: yAxis,
                    series: [
                        {
                            name: data.legend[0],
                            type: "bar",
                            barWidth: 10,
                            barGap: 2,
                            label: {
                                normal: {
                                    show: true,
                                    position: "top",
                                    color:"#fff"
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "rgba(64,124,254,1)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(64,124,254,0.2)",
                                        },
                                    ]),
                                },
                            },
                            data: data.yData_1,
                        },
                        {
                            name: data.legend[1],
                            type: "bar",
                            barWidth: 10,
                            barGap: 2,
                            label: {
                                normal: {
                                    show: true,
                                    position: "inside",
                                    color:"#fff"
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "rgba(25,210,204,1)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(25,210,204,0.2)",
                                        },
                                    ]),
                                },
                            },
                            data: data.yData_2,
                        },

                    ],
                };

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

                /*myChart.off('click')

                myChart.on('click', function (params) {
                    that.$emit('chart',params.name);
                })*/
            })
        },
    },
    watch:{
        data:function () {
            this.init()
        }
    }
})