uniapp パッケージ化されたアプレット レーダー チャート コンポーネントの完全なコード

<canvas id="radar-canvas" class="radar-canvas" type="2d"></canvas>

.radar-canvas
    幅 550rpx
    高さ 550rpx
    マージン 0 自動

<スクリプト>
    "@/utils/common" から { toRpx } をインポートします。

    const numCount = 5 //要素の数 const numSlot = 4 //線上のノードの合計数 const mW = toRpx(275) //キャンバスの幅 const mCenter = mW / 2 //中心点 const mAngle = Math.PI * 2 / numCount //角度 const mRadius = mCenter - toRpx(43) //半径（減算された値は描画されたテキスト用のスペースを残すために使用されます）

    let canvas = null // キャンバス
    let canvasCtx = null // キャンバスコンテキスト

    エクスポートデフォルト{
        名前: 'RadarChart'、
        小道具: {
        },
        メソッド: {
            // レーダーチャートを初期化し、コンポーネントがマウントされたら initDrawRadar() を実行します {
                コンソールログ('init')
                const クエリ = uni.createSelectorQuery().in(this)
                クエリ.select('#radar-canvas').fields({ ノード: true, サイズ: true }).exec((res) => {
                    キャンバス = res[0].node
                    キャンバスCtx = キャンバス.getContext('2d')
                    const dpr = uni.getSystemInfoSync().pixelRatio
                    キャンバス.幅 = res[0].幅 * dpr
                    キャンバスの高さ = res[0].高さ * dpr
                    キャンバスCtx.scale(dpr, dpr)
                })
            },
            // 描画開始 handleDraw(radarData) {
                this.drawEdge()
                this.drawLinePoint()
                this.drawText(レーダーデータ)
                this.drawSubText(レーダーデータ)
                this.drawEdgeDot()
                this.drawRegion(レーダーデータ、'rgba(255, 105, 81, 0.4)')
            },
            // 円の端を描くdrawEdge() {
                canvasCtx.strokeStyle = '#EEEEEE'
                (i = 0; i < numSlot; i++) の場合 {
                    // 半径を計算する let radius = mRadius / numSlot * (i + 1)
                    (i === 3)の場合{
                        canvasCtx.lineWidth = toRpx(4) // 線の幅を設定する canvasCtx.beginPath()
                        canvasCtx.arc(mCenter, mCenter, radius, 0, 2 * Math.PI,) // 円の描画を開始します canvasCtx.stroke()
                    } それ以外 {
                        キャンバスCtx.lineWidth = toRpx(1)
                        定数スペース = 60 + 10 * (i+1)
                        this.drawDashCircle(mCenter, mCenter, 半径, スペース)
                    }
                }
            },
            // 外側の境界点を描画する drawEdgeDot(x, y) {
                キャンバスCtx.fillStyle = '#EEEEEF'
                キャンバスCtx.beginPath()
                (k = 0; k < numCount; k++) の場合 {
                    x = mCenter + mRadius * Math.cos(mAngle * k - Math.PI / 2) とします。
                    y = mCenter + mRadius * Math.sin(mAngle * k - Math.PI / 2) とします。
                    canvasCtx.arc(x, y, toRpx(5), Math.PI * 2, 0, true)
                    キャンバスCtx.closePath()
                }
                キャンバスCtx.fill()
            },
            // 点線の円を描く drawDashCircle(x, y, radius, space = 100) {
                定数ギャップ = 2 * Math.PI / スペース
                canvasCtx.lineCap = 'square'

                let start = 0; // 原点から描画を開始する while (start <= 2 * Math.PI) {
                    終了 = 開始 + ギャップ
                    canvasCtx.beginPath() //新しいパスを開始します canvasCtx.arc(x, y, radius, start, end, false)
                    開始 = ギャップ + 終了
                    canvasCtx.stroke() //現在のパスをストロークします}
            },
            // 接続ポイントを描画するdrawLinePoint() {
                キャンバスCtx.lineWidth = toRpx(1)
                キャンバスCtx.beginPath()
                (k = 0; k < numCount; k++) の場合 {
                    x = mCenter + mRadius * Math.cos(mAngle * k - Math.PI / 2) とします。
                    y = mCenter + mRadius * Math.sin(mAngle * k - Math.PI / 2) とします。
                    キャンバスCtx.moveTo(mCenter, mCenter)
                    キャンバスCtx.lineTo(x, y)
                }
                キャンバスCtx.stroke()
            },
            // テキスト情報を描画するdrawText(mData) {
                キャンバスCtx.fillStyle = '#222325'
                canvasCtx.font = `bold ${toRpx(14)}px PingFangSC-Medium, PingFang SC` //フォントを設定する for (let n = 0; n < numCount; n++) {
                    x = mCenter + mRadius * Math.cos(mAngle * n - Math.PI / 2) とします。
                    y = mCenter + mRadius * Math.sin(mAngle * n - Math.PI / 2) とします。
                    // テキストの表示位置をさまざまな位置で調整します const text = mData[n][0]
                    (n === 0)の場合{
                        canvasCtx.fillText(テキスト、x - toRpx(12)、y - toRpx(30))
                    }
                    (n === 1)の場合{
                        キャンバスCtx.fillText(テキスト、x + toRpx(12)、y)
                    }
                    (n === 2)の場合{
                        キャンバスCtx.fillText(テキスト、x + toRpx(12)、y + toRpx(20))
                    }
                    (n === 3)の場合{
                        canvasCtx.fillText(テキスト、x - toRpx(36)、y + toRpx(20))
                    }
                    (n === 4)の場合{
                        canvasCtx.fillText(テキスト、x - toRpx(40)、y)
                    }
                }
            },
            // テキスト情報を描画する drawSubText(mData) {
                キャンバスCtx.fillStyle = '#8D949B'
                canvasCtx.font = `${toRpx(11)}px PingFangSC-Medium, PingFang SC` //フォントを設定する for (let n = 0; n < numCount; n++) {
                    定数 x = mCenter + mRadius * Math.cos(mAngle * n - Math.PI / 2)
                    定数 y = mCenter + mRadius * Math.sin(mAngle * n - Math.PI / 2)
                    // テキストの表示位置をさまざまな位置で調整します const text = `(${mData[n][1]})`
                    (n === 0)の場合{
                        canvasCtx.fillText(テキスト、x - canvasCtx.measureText(テキスト).width / 2、y - toRpx(10))
                    }
                    (n === 1)の場合{
                        canvasCtx.fillText(テキスト、x + canvasCtx.measureText(テキスト).width、y + toRpx(16))
                    }
                    (n === 2)の場合{
                        canvasCtx.fillText(テキスト、x + canvasCtx.measureText(テキスト).width - toRpx(4)、y + toRpx(40))
                    }
                    (n === 3)の場合{
                        canvasCtx.fillText(テキスト、x - canvasCtx.measureText(テキスト).width - toRpx(12)、y + toRpx(40))
                    }
                    (n === 4)の場合{
                        canvasCtx.fillText(テキスト、x - canvasCtx.measureText(テキスト).width - toRpx(16)、y + toRpx(16))
                    }
                }
            },
            //赤いデータ領域を描画する（データと塗りつぶしの色）
            描画領域(mData, 色){
                キャンバスCtx.strokeStyle = '#FF6951'
                canvasCtx.lineWidth = toRpx(4) // 線の幅を設定する canvasCtx.beginPath()
                (m = 0 とします; m < numCount; m++){
                    x = mCenter + mRadius * Math.cos(mAngle * m - Math.PI / 2) * mData[m][1] / 100とします。
                    y = mCenter + mRadius * Math.sin(mAngle * m - Math.PI / 2) * mData[m][1] / 100とします。
                    キャンバスCtx.lineTo(x, y)
                }
                キャンバスCtx.closePath()
                canvasCtx.fillStyle = 色
                キャンバスCtx.fill()
                キャンバスCtx.stroke()
            },
        },
        マウント() {
            this.initDrawRadar()
        }
    }
</スクリプト>

エクスポート関数 toRpx(val) {
    定数 res = uni.getSystemInfoSync()
    定数スケールレート = res.windowWidth / 375
    戻り値 * scaleRate
}

<テンプレート>
    <!--レーダーチャート-->
    <レーダーチャート:radarData="radarData" ref="radarRef"></レーダーチャート>
</テンプレート>

'./components/radar' から RadarChart をインポートします。 

エクスポートデフォルト{
    コンポーネント:
        レーダーチャート、
    },
    データ（） {
        戻る {
            レーダーデータ:[["リスニング", 0], ["スピーキング", 0], ["文法", 0], ["語彙", 0], ["読解", 0]],
        }
    },
    メソッド: {
        取得データ() {
            // リクエストデータが返されたら、コンポーネントメソッドを呼び出してこれをレンダリングします。$refs.radarRef.handleDraw(this.radarData)
        }
    }
}