echarts

Echarts(小鲸鱼)类型：技术文档日期：2015年5月20日作者：詹国其作用：学习开发Echarts文档总结，供开发人员快速了解和开发1.概述Echarts(小鲸鱼)，大数据，Echarts助你遨游数据的海洋。（更多：图的种类多，漏斗图，仪表盘，地图；更快：20万的数据秒级渲染；更美：多种主题，个性化设置，自然流畅的动画效果）。ECharts(EnterpriseCharts商业产品图表库)，ECharts开源来自百度商业前端数据可视化团队，基于html5Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。优势：拖拽重计算，大规模数据模式直角系图表（折、柱、散点、K线）20万数据秒级出图，拥有值域漫游的功能，让你可以轻松进行数值筛选。2.关键技术2.1AMD:（AsynchronousModuleDefinition）前端技术虽然在不断发展之中，却一直没有质的飞跃。除了已有的各大著名框架，比如Dojo，JQuery，ExtJs等等，很多公司也都有着自己的前端开发框架。这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度，以及对JavaScript的熟悉程度开发一个自己会用的框架并不难，但开发一个大家都喜欢的框架却很难。从一个框架迁移到一个新的框架，开发者很有可能还会按照原有框架的思维去思考和解决问题。这其中的一个重要原因就是JavaScript本身的灵活性：框架没办法绝对的约束你的行为，一件事情总可以用多种途径去实现，所以我们只能在方法学上去引导正确的实施方法。庆幸的是，在这个层面上的软件方法学研究，一直有人在去不断的尝试和改进，CommonJS就是其中的一个重要组织。他们提出了许多新的JavaScript架构方案和标准，希望能为前端开发提供引导，提供统一的指引。AMD规范就是其中比较著名一个，全称是AsynchronousModuleDefinition，即异步模块加载机制。从它的规范描述页面看，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.2Zrender2.2.1Zrender概述Echarts底层基于Zrender，Zrender是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型。2.2.2Zrender结构MVC核心封装实现图形仓库、视图渲染和交互控制：Stroage(M):shape数据CURD管理Painter(V):canvase元素生命周期管理，视图渲染，绘画，更新控制Handler(C):事件交互处理，实现完整dom事件模拟封装shape:图形实体，分而治之的图形策略，可定义扩展tool:绘画扩展相关实用方法，工具及脚手架2.2.2Zrender特色1.简单：精简的接口方法，符合AMD标准，易学易用2.数据驱动：利用zrender绘图，只需定义图形数据3.完整的事件封装：dom事件模型去操作canvas里的图形元素，不仅可以响应zrender全局事件，甚至可以为在特定shape上添加特定事件4.高效的分层刷新：和css中zlevel的作用一样，可以定义把不同的shape分别放在不同的层中，这不仅实现了视觉上的上下覆盖，更重要的是当图形元素发生变化后的refresh将局限在发生了变化的图形层中，这在利用zrender做各种动画效果时十分有用，性能自然也更加出色5.丰富的图形选项：当前内置多种图形元素（圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、路径、文字、图片等），统一且丰富的图形属性充分满足个性化需求6.强大的动画支持：提供promise式的动画接口和常用缓动函数，轻松实现各种动画需求。7.易于扩展：分而治之的图形定义策略允许扩展自己独有的图形元素，既可以完整实现三个接口方法（brush、drift、isCover），也可以通过base派生后仅实现自己所关心的图形细节3.Echarts介绍3.1Echarts整体结构3.2Echarts支持的图表种类支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。3.3Echarts的特色具体特色展示建实例：echarts-demo/apps/feature.html1.混搭2.拖拽重计算3.数据视图4.动态类型切换5.图例开关7.数据区域选择8.多图联动9.值域漫游10．炫光特效11.动态数据添加12.标线辅助13.多维度堆积14.子区域地图模式15.标注&标线16．事件交互17.百搭时间轴3.4Echart和Highcharts对比#EchartsHighcharts柱状图（条形图）YesYes折线图（面积图）YesYes饼图（环形图）YesYes散点图（气泡图）YesYes雷达图YesYesK线图YesHighstock力导布局图YesNo和弦图YesNo#EchartsHighcharts地图YesHighmap事件河流图YesNo特色图表（如仪表盘）YesYes拖拽重计算YesNo数据视图YesNo动态类型切换YesNo值域漫游YesNo大规模散点YesNo炫光特效YesNo多图联动YesNo数据区域缩放YesYes图例开关YesYes多维度堆积YesYes混搭YesYes图片导出YesYesLicense&PricingFreeBaiduBSDNon-commercialfreeunderCC3.0Commerciallicenses$90~$36003D柱形图NOYES3D饼图NOYES绘图方式Html5的canvasSVG对于移动设备的支持pad有时会出现页面闪退较好的支持引入方式三种方式一种标签文件方式引入4.Echarts使用教程4.1源码下载：1.官方网站：特性介绍:《WhyECharts?》文档网址：源码下载方式：（1）git方式：点击网页右上角图标从git上获取。（2）直接点击网站首页下载按钮，选择最新版本下载压缩包：4.2Echarts使用3中引入方式总结4.2.1．模块化包引入：适用于熟悉模块化开发，项目本身就是模块化且遵循AMD规范的开发人员。步骤：（1）引入一个符合AMD规范的模块加载器：esl.js。直接标签引入，例如：scripttype=text/javascriptsrc=/echarts-demo/javascript/common/esl.js/script（2）需要一个包含高度和宽度的html的元素节点（div）来承载图形。说明：该html元素节点必须指定一个高度（必须指定），宽度不是必须指定，宽度和高度的给出可以是像素也可以是百分比（可计算得出）。例如：divid=mainstyle=height:400px;width:100%/div（3）为esl.js模块加载器配置echarts的路径，由于echarts是基于zrender，所以同时也需要加载zrender的模块包。例如：require.config({packages:[{name:'echarts',location:'/echarts-demo/echarts/src',main:'echarts'},{name:'zrender',location:'/echarts-demo/zrender/src',main:'zrender'}]});(4)通过require动态加载echarts然后在回调函数中开始使用，调用require的回掉函数，执行echarts接口的init（仅有一个）方法执行init时传入一个具备大小的dom节点。同一页面可在多个dom上init出多个图表，同一个dom上多次init将自动释放已有实例，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行。init方法包含两个参数：dom（必须）和theme（可选）。其中dom为图表所在节点，theme为可选的主题，内置主题（'macarons','infographic'）直接传入名称，自定义扩展主题可传入主题对象。例如：require(['echarts','echarts/chart/line','echarts/chart/bar'],function(ec){varmyChart=ec.init(document.getElementById('main'));})(5)设置图表的配置选项，包含图表实例任何可配置选项：公共选项（颜色，x轴，y轴等），组件选项（标题，详情气泡、图例、值域、数据区域、时间轴、工具箱），数据选项（nodes，links，categories）。例如：varoption={tooltip:{trigger:'axis'},legend:{data:['蒸发量','降水量']},toolbox:{show:true,feature:{mark:{show:true},dataView:{show:true,readOnly:false},magicType:{show:true,type:['line','bar']},restore:{show:true},saveAsImage:{show:true}}},calculable:true,xAxis:[{type:'category',data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月'