vue+antv でレーダーチャートを実装するためのサンプルコード

<テンプレート>
  <div ref="コンテナ" />
</テンプレート>
 
<スクリプト>
'@antv/data-set' から DataSet をインポートします。
'@antv/g2' から { Chart } をインポートします
エクスポートデフォルト{
// レーダーチャートを作成するmounted() {
    this.constradar()
  },
  メソッド: {
    矛盾() {
      定数データ = [
        { 項目: '作業効率'、a: 70、b: 30 }、
        { 項目: '出席'、a: 60、b: 70 }、
        { 項目: 'ポジティブさ'、a: 50、b: 60 }、
        { 項目: '同僚を助ける'、a: 40、b: 50 }、
        { 項目: '自主学習'、a: 60、b: 70 }、
        { 項目: '精度'、a: 70、b: 50 }
      ]
      const { データビュー } = データセット
      const dv = 新しい DataView().source(データ)
      dv.transform({
        タイプ: '折りたたみ'、
        fields: ['a', 'b'], // フィールドセットを展開 key: 'user', // キーフィールド value: 'score' // 値フィールド })
 
      const チャート = 新しいチャート({
        コンテナ: this.$refs.container,
        自動調整: true、
        高さ: 500
      })
      チャートデータ(dv.rows)
      chart.scale('スコア', {
        最小: 0,
        最大: 80
      })
      chart.coordinate('polar', {
        半径: 0.8
      })
      チャート.ツールチップ({
        共有: true、
        クロスヘアを表示: true、
        十字線:
          ライン： {
            スタイル: {
              線破線: [4, 4],
              ストローク: '#333'
            }
          }
        }
      })
      chart.axis('item', {
        行: null、
        ティックライン: null、
        グリッド: {
          ライン： {
            スタイル: {
              ラインダッシュ: null
            }
          }
        }
      })
      chart.axis('スコア', {
        行: null、
        ティックライン: null、
        グリッド: {
          ライン： {
            タイプ: 'line'、
            スタイル: {
              ラインダッシュ: null
            }
          }
        }
      })
 
      chart.line().position('item*score').color('user').size(2)
      チャート
        。ポイント（）
        .position('アイテム*スコア')
        .color('ユーザー')
        .shape('円')
        .サイズ(4)
        。スタイル（{
          ストローク: '#fff',
          線幅: 1,
          塗りつぶしの不透明度: 1
        })
      chart.area().position('item*score').color('user')
      チャート.レンダリング()
 
//データを変更する const newData = [
        { 項目: '作業効率'、a: 20、b: 30 }、
        { 項目: '出席'、a: 30、b: 70 }、
        { 項目: 'ポジティブさ'、a: 10、b: 60 }、
        { 項目: '同僚を助ける'、a: 40、b: 50 }、
        { 項目: '自主学習'、a: 60、b: 70 }、
        { 項目: '精度'、a: 20、b: 50 }
      ]
      // すぐに更新する setTimeout(() => {
        // データ処理を開始 const dv = new DataView().source(newData)
        dv.transform({
          タイプ: '折りたたみ'、
          fields: ['a', 'b'], // フィールドセットを展開 key: 'user', // キーフィールド value: 'score' // 値フィールド })
        // 処理が完了しました // 処理されたデータを使用してアイコンを更新します chart.changeData(dv.rows)
      }, 3000)
    }
  }
}
</スクリプト>
 
<スタイル></スタイル>