this.angles = [];
// 軸間夾角
const iAngle = 360 / this.axes;
for (let i = 0; i < this.axes; i++) {
    // 計算
    const angle = iAngle * i;
    this.angles.push(angle);
}

// 創(chuàng)建一個二維數(shù)組
let scalesSet: cc.Vec2[][] = [];
for (let i = 0; i < 軸上刻度個數(shù); i++) {
    // 用來保存當(dāng)前層上的刻度坐標(biāo)
    let scales = [];
    // 計算刻度在軸上的位置
    const length = 軸線長度 - (軸線長度 / 軸上刻度個數(shù) * i);
    for (let j = 0; j < this.angles.length; j++) {
        // 將角度轉(zhuǎn)為弧度
        const radian = (Math.PI / 180) * this.angles[j];
        // 根據(jù)三角公式計算刻度相對于中心點（0, 0）的坐標(biāo)
        const pos = cc.v2(length * Math.cos(radian), length * Math.sin(radian));
        // 推進(jìn)數(shù)組
        scales.push(pos);
    }
    // 推進(jìn)二維數(shù)組
    scalesSet.push(scales);
}

// 遍歷全部最外層的刻度
for (let i = 0; i < scalesSet[0].length; i++) {
    // 畫筆移動至中心點
    this.graphics.moveTo(0, 0);
    // 創(chuàng)建線條
    this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}

// 畫筆移動至第一個點
this.graphics.moveTo(scalesSet[0][0].x, scalesSet[0][0].y);
for (let i = 1; i < scalesSet[0].length; i++) {
    // 創(chuàng)建線條
    this.graphics.lineTo(scalesSet[0][i].x, scalesSet[0][i].y);
}
// 閉合當(dāng)前線條（外網(wǎng)格線）
this.graphics.close();

// 填充線條包圍的空白區(qū)域
this.graphics.fill();
// 繪制已創(chuàng)建的線條（軸線和外網(wǎng)格線）
this.graphics.stroke();

// 刻度大于 1 個時才繪制內(nèi)網(wǎng)格線
if (scalesSet.length > 1) {
    // 從下邊 1 開始（下標(biāo) 0 是外網(wǎng)格線）
    for (let i = 1; i < scalesSet.length; i++) {
        // 畫筆移動至第一個點
        this.graphics.moveTo(scalesSet[i][0].x, scalesSet[i][0].y);
        for (let j = 1; j < scalesSet[i].length; j++) {
            // 創(chuàng)建線條
            this.graphics.lineTo(scalesSet[i][j].x, scalesSet[i][j].y);
        }
        // 閉合當(dāng)前線條（內(nèi)網(wǎng)格線）
        this.graphics.close();
    }
    // 繪制已創(chuàng)建的線條（內(nèi)網(wǎng)格線）
    this.graphics.stroke();
}

/**
 * 雷達(dá)圖數(shù)據(jù)
 */
export interface RadarChartData {

    /** 數(shù)值 */
    values: number[];

    /** 線的寬度 */
    lineWidth?: number;

    /** 線的顏色 */
    lineColor?: cc.Color;

    /** 填充的顏色 */
    fillColor?: cc.Color;

    /** 節(jié)點的顏色 */
    joinColor?: cc.Color;

}

/**
 * 繪制數(shù)據(jù)
 * @param data 數(shù)據(jù)
 */
public draw(data: RadarChartData | RadarChartData[]) {
    // 處理數(shù)據(jù)
    const datas = Array.isArray(data) ? data : [data];

    // 開始繪制數(shù)據(jù)
    for (let i = 0; i < datas.length; i++) {
        // 裝填染料
        this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
        this.graphics.fillColor = datas[i].fillColor || defaultOptions.fillColor;
        this.graphics.lineWidth = datas[i].lineWidth || defaultOptions.lineWidth;

        // 計算節(jié)點坐標(biāo)
        let coords = [];
        for (let j = 0; j < this.axes; j++) {
            const value = datas[i].values[j] > 1 ? 1 : datas[i].values[j];
            const length = value * this.axisLength;
            const radian = (Math.PI / 180) * this.angles[j];
            const pos = cc.v2(length * Math.cos(radian), length * Math.sin(radian))
            coords.push(pos);
        }

        // 創(chuàng)建線條
        this.graphics.moveTo(coords[0].x, coords[0].y);
        for (let j = 1; j < coords.length; j++) {
            this.graphics.lineTo(coords[j].x, coords[j].y);
        }
        this.graphics.close(); // 閉合線條
        
        // 填充包圍區(qū)域
        this.graphics.fill();
        // 繪制線條
        this.graphics.stroke();

        // 繪制數(shù)據(jù)節(jié)點
        for (let j = 0; j < coords.length; j++) {
            // 大圓
            this.graphics.strokeColor = datas[i].lineColor || defaultOptions.lineColor;
            this.graphics.circle(coords[j].x, coords[j].y, 2);
            this.graphics.stroke();
            // 小圓
            this.graphics.strokeColor = datas[i].joinColor || defaultOptions.joinColor;
            this.graphics.circle(coords[j].x, coords[j].y, .65);
            this.graphics.stroke();
        }

    }
}

// 當(dāng)前雷達(dá)圖數(shù)據(jù)
private curDatas: RadarChartData[] = [];

protected update() {
    if (!this.keepUpdating) return;
    // 繪制當(dāng)前數(shù)據(jù)
    this.draw(this.curDatas);
}

/**
 * 緩動繪制
 * @param data 目標(biāo)數(shù)據(jù)
 * @param duration 動畫時長
 */
public to(data: RadarChartData | RadarChartData[], duration: number) {
    // 處理重復(fù)調(diào)用
    this.unscheduleAllCallbacks();
    
    // 包裝單條數(shù)據(jù)
    const datas = Array.isArray(data) ? data : [data];

    // 打開每幀更新
    this.keepUpdating = true;

    // 動起來！
    for (let i = 0; i < datas.length; i++) {
        // 數(shù)值動起來！
        // 遍歷數(shù)據(jù)中的全部數(shù)值，逐個讓他們動起來！
        for (let j = 0; j < this.curDatas[i].values.length; j++) {
            // 限制最大值為 1（即 100%）
            const value = datas[i].values[j] > 1 ? 1 : datas[i].values[j];
            cc.tween(this.curDatas[i].values)
                .to(duration, { [j]: value })
                .start();
        }
        // 樣式動起來！
        // 沒有指定則使用原來的樣式！
        cc.tween(this.curDatas[i])
            .to(duration, {
                lineWidth: datas[i].lineWidth || this.curDatas[i].lineWidth,
                lineColor: datas[i].lineColor || this.curDatas[i].lineColor,
                fillColor: datas[i].fillColor || this.curDatas[i].fillColor,
                joinColor: datas[i].joinColor || this.curDatas[i].joinColor
            })
            .start();
    }

    this.scheduleOnce(() => {
        // 關(guān)閉每幀更新
        this.keepUpdating = false;
    }, duration);
}