我的学习笔记11.10

2021SC@SDUSC

坐标轴

---

配置

xAxis：直角坐标系 grid 中的 x 轴。

xAxis.show ：是否显示 x 轴。缺省为true。

xAxis.gridIndex ：x 轴所在的 grid 的索引，默认位于第一个 grid。缺省值为0。

xAxis.position ：x 轴的位置。

可选：'top''bottom'
默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。

xAxis.offset ：X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。

xAxis.type  ：坐标轴类型。可选：

'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。

xAxis.name  ：坐标轴名称。

xAxis.nameLocation：坐标轴名称显示位置。

可选：'start' 'middle' 'end'

xAxis.min ：坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。

xAxis.max  ：坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。

yAxis:直角坐标系中的y轴。

基本配置与x轴相同。

---

公共文件

在直角坐标系d以及极坐标系等坐标轴组件中，存在着多个公共文件。

AxisView

AxisView通过extendComponentView方法扩展自Component Model，重写了render、remove以及dispose方法，定义了updateAxisPointer方法。

AxisBuilder

AxisBuilder中定义了axisLine、axisTickLabel以及axisName的渲染方法，主要代码如下：

var builders = {
    axisLine: function () {
        ...

        this.group.add(new graphic.Line(graphic.subPixelOptimizeLine({
            // Id for animation
            anid: 'line',

            shape: {
                x1: pt1[0],
                y1: pt1[1],
                x2: pt2[0],
                y2: pt2[1]
            },
            style: lineStyle,
            strokeContainThreshold: opt.strokeContainThreshold || 5,
            silent: true,
            z2: 1
        })));

        var arrows = axisModel.get('axisLine.symbol');
        var arrowSize = axisModel.get('axisLine.symbolSize');

        var arrowOffset = axisModel.get('axisLine.symbolOffset') || 0;
        if (typeof arrowOffset === 'number') {
            arrowOffset = [arrowOffset, arrowOffset];
        }

        if (arrows != null) {
            ...
            each([{
                rotate: opt.rotation + Math.PI / 2,
                offset: arrowOffset[0],
                r: 0
            }, {
                rotate: opt.rotation - Math.PI / 2,
                offset: arrowOffset[1],
                r: Math.sqrt((pt1[0] - pt2[0]) * (pt1[0] - pt2[0])
                    + (pt1[1] - pt2[1]) * (pt1[1] - pt2[1]))
            }], function (point, index) {
                // 创建arrow symbole
                if (arrows[index] !== 'none' && arrows[index] != null) {
                    var symbol = createSymbol(
                        arrows[index],
                        -symbolWidth / 2,
                        -symbolHeight / 2,
                        symbolWidth,
                        symbolHeight,
                        lineStyle.stroke,
                        true
                    );

                    // Calculate arrow position with offset
                    var r = point.r + point.offset;
                    var pos = [
                        pt1[0] + r * Math.cos(opt.rotation),
                        pt1[1] - r * Math.sin(opt.rotation)
                    ];

                    symbol.attr({
                        rotation: point.rotate,
                        position: pos,
                        silent: true,
                        z2: 11
                    });
                    this.group.add(symbol);
                }
            }, this);
        }
    },

    axisTickLabel: function () {
        var axisModel = this.axisModel;
        var opt = this.opt;
        // 通过graphic.Line以及graphic.Text分别对tick及label进行渲染
        var tickEls = buildAxisTick(this, axisModel, opt);
        var labelEls = buildAxisLabel(this, axisModel, opt);

        fixMinMaxLabelShow(axisModel, labelEls, tickEls);
    },

    axisName: function () {
        ...
        var textEl = new graphic.Text({
            // Id for animation
            anid: 'name',

            __fullText: name,
            __truncatedText: truncatedText,

            position: pos,
            rotation: labelLayout.rotation,
            silent: isSilent(axisModel),
            z2: 1,
            tooltip: (tooltipOpt && tooltipOpt.show)
                ? extend({
                    content: name,
                    formatter: function () {
                        return name;
                    },
                    formatterParams: formatterParams
                }, tooltipOpt)
                : null
        });

        graphic.setTextStyle(textEl.style, textStyleModel, {
            text: truncatedText,
            textFont: textFont,
            textFill: textStyleModel.getTextColor()
                || axisModel.get('axisLine.lineStyle.color'),
            textAlign: labelLayout.textAlign,
            textVerticalAlign: labelLayout.textVerticalAlign
        });
        ...

        // FIXME
        this._dumbGroup.add(textEl);
        textEl.updateTransform();

        this.group.add(textEl);

        textEl.decomposeTransform();
    }

};

AxisModelCreator

AxisModelCreator为生成AxisModel的方法，其在AxisModel的基础上扩展了getCategories、getOrdinalMeta、mergeDefaultAndTheme等方法，重写了defaultOption属性，并通过：

ComponentModel.registerSubTypeDefaulter(
    axisName + 'Axis',
    zrUtil.curry(axisTypeDefaulter, axisName)
);

来注册相应的Axis子类，如xAxis、yAxis、radiusAxis以及angleAxis等。