对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}

}

基本上已经足够满足要求了。上面的方法结构已经很清晰，但是博客园不提供代码收起功能，所以看起来模块直接很混乱，没办法。封装效果如下：

巴特西

对echarts的简单封装

最新文章

热门文章