我的学习笔记12.8

2021SC@SDUSC

echarts源码分析

各个Component的渲染过程

在echarts中，Component（组件）是除Series（图表）外的其他配置项，有datazoom（区域缩放）、visualMap（视图映射）、tooltip（提示框组件）、toolbox（工具栏）、brush（区域选择组件）、timeline（时间轴）、graphic（原生图形组件）、dataset（数据集）、marker（包括markPoint（图标标注）、markLine（图表标线）、markArea（图表标域）等。用户通过传递option对象来设置相应的Component。

这篇文章中将介绍tooltip、dataZoom、visualMap这三项常用的组件。

---

区域缩放 DataZoom

dataZoom分为inside和slider两种类型。

公共文件

DataZoomModel通过extendComponentModel扩展自Component Model，重写了defaultOption属性以及init、mergeOption等方法。

DataZoomView通过extend扩展自Component View，重写了render方法并定义了getTargetCoordInfo方法。

Slider

SliderZoomModel通过extend扩展自DataZoomModel，重写了defaultOption属性

SliderZoomView通过extend扩展自DataZoomView，重写了render、remove、dispose等方法，主要实现代码如下：

render: function (dataZoomModel, ecModel, api, payload) {
    // 调用DataZoomView中的render方法
    SliderZoomView.superApply(this, 'render', arguments);
    ...
    if (!payload || payload.type !== 'dataZoom' || payload.from !== this.uid) {
        // 绘制
        this._buildView();
    }
    // 更新
    this._updateView();
}
_buildView: function () {
    var thisGroup = this.group;

    thisGroup.removeAll();

    this._resetLocation();
    this._resetInterval();

    var barGroup = this._displayables.barGroup = new graphic.Group();

    // 绘制背景，通过graphic.Rect绘制背景，包括可视层以及Click panel
    this._renderBackground();
    // 绘制handle，通过graphic.Rect绘制选择的区域，并绑定拖拽相关以及mouseover