我的学习笔记11.29

2021SC@SDUSC

echarts源码分析之坐标系

坐标系

Grid 直角坐标系

Grid为echarts中的直角坐标系组件。

gridSimple

gridSimple通过extendComponentView扩展自Component View，重写了render方法，主要代码如下：

render: function (gridModel, ecModel) {
    this.group.removeAll();
    if (gridModel.get('show')) {
        this.group.add(new graphic.Rect({
            shape: gridModel.coordinateSystem.getRect(),
            style: zrUtil.defaults({
                fill: gridModel.get('backgroundColor')
            }, gridModel.getItemStyle()),
            silent: true,
            z2: -1
        }));
    }
}

Grid.js

coord/cartesian/Grid.js，实现直角坐标系的渲染，主要代码如下：

function Grid(gridModel, ecModel, api) {
    ...
    this._initCartesian(gridModel, ecModel, api);
    ...
}
gridProto._initCartesian = function (gridModel, ecModel, api) {
    var axisPositionUsed = {
        left: false,
        right: false,
        top: false,
        bottom: false
    };
    var axesMap = {
        x: {},
        y: {}
    };
    var axesCount = {
        x: 0,
        y: 0
    };

    /// Create axis
    // 创建x及y坐标轴
    ecModel.eachComponent('xAxis', createAxisCreator('x'), this);
    ecModel.eachComponent('yAxis', createAxisCreator('y'), this);
    ...
    /// Create cartesian2d
    // 创建
    each(axesMap.x, function (xAxis, xAxisIndex) {
        each(axesMap.y, function (yAxis, yAxisIndex) {
            var key = 'x' + xAxisIndex + 'y' + yAxisIndex;
            var cartesian = new Cartesian2D(key);

            cartesian.grid = this;
            cartesian.model = gridModel;

            this._coordsMap[key] = cartesian;
            this._coordsList.push(cartesian);