2021SC@SDUSC
雷达坐标轴
RadarView
RadarView通过extendComponentView方法扩展自Component View,重写了render、_buildAxes、_buildSplitLineAndArea,主要代码如下:
RadarView.prototype.render = function (radarModel, ecModel, api) {
var group = this.group;
group.removeAll();
this._buildAxes(radarModel);
this._buildSplitLineAndArea(radarModel);
};
RadarView.prototype._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, axisBuilder);
this.group.add(axisBuilder.getGroup());
}, this);
};
RadarView.prototype._buildSplitLineAndArea = function (radarModel) {
var radar = radarModel.coordinateSystem;
var indicatorAxes = radar.getIndicatorAxes();
if (!indicatorAxes.length) {
return;
}
var shape = radarModel.get('shape');
var splitLineModel = radarModel.getModel('splitLine');
var splitAreaModel = radarModel.getModel('splitArea');
var lineStyleModel = splitLineModel.getModel('lineStyle');
var areaStyleModel = splitAreaModel.getModel('areaStyle');
var showSplitLine = splitLineModel.get('show');
var showSplitArea = splitAreaModel.get('show');
var splitLineColors = lineStyleModel.get('color');
var splitAreaColors = areaStyleModel.get('color');
var splitLineColorsArr = zrUtil.isArray(splitLineColors) ? splitLineColors : [splitLineColors];
var splitAreaColorsArr = zrUtil.isArray(splitAreaColors) ? splitAreaColors : [splitAreaColors];
var splitLines = [];
var splitAreas = [];
function getColorIndex(areaOrLine, areaOrLineColorList, idx) {
var colorIndex = idx % areaOrLineColorList.length;
areaOrLine[colorIndex] = areaOrLine[colorIndex] || [];
return colorIndex;
}
if (shape === 'circle') {
var ticksRadius = indicatorAxes[0].getTicksCoords();
var cx = radar.cx;
var cy = radar.cy;
for (var i = 0; i < ticksRadius.length; i++) {
if (showSplitLine) {
var colorIndex = getColorIndex(splitLines, splitLineColorsArr, i);
splitLines[colorIndex].push(new graphic.Circle({
shape: {
cx: cx,
cy: cy,
r: ticksRadius[i].coord
}
}));
}
if (showSplitArea && i < ticksRadius.length - 1) {
var colorIndex = getColorIndex(splitAreas, splitAreaColorsArr, i);
splitAreas[colorIndex].push(new graphic.Ring({
shape: {
cx: cx,
cy: cy,
r0: ticksRadius[i].coord,
r: ticksRadius[i + 1].coord
}
}));
}
}
} // Polyyon
else {
var realSplitNumber_1;
var axesTicksPoints = zrUtil.map(indicatorAxes, function (indicatorAxis, idx) {
var ticksCoords = indicatorAxis.getTicksCoords();
realSplitNumber_1 = realSplitNumber_1 == null ? ticksCoords.length - 1 : Math.min(ticksCoords.length - 1, realSplitNumber_1);
return zrUtil.map(ticksCoords, function (tickCoord) {
return radar.coordToPoint(tickCoord.coord, idx);
});
});
var prevPoints = [];
for (var i = 0; i <= realSplitNumber_1; i++) {
var points = [];
for (var j = 0; j < indicatorAxes.length; j++) {
points.push(axesTicksPoints[j][i]);
} // Close
if (points[0]) {
points.push(points[0].slice());
} else {
if (process.env.NODE_ENV !== 'production') {
console.error('Can\'t draw value axis ' + i);
}
}
if (showSplitLine) {
var colorIndex = getColorIndex(splitLines, splitLineColorsArr, i);
splitLines[colorIndex].push(new graphic.Polyline({
shape: {
points: points
}
}));
}
if (showSplitArea && prevPoints) {
var colorIndex = getColorIndex(splitAreas, splitAreaColorsArr, i - 1);
splitAreas[colorIndex].push(new graphic.Polygon({
shape: {
points: points.concat(prevPoints)
}
}));
}
prevPoints = points.slice().reverse();
}
}
var lineStyle = lineStyleModel.getLineStyle();
var areaStyle = areaStyleModel.getAreaStyle(); // Add splitArea before splitLine
zrUtil.each(splitAreas, function (splitAreas, idx) {
this.group.add(graphic.mergePath(splitAreas, {
style: zrUtil.defaults({
stroke: 'none',
fill: splitAreaColorsArr[idx % splitAreaColorsArr.length]
}, areaStyle),
silent: true
}));
}, this);
zrUtil.each(splitLines, function (splitLines, idx) {
this.group.add(graphic.mergePath(splitLines, {
style: zrUtil.defaults({
fill: 'none',
stroke: splitLineColorsArr[idx % splitLineColorsArr.length]
}, lineStyle),
silent: true
}));
}, this);
};
RadarModel
RadarModel通过extendComponentModel扩展自Component Model,重写了defaultOption属性以及optionUpdated方法。