Der vollständige Code der im Uniapp-Applet enthaltenen Radardiagrammkomponente

<Leinwand id="radar-Leinwand" Klasse="radar-Leinwand" Typ="2d"></Leinwand>

.Radar-Leinwand
    Breite 550rpx
    Höhe 550rpx
    Rand 0 automatisch

<Skript>
    importiere { toRpx } von "@/utils/common"

    const numCount = 5 //Anzahl der Elemente const numSlot = 4 //Gesamtzahl der Knoten auf einer Linie const mW = toRpx(275) //Leinwandbreite const mCenter = mW / 2 //Mittelpunkt const mAngle = Math.PI * 2 / numCount //Winkel const mRadius = mCenter - toRpx(43) //Radius (der subtrahierte Wert wird verwendet, um Platz für gezeichneten Text zu lassen)

    let canvas = null // Leinwand
    let canvasCtx = null // Canvas-Kontext

    Standard exportieren {
        Name: 'RadarChart',
        Requisiten: {
        },
        Methoden: {
            // Initialisiere das Radardiagramm und führe initDrawRadar() aus, wenn die Komponente gemountet ist {
                Konsole.log('init')
                const query = uni.createSelectorQuery().in(diese)
                query.select('#radar-canvas').fields({ Knoten: true, Größe: true }).exec((res) => {
                    Leinwand = res[0].node
                    LeinwandCtx = Leinwand.getContext('2d')
                    const dpr = uni.getSystemInfoSync().pixelRatio
                    Leinwand.Breite = res[0].Breite * dpr
                    Leinwand.Höhe = res[0].Höhe * dpr
                    canvasCtx.scale(dpr, dpr)
                })
            },
            // Beginne mit dem Zeichnen handleDraw(radarData) {
                dies.drawEdge()
                dies.drawLinePoint()
                this.drawText(radarDaten)
                this.drawSubText(radarDaten)
                dies.drawEdgeDot()
                this.drawRegion(radarData, 'rgba(255, 105, 81, 0.4)')
            },
            // Zeichne den Rand des Kreises drawEdge() {
                canvasCtx.strokeStyle = "#EEEEEE"
                für (lass i = 0; i < numSlot; i++) {
                    // Den Radius berechnen let radius = mRadius / numSlot * (i + 1)
                    wenn (i === 3) {
                        canvasCtx.lineWidth = toRpx(4) // Linienbreite festlegen canvasCtx.beginPath()
                        canvasCtx.arc(mCenter, mCenter, radius, 0, 2 * Math.PI,) // Beginne mit dem Zeichnen eines Kreises canvasCtx.stroke()
                    } anders {
                        canvasCtx.Linienbreite = toRpx(1)
                        Konstanter Leerraum = 60 + 10 * (i+1)
                        this.drawDashCircle(mCenter, mCenter, Radius, Leerzeichen)
                    }
                }
            },
            // Äußeren Rand zeichnen dot drawEdgeDot(x, y) {
                canvasCtx.fillStyle = "#EEEEEF"
                canvasCtx.beginPath()
                für (let k = 0; k < numCount; k++) {
                    sei x = mCenter + mRadius * Math.cos(mAngle * k - Math.PI / 2)
                    sei y = mCenter + mRadius * Math.sin(mAngle * k - Math.PI / 2)
                    canvasCtx.arc(x, y, toRpx(5), Math.PI * 2, 0, wahr)
                    canvasCtx.closePath()
                }
                canvasCtx.fill()
            },
            // Zeichne einen gepunkteten Kreis drawDashCircle(x, y, radius, space = 100) {
                Konstante Lücke = 2 * Math.PI / Leerzeichen
                canvasCtx.lineCap = "Quadrat"

                let start = 0; // Beginnen Sie mit dem Zeichnen vom Ursprung aus while (start <= 2 * Math.PI) {
                    let end = start + gap
                    canvasCtx.beginPath() //Starte einen neuen Pfad canvasCtx.arc(x, y, radius, start, end, false)
                    Anfang = Lücke + Ende
                    canvasCtx.stroke() //Den aktuellen Pfad streichen}
            },
            // Den Verbindungspunkt zeichnen drawLinePoint() {
                canvasCtx.Linienbreite = toRpx(1)
                canvasCtx.beginPath()
                für (let k = 0; k < numCount; k++) {
                    sei x = mCenter + mRadius * Math.cos(mAngle * k - Math.PI / 2)
                    sei y = mCenter + mRadius * Math.sin(mAngle * k - Math.PI / 2)
                    canvasCtx.moveTo(mCenter, mCenter)
                    canvasCtx.lineTo(x, y)
                }
                canvasCtx.stroke()
            },
            // Textinformationen zeichnen drawText(mData) {
                canvasCtx.fillStyle = "#222325"
                canvasCtx.font = `bold ${toRpx(14)}px PingFangSC-Medium, PingFang SC` //Schriftart festlegen für (let n = 0; n < numCount; n++) {
                    sei x = mCenter + mRadius * Math.cos(mAngle * n - Math.PI / 2)
                    sei y = mCenter + mRadius * Math.sin(mAngle * n - Math.PI / 2)
                    //Anzeigeposition des Textes durch unterschiedliche Positionen anpassen const text = mData[n][0]
                    wenn (n === 0) {
                        canvasCtx.fillText(Text, x - toRpx(12), y - toRpx(30))
                    }
                    wenn (n === 1) {
                        canvasCtx.fillText(text, x + toRpx(12), y)
                    }
                    wenn (n === 2) {
                        canvasCtx.fillText(text, x + toRpx(12), y + toRpx(20))
                    }
                    wenn (n === 3) {
                        canvasCtx.fillText(text, x - toRpx(36), y + toRpx(20))
                    }
                    wenn (n === 4) {
                        canvasCtx.fillText(Text, x - toRpx(40), y)
                    }
                }
            },
            // Textinformationen zeichnen drawSubText(mData) {
                canvasCtx.fillStyle = "#8D949B"
                canvasCtx.font = `${toRpx(11)}px PingFangSC-Medium, PingFang SC` //Schriftart festlegen für (let n = 0; n < numCount; n++) {
                    const x = mMittelpunkt + mRadius * Math.cos(mWinkel * n - Math.PI / 2)
                    const y = mCenter + mRadius * Math.sin(mWinkel * n - Math.PI / 2)
                    //Anzeigeposition des Textes durch unterschiedliche Positionen anpassen const text = `(${mData[n][1]})`
                    wenn (n === 0) {
                        canvasCtx.fillText(Text, x - canvasCtx.measureText(Text).Breite / 2, y - toRpx(10))
                    }
                    wenn (n === 1) {
                        canvasCtx.fillText(Text, x + canvasCtx.measureText(Text).Breite, y + toRpx(16))
                    }
                    wenn (n === 2) {
                        canvasCtx.fillText(Text, x + canvasCtx.measureText(Text).Breite - toRpx(4), y + toRpx(40))
                    }
                    wenn (n === 3) {
                        canvasCtx.fillText(Text, x - canvasCtx.measureText(Text).Breite - toRpx(12), y + toRpx(40))
                    }
                    wenn (n === 4) {
                        canvasCtx.fillText(Text, x - canvasCtx.measureText(Text).Breite - toRpx(16), y + toRpx(16))
                    }
                }
            },
            //Den roten Datenbereich zeichnen (Daten und Füllfarbe)
            zeichneRegion(mData, Farbe){
                canvasCtx.strokeStyle = "#FF6951"
                canvasCtx.lineWidth = toRpx(4) // Linienbreite festlegen canvasCtx.beginPath()
                für (let m = 0; m < numCount; m++){
                    sei x = mCenter + mRadius * Math.cos(mAngle * m - Math.PI / 2) * mData[m][1] / 100
                    sei y = mCenter + mRadius * Math.sin(mAngle * m - Math.PI / 2) * mData[m][1] / 100
                    canvasCtx.lineTo(x, y)
                }
                canvasCtx.closePath()
                canvasCtx.fillStyle = Farbe
                canvasCtx.fill()
                canvasCtx.stroke()
            },
        },
        montiert() {
            dies.initDrawRadar()
        }
    }
</Skript>

Exportfunktion toRpx(val) {
    const res = uni.getSystemInfoSync()
    const scaleRate = res.windowWidth / 375
    Rückgabewert * Skalierungsrate
}

<Vorlage>
    <!--Radardiagramm-->
    <radar-chart :radarData="radarData" ref="radarRef"></radar-chart>
</Vorlage>

RadarChart aus „./components/radar“ importieren 

Standard exportieren {
    Komponenten:
        RadarChart,
    },
    Daten() {
        zurückkehren {
            radarData:[["Hören", 0], ["Sprechen", 0], ["Grammatik", 0], ["Wortschatz", 0], ["Lesen", 0]],
        }
    },
    Methoden: {
        getData() {
            // Nachdem die Anforderungsdaten zurückgegeben wurden, rufen Sie die Komponentenmethode auf, um dies zu rendern.$refs.radarRef.handleDraw(this.radarData)
        }
    }
}