我的学习笔记12.21

2021SC@SDUSC

echarts源码分析

Series渲染过程

---

Scatter 散点图

ScatterSeries

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

ScatterView

ScatterView通过extendChartView方法扩展自Chart View，重写了render、updateTransform等方法，主要实现代码如下：

render: function (seriesModel, ecModel, api) {
    var data = seriesModel.getData();
    // 绘制散点图symbol
    // 通过SymbolDraw/LargeSymbolDraw绘制
    var symbolDraw = this._updateSymbolDraw(data, seriesModel);
    symbolDraw.updateData(data);
    this._finished = true;
}
_updateSymbolDraw: function (data, seriesModel) {
    var symbolDraw = this._symbolDraw;
    var pipelineContext = seriesModel.pipelineContext;
    var isLargeDraw = pipelineContext.large;

    if (!symbolDraw || isLargeDraw !== this._isLargeDraw) {
        symbolDraw && symbolDraw.remove();
        symbolDraw = this._symbolDraw = isLargeDraw
            ? new LargeSymbolDraw()
        : new SymbolDraw();
        this._isLargeDraw = isLargeDraw;
        this.group.removeAll();
    }

    this.group.add(symbolDraw.group);

    return symbolDraw;
}

---

Radar 雷达图

RadarSeries

RadarSeries通过extend