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

该函数的输入对象格式为:

{
      ‘[email protected]@end‘:{name,data}
}

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

时间: 2024-10-07 22:21:17

对echarts的简单封装的相关文章

【实例教程】Echarts 的 Java 封装类库

Echarts 的 Java 封装类库:http://www.oschina.net/p/echarts-java 没想到喜欢Echarts 的 Java 封装类库的人还挺多,在源码中的测试例子一般目的只是构造官网例子的结构,这里写个比较实际的简单例子来演示如何写出一个图表. 首先看看Option的提示. Option说明 Option正式代码中使用,不需要任何依赖. GsonOption正式代码中可以使用,需要引入Gson包,使用toString()方法可以转换为JSON结构的数据(支持fun

echarts的简单应用之(二)饼图

接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图的数据传递方式一样,能理解柱形图就能理解折线图. Echarts官网上有实例可以查看到静态的饼图模型,这里只说后台数据的传递格式. 解释: 第一行中的代码中pie是图表的id选择器: levels: 等级的数组: brower: 是一个name,value相对应的数组,这也是饼图的数据格式的要求,当

JDBC简单封装

/** * JDBC简单封装 * 需要借助FastJsonUtil可以参考上一篇 * @author huangxincheng * */ public class BaseDao { private static String URL; private static String USERNAME; private static String PASSWORD; private static String DRIVER; private  Connection connection; priv

对系统网络请求进行简单封装

AGConnectionNet对系统网络请求进行简单封装,可便利的进行网络请求,并将数据解析与网络请求封装在同一方法下,使用更加便利(JSON 解析采用自身解析方法, XML 解析采用第三方 ReadXML 进行解析). 方法具体参数说明 初始化方法:/*** 类方法,实例化当前数据请求对象 (单例)** @return 当前请求对象*/+ (instancetype)shareRequestData; 仅进行请求数据方法/*** 请求数据 (session 请求)** @param URLSt

iOS sqlite 增删改查 简单封装(基于 FMDB)

/** *  对 sqlite 的使用进行简单封装,仅涉及简单的单表 增删改查 * *  基于 FMDB * *  操作基于 model ,数据库表字段与 model 属性一一对应,对 model 整体进行操作 * *  根据 model 对象自动建表,字段类型只支持 NSString , NSIteger , float * *  用到 runtime 运行时获取 model 属性 * */ 1 // 2 // AGDatabaseManager.h 3 // 4 // Created by

简单封装sqlite3 实现实体对象与关系型数据库的相关操作【IOS】

源码如下,只有一个类文件 // //  DBHelper.h // //  Created by Jason_Msbaby on 15/10/15. //  Copyright ? 2015年 张杰. All rights reserved. // /**  *  简单封装了对于sqlite的使用 没有加入对事务及其他复杂的特性     基于传入sql语句的方式进行执行     使用单例模式     根据model对象自动创建表 只支持 NSInter NSString float 数据类型的支

httpclient4.3简单封装

对httpclient4.3版本的一个简单封装,下面是代码 /**  * httputil工具类  *   * @author rex  */ public class HttpUtil {     private static CloseableHttpClient client;     private static BasicCookieStore cookieStore;     private static HttpGet get;     private static HttpPos

MySQL的C++简单封装

/* *介绍:MySQL的简单封装,支持流操作输入输出MySQL语句,然而并没有什么软用,大二学生自娱自乐,有不足求指点 *作者:MrEO *日期:2016.3.26 */ 头文件 my_sql.h 1 #ifndef MY_SQL_H 2 #define MY_SQL_H 3 4 #include <mysql.h> 5 #include <iostream> 6 #include <string> 7 #include <iomanip> 8 9 cla

Android ToolBar 的简单封装

使用过 ToolBar 的朋友肯定对其使用方法不陌生,因为其用法很简单,如果对 ActionBar 使用比较熟练的人来说,ToolBar 就更容易了!不过,相信大家在使用的过程中都遇到过这样一个问题,需要在每一个我们要使用的 xml 中添加 ToolBar 这个控件,比如我需要在 MainActivity中使用 ToolBar,则他的 xml 文件需要这样写, <RelativeLayout xmlns:android="http://schemas.android.com/apk/res