Echarts项目源代码分析

2024-01-15 10:00:10

2021SC@SDUSC

AxisPointer

AxisPointer为echarts中的坐标指示器，包括直角坐标以及极坐标等。

AxisPointer.js

axisPointer.js文件中注册了axisPointer对外api，主要代码如下：

echarts.registerAction({
    type: 'updateAxisPointer',
    event: 'updateAxisPointer',
    update: ':updateAxisPointer'
}, axisTrigger);

存储coordSysAxesInfo信息，主要代码如下：

echarts.registerProcessor(echarts.PRIORITY.PROCESSOR.STATISTIC, function (ecModel, api) {
    // Build axisPointerModel, mergin tooltip.axisPointer model for each axis.
    // allAxesInfo should be updated when setOption performed.
    ecModel.getComponent('axisPointer').coordSysAxesInfo
        = axisPointerModelHelper.collect(ecModel, api);
});

AxisPointerModel

AxisPointerModel通过extendComponentModel方法扩展自Component Model，重写了defaultOption属性。

AxisPointerView

AxisPointerView过extendComponentModel方法扩展自Component View，重写了render、remove以及dispose方法。

BaseAxisPointer

BaseAxisPointer为CartesianAxisPointer、PolarAxisPointer等的基类，重写了render以及renderHandler等方法。renderHandler主要是定义move、drag等情况时视图更新方法。

render主要代码：

render: function (axisModel, axisPointerModel, api, forceRender) {
    ...
    var elOption = {};
    // 调用子类的makeElOption方法
    this.makeElOption(elOption, value, axisModel, axisPointerModel, api);
    ...

    // 创建pointer
    this.createPointerEl(group, elOption, axisModel, axisPointerModel);
    // 渲染label元素
    this.createLabelEl(group, elOption, axisModel, axisPointerModel);
    ...
    updateMandatoryProps(group, axisPointerModel, true);

    // 渲染handler
    this._renderHandle(value);
}
createPointerEl: function (group, elOption, axisModel, axisPointerModel) {
    var pointerOption = elOption.pointer;
    if (pointerOption) {
        // 通过graphic创建
        var pointerEl = inner(group).pointerEl = new graphic[pointerOption.type](
            clone(elOption.pointer)
        );
        group.add(pointerEl);
    }
}
createLabelEl: function (group, elOption, axisModel, axisPointerModel) {
    if (elOption.label) {
        var labelEl = inner(group).labelEl = new graphic.Rect(
            clone(elOption.label)
        );

        group.add(labelEl);
        updateLabelShowHide(labelEl, axisPointerModel);
    }
}

CartesianAxisPointer

CartesianAxisPointer使用extend方法扩展自BaseAxisPointer，重写了makeElOption、getHandleTransform以及updateHandleTransform方法。makeElOption主要代码如下：

makeElOption: function (elOption, value, axisModel, axisPointerModel, api) {
    var axis = axisModel.axis;
    var grid = axis.grid;
    var axisPointerType = axisPointerModel.get('type');
    var otherExtent = getCartesian(grid, axis).getOtherAxis(axis).getGlobalExtent();
    var pixelValue = axis.toGlobalCoord(axis.dataToCoord(value, true));

    if (axisPointerType && axisPointerType !== 'none') {
        var elStyle = viewHelper.buildElStyle(axisPointerModel);
        var pointerOption = pointerShapeBuilder[axisPointerType](
            axis, pixelValue, otherExtent, elStyle
        );
        pointerOption.style = elStyle;
        elOption.graphicKey = pointerOption.type;
        elOption.pointer = pointerOption;
    }

    var layoutInfo = cartesianAxisHelper.layout(grid.model, axisModel);
    viewHelper.buildCartesianSingleLabelElOption(
        value, elOption, layoutInfo, axisModel, axisPointerModel, api
    );
}
var pointerShapeBuilder = {
    line: function (axis, pixelValue, otherExtent, elStyle) {
        var targetShape = viewHelper.makeLineShape(
            [pixelValue, otherExtent[0]],
            [pixelValue, otherExtent[1]],
            getAxisDimIndex(axis)
        );
        graphic.subPixelOptimizeLine({
            shape: targetShape,
            style: elStyle
        });
        return {
            type: 'Line',
            shape: targetShape
        };
    },

    shadow: function (axis, pixelValue, otherExtent, elStyle) {
        var bandWidth = Math.max(1, axis.getBandWidth());
        var span = otherExtent[1] - otherExtent[0];
        return {
            type: 'Rect',
            shape: viewHelper.makeRectShape(
                [pixelValue - bandWidth / 2, otherExtent[0]],
                [bandWidth, span],
                getAxisDimIndex(axis)
            )
        };
    }
};

echarts源码解读《三》：echarts源码之Component分析

发表于 2019-05-22 | 阅读量次 | 分类于 echarts |

分析完echarts简单的结构之后，我们就进入到了Component源码解读，在这篇博文中，我将主要介绍各Component的渲染过程以及其使用的zrender graphic。希望和小伙伴们一起进步呀！！加油！！

前言

echarts对Component的定义呢，可以认为是除Series外的其他配置项，在这篇博文中我们将探讨title（图标标题）、legend（图例组件）、AxisPointer（坐标轴指示器）、坐标系以及坐标轴这些Component。

用户通过传递option对象来设置相应的Component。

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

Model：model/Component.js 管理Component数据

View：view/Component.js 负责渲染Component视图

Model层

model/Component.js。Component扩展自Model（Model是Echarts中最基本的元素，其定义了mergeOption等方法，混合了LineStyle、AraeStyle、ItemStyle以及TextStyle），重写了init及mergeOption等方法，定义了mergeDefaultAndTheme、getDefaultOption等方法以及defaultOption（Component默认配置）、componentIndex等属性。

View层

view/Component.js。Component中定义了group等属性以及init、render、dispose等方法。

快速扩展

在echarts中定义了extendComponentModel以及extendComponentView方法，可以让Component对Model以及View进行快速扩展

export function extendComponentModel(opts) {
    return ComponentModel.extend(opts);
}

export function extendComponentView(opts) {
    return ComponentView.extend(opts);
}

Title

title是我们在使用echarts图表时设置的标题组件，简单的

码农公寓