對echarts的簡單封裝

看了echarts的官網介紹：http://echarts.baidu.com/doc/example.html

看了網上人使用js對echarts的封裝：http://blog.csdn.net/xuemoyao/article/details/22602837

這篇文章雖然很好，但是感覺不是我的菜，過於復雜了。

所以獻丑也寫一下，哈

先來做一下分析，echarts提供了很多種類型的圖表，被分為幾個大類，每個大類中有若干種，可以通過對series做一些簡單的調整來互相轉化。注意，由於時間關系我並沒有分析全部的echarts圖表數據結構，而且echarts也在一直更新，所以觀點可能比較片面。

如標准折線圖添加這句話就變成面積圖

itemStyle: {normal: {areaStyle: {type: 'default'}}}

好吧，都是對圖表數據顯示樣式的修改。

然后來分析一下圖表需要的數據格式

1、折線圖，柱狀圖格式

data:[220, 182, 191, 234, 290, 330, 310]

2、餅圖、漏斗圖、儀表格式

data:[
    {value:335, name:'直接訪問'},
    {value:310, name:'郵件營銷'},
    {value:234, name:'聯盟廣告'},
    {value:135, name:'視頻廣告'},
    {value:1548, name:'搜索引擎'}
]

上面是我需要用到的一些圖的數據格式，根據我的理解，可以統一使用{key:value}這種形式保存數據，在數據傳入時判斷圖表類型在格式化成需要的樣子。另外，考慮到在一個表中顯示多個數據序列（如折線圖），所以需要給數據加一個名稱作為圖例，最終數據格式為：

{
    name:'淘寶周銷售數據',
    data:{‘周一’:1,‘周二’:5,‘周三’:4,‘周四’:3,‘周五’:9,‘周六’:6,‘周日’:2,}
}

最后經過一天的思考和設計，結果如下：

ECHelper.prototype.Line = function(data){
    //分析數據獲取x軸,暫時以第一個數據的所有key做x軸
    var xAxis = (function(dd){
        var array;
        for(var kk in dd){//取對象第一個屬性
            array = dd[kk].data;
            break;
        }
        var xaxis = [];
        for(var k in array){
            xaxis.push(k);
        }
        return xaxis;
    })(data);
    //獲取圖例和數據
    var legend = [];
    var dds = [];
    for(var k in data){
        legend.push(data[k].name);
        dds.push({name:data[k].name,type:'line',data:this.formatData(data[k].data,'array')})
    }
    //模板對象
    var opt = {
        legend: {
            data:legend
        },
        tooltip : {
            trigger: 'axis'
        },
        xAxis : [
            {
                type : 'category',
                data : xAxis
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : dds
    };
    return opt;
};

該函數的輸入對象格式為：

{
      'uid@start@end':{name,data}
}

基本上已經足夠滿足要求了。上面的方法結構已經很清晰，但是博客園不提供代碼收起功能，所以看起來模塊直接很混亂，沒辦法。封裝效果如下：