看了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的简单封装的更多相关文章

  1. Echarts 的 Java 封装类库 转自 https://my.oschina.net/flags/blog/316920

    转自: https://my.oschina.net/flags/blog/316920 Echarts 的 Java 封装类库:http://www.oschina.net/p/echarts-ja ...

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

    接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图 ...

  3. Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池

    前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...

  4. FMDB简单封装和使用

    工具:火狐浏览器+SQLite Manager插件 ; Xcode; FMDB库; 效果: 项目地址: https://github.com/sven713/PackFMDB 主要参考这两篇博客: 1 ...

  5. Android--Retrofit+RxJava的简单封装(三)

    1,继续接着上一篇的讲讲,话说如果像上一篇这样的话,那么我们每一次请求一个结构都要创建一堆的Retrofit对象,而且代码都是相同的,我们可以试试封装一下 先创建一个HttpMethods类,将Ret ...

  6. okhttp3 get post 简单封装

    最近打算在新项目中使用 okhttp3, 简单封装了一下异步 get post 因为 CallBack 也是在子线程中执行,所以用到了 Handler public class MyOkHttpCli ...

  7. python网页请求urllib2模块简单封装代码

    这篇文章主要分享一个python网页请求模块urllib2模块的简单封装代码. 原文转自:http://www.jbxue.com/article/16585.html 对python网页请求模块ur ...

  8. 对pymysql的简单封装

    #coding=utf-8 #!/usr/bin/python import pymysql class MYSQL: """ 对pymysql的简单封装 "& ...

  9. iOS开发——UI篇OC篇&UITableView简单封装

    UITableView简单封装 UITableView时iOS开发中使用最多也是最重的一个UI空间,其实在App Store里面的%80以上的应用都用到了这个控件,所以就给大家介绍一下,前面的文章中也 ...

随机推荐

  1. underscorejs-filter学习

    2.6 filter 2.6.1 语法: _.filter(list, predicate, [context]) 2.6.2 说明: 对list集合的每个成员依次进行匹配(根据predicate迭代 ...

  2. jQuery 如何创建基本插件(翻译)

    有时候,你希望有一块功能在整个代码当中都可以使用.例如,你可能想要有一个单一的方法可以在jQuery选择器上进行调用,用于处理该选择器上的一系列操作.又或许你编写了一个十分有用的工具函数,并希望能够简 ...

  3. Python学习笔记 :01概述

    Python基础 首先推荐学习Python基础的教程和书籍 视频教程推荐南京大学张莉老师在cousera上的教程用Python玩转数据 入门教程<Python基础教程> 数据挖掘教程< ...

  4. iOS程序-UIScrollView的基本使用

    iOS程序-UIScrollView的基本使用 scrollView的几个属性contentSize contentOffset contentInset 1.不能向上滑动很可能是因为contentS ...

  5. UE标签排列方式

        UE是一款很顺手的文件编辑软件.打开文本,都会有个标签.根据个人喜好,我喜欢标签都展开,方便快速选取指定文本. 设置如下: 高级>配置>应用程序布局>可停靠窗口>类型 ...

  6. windows下和linux下 Redis 安装

    Redis 是一个高性能的key-value数据库, 使用内存作为主存储,数据访问速度非常快,当然它也提供了两种机制支持数据持久化存储.比较遗憾的是,Redis项目不直接支持Windows,Windo ...

  7. Linux下Apache PHP MYSQL 默认安装路径

    apache: 如果采用RPM包安装,安装路径应在 /etc/httpd目录下apache配置文件:/etc/httpd/conf/httpd.confApache模块路径:/usr/sbin/apa ...

  8. BZOJ1715: [Usaco2006 Dec]Wormholes 虫洞

    1715: [Usaco2006 Dec]Wormholes 虫洞 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 475  Solved: 263[Sub ...

  9. BZOJ1782: [Usaco2010 Feb]slowdown 慢慢游

    1782: [Usaco2010 Feb]slowdown 慢慢游 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 541  Solved: 326[Sub ...

  10. BZOJ2718: [Violet 4]毕业旅行

    2718: [Violet 4]毕业旅行 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 229  Solved: 126[Submit][Status ...