app-big-data/component/chart/bar-chart.js

(function () {
    Vue.component('bar-chart', {
        template: '<div class="chart_box" >\
                        <div v-show="!isEmpty" :id="chartid" class="chart_box"></div>\
                        <div class="noData" v-show="isEmpty" class="chart-no-data">\
                            <p v-show="isEmpty" style="text-align: center">{{title}}</p>\
                            <img src="../../bigData/images/noData.png" alt="">\
                            暂无数据\
                        </div>\
                    </div>',
        props: ['config'],
        data: function () {
            return {
                chartid: _.uniqueId("chart_"),
                chart: null,
                isEmpty: false,
                title:''
            }
        },
        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) {
            	var vm = this;
                if(!options)return
                var options = $.extend({}, defaults, options);
				vm.chart.on('click', function (param){
                   vm.$emit('click-item', {param:param});
       			});
    
                return options
            }
        },
        watch: {
            config: function (data) {
                if (data) {
                    if(!data.series[0].data){
                        this.isEmpty = true;
                        this.title =data.title && data.title.text;  //无数据时渲染的标题  
                    }else if(data.series[0].data.length == 0){
                        this.isEmpty = true;
                        this.title =data.title && data.title.text;  //无数据时渲染的标题  
                    }else{
                        this.isEmpty = false;
                    }
                    this.chart.setOption(this.setOption(data));
                }
            }
        }
    })
    var  defaults = {

    }
})()