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

eCharts总体架构：

eCharts的底层库 Zrender，用面向对象的方式把实体抽象成为图形元素，调用 Canvas API设置样式，然后构建路径，进行图形元素渲染。

M - 数据管理层（storage），负责存储元素，进行增删改查。

C – 控制层（handle），负责事件处理，重要是是监听事件的作用坐标。

V – 视图层（painter），负责绘图 *** 作，canvas元素生命周期管理，视图渲染，更新控制。

eCharts前端初始化流程：

1、为eCharts准备一个具备大小（宽高）的Dom

      <div id="main" style="width: 600pxheight: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)

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

步骤如下：

方式一：官网下载引用

<script src="echarts.min.js"></script>

方式二：npm 安装

npm install echarts --saveimport echarts from 'echarts'// echarts = require('echarts')

方式三：CDN 引入

使用jsDelivr (https://www.jsdelivr.com/)

<scriptsrc="https://cdn.jsdelivr.net/npm/echarts@4.9.0/echarts.all.js"></script>

或者BootCDN (https://www.bootcdn.cn/)

<scriptsrc="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/echarts.js"></script>

1、使用代码如下（示例）：// HTML<div id="my-chartID"></div>// js//

2、基于准备好的dom，初始化echarts实例

let myChart = echarts.init(document.getElementById('my-chartID'))//

3、数据加载是显示加载动画myChart.showLoading({maskColor:'rgba(255, 255, 255, 0)',textColor: 'white'})//

4、数据加载Ajax/Axios// 加载完毕(注意异步请求myChart.hideLoading

很高兴，最近我也使用了EChartsECharts提供的用法中，require是作为模块化加载的入口，如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话，那么，就可以使用require()初始化ECharts。你贴出来的链接这篇文章，正式介绍如何使用模块化加载ECharts。如果你不使用模块化，ECharts也提供相应的方法初始化。首先，下载到源码之后，在页面引入lib/echarts-plain-map.js，plain-map是未压缩的版本1然后引入主文件之后，就可以直接使用init()实例化了

---