eCharts源码浅读 - 初始化关键步骤

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);

说明：本文仅为个人解读，欢迎指正