ZRender强大的二维绘图引擎，一个轻量级的Canvas类库，使用MVC封装，数据驱动，提供类Dom事件模型，让Canvas绘图大不同。
Architectu
MVC核心封装实现图形仓库、视图渲染和交互控制：
Stroage(M):shape数据CURD管理Painter(V):canvas元素生命周期管理，视图渲染，绘画，更新控制Handler(C):事件交互处理，实现完整dom事件模拟封装shape:图形实体，分而治之的图形策略，可定义扩展tool:绘画扩展相关实用方法，工具及脚手架
特色
简单
无需Canvas基础，精简的接口方法，符合AMD标准，易学易用。
qui([znder/znder],function(znder){//justinittogetaznderInstancevarzr=znder.init(document.getElementById(main));//zrcanbeusednow!...});
数据驱动
利用znder绘图，你只需做的是定义图形数据，剩下的事情就交给znder，只要在你定义图形数据时设置draggable属性为true，图形拖拽就已经可用了。
zr.addShape({shape:circle,style:{x:,y:,r:50,color:rgba(0,0,60,0.8)}});zr.nder();
完整的事件封装
用你再熟悉不过的dom事件模型去操作canvas里的图形元素是件很cool的事情，你不仅可以响应znder全局事件，你甚至可以为在特定shape上添加特定事件，后续发生的一切都会按你想的那样去运行。
zr.addShape({shape:circle,style:{...},//图形元素上绑定事件onmouseover:function(params){concole.log(catchyou!)}});//全局事件zr.on(click,function(params){alert(Hello,znder!)});
高效的分层刷新
正如css中zlevel的作用一样，你可以定义把不同的shape分别放在不同的层中，这不仅实现了视觉上的上下覆盖，更重要的是当图形元素发生变化后的fsh将局限在发生了变化的图形层中，这在你利用znder做各种动画效果时将十分有用，性能自然也更加出色。
zr.addShape(shapeA);//shapeA.zlevel=0;(default)zr.addShape(shapeB);//shapeB.zlevel=1;zr.nder();zr.modShape(shapeB.id,{color:d});//Dontworry!Ismerge!zr.fsh();//Justthelevel1canvashasbeenfsh~
丰富的图形选项
当前内置多种图形元素（圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、路径、文字、图片等），统一且丰富的图形属性充分满足你的个性化需求。
varmyShape={shape:circle,//sector
ring
ctangle
...zlevel:1,style:{...//color
strokeColor
text
textFont
...},draggable:true};
强大的动画支持
提供promise式的动画接口和常用缓动函数，轻松实现各种动画需求。
varcircle={shape:circle,id:zr.newShapeId(),style:{x:0,y:0,r:50}};zr.addShape(circle);zr.animate(circle.id).when(0,{position:[,]}).when(,{rotation:[Math.PI*,0,0]}).start();
易于扩展
分而治之的图形定义策略允许你扩展自己独有的图形元素，你既可以完整实现三个接口方法（brush、drift、isCover），也可以通过base派生后仅实现你所关心的图形细节。
functionMyShape(){...}varshape=qui(znder/shape);shape.define(myShape,newMyShape());//defineyourshapezr.addShape({//anduseit!shape:myShape,...});
开始使用ZRender
ZRender是二维绘图引擎，它提供Canvas、SVG、VML等多种渲染方式。ZRender也是ECharts的渲染器。
下载ZRender
ZRender项目在GitHub上的地址是：