(function () {
    Vue.component('bar-chart', {
        template: '<div class="chart_box" >\
                        <div :id="chartid" class="chart_box"></div>\
                    </div>',
        props: ['config'],
        data: function () {
            return {
                chartid: _.uniqueId("chart_"),
                chart: null,
            }
        },
        mounted: function () {
            var that =this;
            this.$nextTick(function () {
                that.chart = echarts.init(document.getElementById(that.chartid));
                if (that.config) {
                    that.chart.setOption(that.setOption( that.config));
                }
            })

        },

        methods: {
            setOption: function (options) {
                if(!options)return
                var options = $.extend({}, defaults, options);

    
                return options
            }
        },
        watch: {
            config: function (data) {
                if (data) {
                    this.chart.setOption(this.setOption(data));
                }
            }
        }
    })
    var  defaults = {

    }
})()