eCharts总体架构:
eCharts的底层库 Zrender,用面向对象的方式把实体抽象成为图形元素,调用 Canvas API设置样式,然后构建路径,进行图形元素渲染。
M - 数据管理层(storage),负责存储元素,进行增删改查。
C – 控制层(handle),负责事件处理,重要是是监听事件的作用坐标。
V – 视图层(painter),负责绘图操作,canvas元素生命周期管理,视图渲染,更新控制。
eCharts前端初始化流程:
1、为eCharts准备一个具备大小(宽高)的Dom
<div id="main" style="width: 600px;height:400px;"></div>
2、基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'),‘null’,{renderer:‘svg’});
3、指定图表的配置项和数据
var option = { … }
4、使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
eCharts初始化底层实现关键步骤:
1.获取并记录dom成全局变量:__DEV__。
2.校验当前dom上是否存在Echarts图表实例: getInstanceByDom(dom)
3.创建一个图表实例 :new ECharts(dom, theme, opts)
1)调用载ZRender绘图引擎,创建一个实例zr:zrender.init()
a)根据参数选用canvas或GVG渲染器:renderer
b)根据参数配置图表分辨比:devicePixelRatio
c)根据参数配置图表尺寸:width、height
2)做一个事件监听(信息中心):new EventProcessor()
3)准备图表和组件的视图实例 :prepareView()
a)根据系列类型选择模型:doPrepare()
b)创建视图实例:new Clazz( )
4)根据配置项注册图表项
a)注册主题:registerTheme()
b)注册选项预处理器:registerPreprocessor()
c)注册处理器:registerProcessor()
d)注册坐标系统:registerCoordinateSystem()
e)注册图表布局:registerLayout()
f)注册图表行为:registerAction()
g)注册视图:registerVisual()
5)渲染组件:renderComponents()
6)渲染每个图表:renderSeries()
a)数据渲染:zr.storage.getDisplayList()
b)更新覆盖层状态updateHoverLayerStatus()
7)为实例初始化鼠标事件:initEvents()
8)启用连接,进行状态设置等:enableConnect(chart);
说明:本文仅为个人解读,欢迎指正