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,