import Vue from 'vue'
Vue.component("chart-bar", {
    template: `
        <div class='chart-bar' style="position: relative" @click="doClick">
            <div :style="{'height': height+'px'}" ref="warningPieChart">
 
            </div>            
        </div>
            
    `,
    props: {
        fn:{
            type:Function              
        },      
        height:{
            type:Number
        }, 
        optData:{
            type:Array,
            default:()=>[]
        }               
    },
    data() {
        return {          
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        doClick(){            
            this.$emit("clickme");
        },  
        init(){
            this.getChartData()
        },
        getChartData(){
            //品类金额占比 饼图
            var chChartPie = echarts.init(this.$refs.warningPieChart);
            this.echartPie(chChartPie)
        },
        echartPie(chChart){
            let newPromise = new Promise((resolve) => {
                resolve()
            })

            //然后异步执行echarts的初始化函数
            newPromise.then(() => {                                             
                this.option =  {                   
                    legend: {
                        show:false
                      },
                      tooltip: { trigger: 'axis',
                        },
                      dataset: {
                        source: this.optData
                      },
                      xAxis: { type: 'category' },
                      yAxis: {},
                      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
                }
                if(this.fn){
                    this.option=this.fn(this.option);
                }
                chChart.setOption(this.option);
                window.onresize = chChart.resize;
            })
        },
    },

})