Echart架构解析
前言
本文章主要介绍EChart整体的架构设计，以及源码中关键的代码部分，用于简单对EChart的设计以及工作概念有个简单的入门理解，所以不会讲到太深入源码地方，帮助想了解EChart的同学入门。
Echart架构图
Echart底层依赖矢量图形库ZRender，基于ZRender之上做了更高层次的抽象，定义出了以下三种元素：
- Series
- Coordinates
- Components
整体构成了下述的图表：
基石：ZRender
GitHub – ecomfe/zrender: A lightweight graphic library providing 2d draw for Apache ECharts
ZRender是二维绘图引擎，它提供Canvas、SVG、VML 等多种渲染方式。基于这些之上定义了如下几个概念：
- animation 定义动画
- graphic 定义图形
- mvc 定义模式
- 统一UI Event（封装多平台操作差异）
- 多种渲染引擎（Canvas/SVG/WebGL）
- 辅助工具库等
其中最核心的是定义图形：
于是乎，你在你就可以通过简单的几行代码画圆形了
var zr = zrender.init(document.getElementById('main'));
var circle = new zrender.Circle({
shape: {
cx: 150,
cy: 150,
r: 40
},
style: {
fill: 'none',
stroke: '#F00'
}
});
zr.add(circle);
<< · Back Index ·>>
上一篇
下一篇