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

    },
    mounted() {
        this.init()
    },
    methods: {
        init(){
            this.getChartData()
        },
        //分类及工时情况
        getChartData(){
            var chChartBar = echarts.init(this.$refs.chart);
            this.$nextTick(() => {
                this.echartBar(chChartBar,this.data)
            })
        },
        echartBar(myChart,data){
            var that = this
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                this.option = {
                    grid: {
                        top: "25%",
                        left:"5%",
                        right:"3%",
                        bottom: "12%", //也可设置left和right设置距离来控制图表的大小
                    },
                    tooltip: {
                        trigger: "axis",
                        textStyle: {
                            color: "#ffffff",
                            fontSize:18
                        },
                        formatter: function (params) {
                            return (
                                params[0].name +
                                "<br/>" +
                                "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:12px;height:12px;background-color:rgba(36,207,233,0.9)'></span>" +
                                +params[0].value+
                                data.unit+"<br/>"
                            );
                        },
                    },
                    xAxis: {
                        data:data.xAxis,
                        axisLine: {
                            show: true, //隐藏X轴轴线
                            lineStyle: {
                                color: "#2c4e74",
                            },
                        },
                        axisTick: {
                            show: false, //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#cbdaff", //X轴文字颜色
                                fontSize:16
                            },
                        },
                    },
                    yAxis: [
                        {
                            type: "value",
                            name: "单位："+data.unit,
                            nameTextStyle: {
                                color: "#cbdaff",
                                fontSize:16
                            },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#2c4e74",
                                },
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#cbdaff",
                                    fontSize:18
                                },
                            },
                        },
                    ],
                    series: [
                        {
                            type: "bar",
                            barWidth: 15,
                            /*markLine: {
                                silent: true,
                                symbol: ['none', 'none'],
                                data: [{ type: "average", name: "平均值" }],
                                itemStyle: {
                                    normal: {
                                        lineStyle: {
                                            color: '#ffffff',
                                        }
                                    }
                                },
                                label: {
                                    fontSize: 18
                                }
                            },*/
                            label: {
                                show: true,
                                position: "top",
                                color:'#ffffff',
                                fontSize:18
                            },

                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#00FFE3",
                                        },
                                        {
                                            offset: 1,
                                            color: "#4693EC",
                                        },
                                    ]),
                                },
                            },
                            data: data.data,
                        },
                    ],
                };

                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()
        }
    }
})