我的学习笔记11.24

2021SC@SDUSC

雷达坐标轴

配置

雷达图坐标系与极坐标系不同的是它的每一个轴（indicator 指示器）都是一个单独的维度，可以通过 name、axisLine、axisTick、axisLabel、splitLine、 splitArea 几个配置项配置指示器坐标轴线的样式。

radar.zlevel：radar 组件所有图形的 zlevel 值。zlevel 用于 Canvas 分层，不同 zlevel 值的图形放置在不同的 Canvas 中，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。

radar.z：radar 组件所有图形的 z 值。控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。

radar.center：radar 组件的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。

radar.radius：radar 组件的半径，数组的第一项是内半径，第二项是外半径。支持设置成百分比，相对于容器高宽中较小的一项的一半。

radar.startAngle：雷达图坐标系的起始角度，也就是第一个指示器轴的角度。

radar.name：雷达图每个指示器名称的配置项。详细的名称样式配置见下节内容。

radar.nameGap ：雷达图指示器名称和指示器轴的距离。

radar.splitNumber：雷达图指示器轴的分割段数。

radar.shape：雷达图的绘制类型，支持的类型有 'polygon' 和 'circle'。

RadarView

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

render: function (radarModel, ecModel, api) {
    var group = this.group;
    group.removeAll();

    this._buildAxes(radarModel);
    this._buildSplitLineAndArea(radarModel);
},

_buildAxes: function (radarModel) {
    var radar = radarModel.coordinateSystem;
    var indicatorAxes = radar.getIndicatorAxes();
    var axisBuilders = zrUtil.map(indicatorAxes, function (indicatorAxis) {
        var axisBuilder = new AxisBuilder(indicatorAxis.model, {
            position: [radar.cx, radar.cy],
            rotation: indicatorAxis.angle,
            labelDirection: -1,
            tickDirection: -1,
            nameDirection: 1
        });
        return axisBuilder;
    });

    zrUtil.each(axisBuilders, function (axisBuilder) {
        zrUtil.each(axisBuilderAttrs, axisBuilder.add,