echarts..docxVIP

Echarts(小鲸鱼)类型：技术文档日期：2015年5月20日作者：詹国其作用：学习开发Echarts文档总结，供开发人员快速了解和开发1.概述Echarts(小鲸鱼)，大数据，Echarts助你遨游数据的海洋。（更多：图的种类多，漏斗图，仪表盘，地图；更快：20万的数据秒级渲染；更美：多种主题，个性化设置，自然流畅的动画效果）。ECharts (Enterprise Charts 商业产品图表库)，ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。优势：拖拽重计算，大规模数据模式直角系图表（折、柱、散点、K线）20万数据秒级出图，拥有值域漫游的功能，让你可以轻松进行数值筛选。2.关键技术2.1AMD:（Asynchronous Module Definition）前端技术虽然在不断发展之中，却一直没有质的飞跃。除了已有的各大著名框架，比如Dojo，JQuery，ExtJs等等，很多公司也都有着自己的前端开发框架。这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度，以及对JavaScript的熟悉程度开发一个自己会用的框架并不难，但开发一个大家都喜欢的框架却很难。从一个框架迁移到一个新的框架，开发者很有可能还会按照原有框架的思维去思考和解决问题。这其中的一个重要原因就是JavaScript本身的灵活性：框架没办法绝对的约束你的行为，一件事情总可以用多种途径去实现，所以我们只能在方法学上去引导正确的实施方法。庆幸的是，在这个层面上的软件方法学研究，一直有人在去不断的尝试和改进，CommonJS就是其中的一个重要组织。他们提出了许多新的JavaScript架构方案和标准，希望能为前端开发提供引导，提供统一的指引。AMD规范就是其中比较著名一个，全称是Asynchronous Module Definition，即异步模块加载机制。从它的规范描述页面看，AMD很短也很简单，但它却完整描述了模块的定义，依赖关系，引用关系以及加载机制。从它被requireJS，NodeJs，Dojo，JQuery使用也可以看出它具有很大的价值，没错，JQuery近期也采用了AMD规范.作为一个规范，只需定义其语法API，而不关心其实现。AMD规范简单到只有一个API，即define函数：define([module-name?], [array-of-dependencies?], [module-factory-or-object]);其中：module-name: 模块标识，可以省略。array-of-dependencies: 所依赖的模块，可以省略。module-factory-or-object: 模块的实现，或者一个JavaScript对象。从中可以看到，第一个参数和第二个参数都是可以省略的，第三个参数则是模块的具体实现本身。后面将介绍在不同的应用场景下，他们会使用不同的参数组合。从这个define函数AMD中的A：Asynchronous，我们也不难想到define函数具有的另外一个性质，异步性。当define函数执行时，它首先会异步的去调用第二个参数中列出的依赖模块，当所有的模块被载入完成之后，如果第三个参数是一个回调函数则执行，然后告诉系统模块可用，也就通知了依赖于自己的模块自己已经可用。AMD 规范是JavaScript开发的一次重要尝试，它以简单而优雅的方式统一了JavaScript的模块定义和加载机制，并迅速得到很多框架的认可和采纳。这对开发人员来说是一个好消息，通过AMD我们降低了学习和使用各种框架的门槛，能够以一种统一的方式去定义和使用模块，提高开发效率，降低了应用维护成本。2.2 Zrender2.2.1 Zrender概述Echarts底层基于Zrender，Zrender是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型。2.2.2 Zrender结构MVC核心封装实现图形仓库、视图渲染和交互控制：Stroage(M) :?shape数据CURD管理Painter(V) :?canvase元素生命周期管理，视图渲染，绘画，更新控制Handler(C) :?事件交互处理，实现