我的学习笔记12.15

2021SC@SDUSC

echarts源码分析

 Series渲染过程

在ECharts中用 series表示各类图表。有line（折线图）、bar（柱状图）、pie（饼图）等Series。用户通过传递option对象来设置相应的Series。

在这部分中echarts采用了Model以及View的架构来管理Series：

Model层：model/Series.js 管理Series数据。
View：view/Charts.js 负责渲染Chart视图。

---

Line 折线图

LineSeries

LineSeries通过extend方法扩展自Series Model，重写了defaultOption属性以及getInitialData方法。

LineView

LineView通过extend方法扩展自Chart View，重写了init、render、highlight及downplay等方法，主要代码如下：

init: function () {
    var lineGroup = new graphic.Group();
    // 使用SymbolDraw绘制Symbol
    var symbolDraw = new SymbolDraw();
    this.group.add(symbolDraw.group);

    this._symbolDraw = symbolDraw;
    this._lineGroup = lineGroup;
},
render: function (seriesModel, ecModel, api) {
    ...
    if (
        !(polyline && prevCoordSys.type === coordSys.type && step === this._step)
    ) {
        // 折线图
        // symbolDraw绘制symbol
        showSymbol && symbolDraw.updateData(data, {
            isIgnore: isIgnoreFunc,
            // createClipShape创建方法分为极坐标createPolarClipShape以及直角坐标createGridClipShape
            // createPolarClipShape：通过graphic.Sector创建Clip区域
            // createGridClipShape：通过graphic.Rect创建Clip区域
            clipShape: createClipShape(coordSys, false, true, seriesModel)
        });