js對象規劃

js代碼太多，需要復用，相當于類Class。
如：內容組織類/圖文組件類（基本類）/圖表組件類

效果

圖片.png

使用

 var data = [
        ['javascript',0.4,'#ff7676'],
        ['java',0.122,'#ff7676'],
        ['c',0.22,'#ff7676'],
        ['c#',0.62,'#ff7676'],
        ['php',0.32,'#ff7676']
    ] //數據
    var cfg = {sortType:'default'}; // 配置
    // 構造函數實例化
    var c = new ChartBar($('.cb'),data,cfg);
    c.init();
    c.updateArr(data).init();// 更新數據
    c.updateSortType(type).init;// 更新排序

代碼

/**
 * 柱狀圖
 * @param parent jQuery dom 父元素（生成的柱狀圖的父元素）
 * @param data 鑲套arr格式數據 [['javascript',0.4,'#ff7676'],['java',0.6]] （名稱，占比，顏色（可忽略））
 * @param cfg 配置數據 參考代碼中數據
 * @constructor
 * @mehod init 實例化對象之后需要init初始化，柱狀圖展示 （視圖層）
 * @mehod updateArr 更新展示數據，格式同上 （數據層 需init）
 * @mehod updateSortType 調整實例的排序方式 max/min/default（數據層 需init）
 * @mehod returnMaxFloat 獲得最大占比
 */
var ChartBar = function ( parent , data , cfg) {

    parent = ( parent instanceof jQuery)?parent:$('body');
    data = ( data instanceof Array)?data:[['數據失效',1,'#ff7676']];
    cfg = cfg || {};

    this.setting = $.extend({},{
        css:{
            backgroundColor:'#99c0ff', // 默認百分比背景顏色
        },
        maxPreWidth:200,
        sortType:'default',// default/max/min
    },cfg)
    this.parent = parent;
    this.cfg = cfg; // 傳入的配置文件
    this.id = ('sz_chart_bar_' +Date.now()); // 實例化柱狀圖的id
    console.log(this.setting);
    this.updateArr(data);

    var $component = $('<ul id="'+this.id+'" class="sz_chart_bar">');
    $component.appendTo(this.parent);
    $component.on(this.id+'_load',function () {
        setTimeout(function () {
            $component.find('.bg').css('width','100%');
            $component.find('.sz_chart_bar_per').css('opacity','1')
        },10)
    })

}
ChartBar.prototype = {
    // ui結構構造 視圖層 繪制圖層
    init : function () {
        var $component = $('#'+this.id).empty();
        var setting = this.setting;
        var max = this.returnMaxFloat();
        max = (max == 0) ? 1 : max;

        $.each(this.sortArr,function(idx,item){
            var line = $('<li class="sz_chart_bar_item">');
            var name = $('<em class="sz_chart_bar_title">');
            var rate = $('<div class="sz_chart_bar_percent">');
            var per = $('<em class="sz_chart_bar_per">');
            var bgStyle = 'style="background-color:'+ ( item[2] || setting.css.backgroundColor) +'"';
            rate.html( '<div class="bg" '+bgStyle+'></div>' );
            rate.css('width', item[1]/max * setting.maxPreWidth + 'px' );
            name.text( item[0]);
            per.text( (new Number(item[1]*100)).toFixed(2) + '%');
            line.append( name ).append( rate ).append( per );
            $component.append(line);
        });
        $component.trigger(this.id+'_load');
        return this;
    },
    // 數據層 更新數據
    updateArr :function( data ){
        data = ( data instanceof Array)?data:[['數據失效',1,'#ff7676']];
        this.arr = data;
        this.sortArr = data;
        this.updateSortType();
        return this;
    },
    // 數據層 數據排序
    updateSortType:function ( sortType ) {
        var type ;
        if(sortType){
            this.setting.sortType = sortType;
        }
        type = this.setting.sortType;
        if(type == 'default'){
            this.sortArr = this.arr;
        }else{
            var oldArr = this.arr.concat();
            this.sortArr = oldArr.sort(function (a,b) {
                if( type != 'max' ){
                    return a[1] - b[1];
                }
                return b[1] - a[1];
            })
        }
        return this;
    },
    // 返回最大值
    returnMaxFloat :function(){
        var max = 0;
        this.sortArr.forEach(function (item) {
            if(item[1]>max){
                max = item[1]
            }
        })
        return max;
    }
}

.sz_chart_bar{
    margin: 0 auto;
}
.sz_chart_bar_item{
    display: block;
    vertical-align: middle;
}
.sz_chart_bar_title,.sz_chart_bar_percent,.sz_chart_bar_per{
    display: inline-block;
    position: relative;
    font-size: 12px;
    line-height: 32px;
    height: 32px;
    vertical-align: middle;
}
.sz_chart_bar_title{
    width: 80px;
    text-align: right;
    padding: 0 10px;
}
.sz_chart_bar_percent{
    width: 0;
    height: 15px;
}
.sz_chart_bar_percent .bg{
    width: 0;
    height: 15px;
    border-radius: 4px;
    transition: width 3s;
}
.sz_chart_bar_per{
    padding: 0 7px;
    opacity: 0;
    transition: opacity 0.5s 1.6s;
}