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 = echartsinit(documentgetElementById('main')，‘null’，{renderer：‘svg’});

3、指定图表的配置项和数据

       var option = { … }

4、使用刚指定的配置项和数据显示图表。

     myChartsetOption(option);

eCharts初始化底层实现关键步骤：

1获取并记录dom成全局变量：__DEV__。

2校验当前dom上是否存在Echarts图表实例： getInstanceByDom(dom)

3创建一个图表实例 ：new ECharts(dom, theme, opts)

    1)调用载ZRender绘图引擎，创建一个实例zr：zrenderinit（）

        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)数据渲染：zrstoragegetDisplayList()

        b)更新覆盖层状态updateHoverLayerStatus（）

    7)为实例初始化鼠标事件：initEvents（）

    8)启用连接，进行状态设置等：enableConnect(chart);

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

矩形树图用于描述考察对象之间数据指标的相对占比关系。维度值基于指标的占比结果进行分布显示，用突出、放大等效果进行数据结果表达，多用于维度值的分布。

仪表盘可以清晰地展示出某个指标值所在的范围。您可以直观地查看当前任务的完成程度或某个数据是否超出预期。例如，通过仪表盘展示某一类商品的库存状态，可以看到库存充足还是需要补货。

仪表盘由指针角度/度量组成，指针角度只能选择1个度量，例如折扣点和利润金额。

1无数据时展示方式

2数据加载中展示方式

3折线图图表

4显示当前效果

5支持4中显示效果及具体某个点数据显示 同时支持

6图例-底部居中

7多条折线-循环series

8双x轴-xAxis[{},{}]

以上就是关于eCharts源码浅读 - 初始化关键步骤全部的内容，包括:eCharts源码浅读 - 初始化关键步骤、echarts图表——矩形树图&仪表盘、vue使用echarts总结等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！