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 v-show="isEmpty" class="chart-no-data noData">\
                            <p v-show="isEmpty" style="text-align: center">{{title}}</p>\
                            <img src="../../bigData/images/noData.png" alt="">\
                            暂无数据\
                        </div>\
                    </div>',
        props: ['config','legend'],
        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
            },
            getByteLen:function(val) {
                var len = 0;
                for (var i = 0; i < val.length; i++) {
                    var a = val.charAt(i);
                    if (a.match(/[^\x00-\xff]/ig) != null) {
                        len += 2;
                    } else {
                        len += 1;
                    }
                }
                return len;
            },
            createLegend:function() {
                var top = '';
                //  if(this.isbig){
                //   top='15%'
                //  }
                var showPercentArr = [] //用来获取每个图例对应的数据
                var total = 0 //总数用来计算百分比  因为formatter拿不到
                var maxStr = 0; //取最长的那个的长度 用来对齐
                var percent = 0; //临时变量  最后一个用1减去这个
                var legengdArr = []; //临时变量  最后一个用1减去这个
                var vm = this;
                this.config.series[0].data.map(function(v){
                    maxStr = Math.max(maxStr, vm.getByteLen(v.name.toString()))
                    total += Number(v.value);

                })

                showPercentArr = this.config.series[0].data.map(function(v, i, arr) {
                    var nowPercent = 0
                    if (total && i != arr.length - 1) {
                        nowPercent = Math.round((v.value / total * 100));
                        percent += nowPercent
                        if (percent >= 100) {

                            nowPercent = nowPercent - (percent - 100)
                            percent = 100
                        }

                        v.percent = nowPercent
                        v.p = nowPercent + '%'


                    }

                    if (i == arr.length - 1) {
                        v.percent = 100 - percent
                        v.p = (100 - percent) + '%'
                    }
                    if (!total || total == 0) {
                        v.p = '0'
                        v.percent = 0
                        v.nofilter = true
                    }
                    return v
                })
                legengdArr = showPercentArr.filter(function(v){
                    return Number(v.percent) != 0 || v.nofilter
                }).map(function(v) {
                    return v.name
                })

                if (this.config.series && !this.config.listLegend && !this.config.smallPie) {
                    return {
                        data: legengdArr,
                        // top: 30,
                        // top: 'bottom',
                        bottom:10,
                        orient: 'vertical',
                        textStyle: {
                            color: ['#b5e1fc']
                        },
                        // right: this.config.leR || 10,
                        // left: this.config.leL || '55%',
                        // align:'right',
                        formatter: function(name) {
                            // 
                            var str = '',
                                n = maxStr - vm.getByteLen(name);

                            // for(var c=0;c<n;c++){
                            //   str +=''
                            // }
                            showPercentArr.map(function(v) {
                                if (v.name == name) {
                                    str += v.p
                                }
                            })
                            return name + '   ' + str
                        }
                    };
                } else {
                    return {
                        data: legengdArr,
                        top: 30,
                        formatter: function(name) {
                            // 
                            var str = '',
                                n = maxStr - vm.getByteLen(name);

                            // for(var c=0;c<n;c++){
                            //   str +=''
                            // }
                            showPercentArr.map(function(v) {
                                if (v.name == name) {
                                    str += v.p
                                }
                            })
                            return name + '   ' + str
                        }
                    }
                }
                return {};
            },
            showSpecificLegends: function(arr) {
                let selected = {};
                let option = this.chart.getOption()
                let legend = option.legend[0]
                if (legend && legend.data) {
                    _.each(legend.data, function (name) {
                        selected[name] = _.indexOf(arr, name) > -1
                    })
                    legend.selected = selected;
                }
                this.chart.setOption(option);
            },
            hasData:function() {
                let series = this.config.series
                let data = []
                _.each(series, function(o){
                    data = data.concat(o.data)
                })

                return data.length
            },
            smallPie(option) { //太小的格子数字展示就在里面吧
                // option.series[0].label = {
                //   normal: {
                //     position: 'inner',
                //     formatter: '{d}%'
                //   }
                // }
                // option.series[0].labelLine = {
                //   normal: {
                //     show: false
                //   }
                // }
                option.series[0].radius = ['30', '50%'];
                option.series[0].center = ['50%', '60%'];
            }
        },
        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;
                    }
                    if(this.legend){
                        data.legend = this.createLegend();
                    }
                    this.chart.setOption(this.setOption(data));
                }
            }
        }
    })
    var  defaults = {

    }
})()