VUEはG2チャートを使用した実装を導入します

npm インストール @antv/g2

<div id="webInfo"></div>

"@antv/g2" から G2 をインポートします。

const チャート = 新しい G2.Chart({})

チャート = 新しい G2.Chart({       
        container: "webInfo", // チャート コンテナーを指定します forceFit: true, // 強制フィット width: 600, // チャートの幅を指定します height: 306, // 高さ padding: [20, 30, 30, 50], // パディング})

/今すぐチャートを更新/ 
チャートデータの変更 

/データを更新するだけで、チャートをすぐに更新する必要はありません/ 
チャートソース(チャートデータ) 

/チャートを更新する必要があるときに呼び出します/ 
チャートの再描画()

/すべてをクリーンアップ/
チャートをクリアします。 

<テンプレート>
  <div id="c1"></div>
</テンプレート>
<スクリプト>
    エクスポートデフォルト{
        名前: 「スペクタキュラー」、
        データ（）{
            戻る {
                基本的な列チャートプロパティ:{
                    データ:[{ ジャンル: 'スポーツ', 販売数: 275 },
                        { ジャンル: '戦略'、販売数: 115 }、
                        { ジャンル: 'アクション'、販売数: 120 },
                        { ジャンル: 'シューティング'、販売数: 350 }、
                        { ジャンル: 'その他'、販売数: 150 }]、
                    コンテナ:'c1',
                    幅:700,
                    高さ:600
                },
            }
        },
        方法:{
            テスト（）{
                const データ = this.basicColumnChartProp.data;
                constチャート = 新しいG2.Chart({
                    コンテナ: this.basicColumnChartProp.container、
                    幅: this.basicColumnChartProp.width、
                    高さ: this.basicColumnChartProp.height
                });
                chart.source(データ);
                chart.interval().position('ジャンル*販売数').color('ジャンル')
                チャートをレンダリングします。
            }
        },    
        マウント() {
          これをテストします。
        },
    }
</スクリプト>

<テンプレート>
  <div id="c1"></div>
</テンプレート>
<スクリプト>
    定数 DataSet は require('@antv/data-set');
    エクスポートデフォルト{
        名前: 「スペクタキュラー」、
        データ（）{
            戻る {
                基本的な列チャートプロパティ:{
                    コンテナ:'c1',
                },
            }
        },
        方法:{
            テスト（）{
              フェッチ('src/views/dataCenter/data/world/countries.geo.json')
              .then(res => res.json())
              .then(mapData => {
                constチャート = 新しいG2.Chart({
                  コンテナ:this.basicColumnChartProp.container、
                  フォースフィット: true、
                  高さ:700,
                  パディング: [10,10]
                });
                チャート.ツールチップ({
                  タイトルを表示: false
                });
                // 同期メトリック chart.scale({
                  経度：
                    同期: 真
                  },
                  緯度：
                    同期: 真
                  }
                });
                chart.axis(false);
                chart.legend('トレンド', {
                  位置: '左'
                });
 
                // 世界地図の背景を描画します const ds = new DataSet();
                定数ワールドマップ = ds.createView('back')
                  .source(mapData, {
                    タイプ: 'GeoJSON'
                  });
                定数worldMapView = chart.view();
                worldMapView.source(worldMap);
                worldMapView.tooltip(false);
                worldMapView.polygon().position('経度*緯度').style({
                  塗りつぶし: '#fff',
                  ストローク: '#ccc',
                  線幅: 1
                });
 
                定数userData = [
                  { 名前: 'ロシア'、値: 86.8 },
                  { 名前: '中国'、値: 106.3 },
                  { 名前: '日本'、値: 94.7 },
                  { 名前: 'モンゴル', 値: 98 },
                  { 名前: 'カナダ'、値: 98.4 },
                  { 名前: 'イギリス'、値: 97.2 },
                  { 名前: 'アメリカ合衆国'、値: 98.3 },
                  { 名前: 'ブラジル'、値: 96.7 },
                  { 名前: 'アルゼンチン'、値: 95.8 },
                  { 名前: 'アルジェリア'、値: 101.3 },
                  { 名前: 'フランス'、値: 94.8 },
                  { 名前: 'ドイツ'、値: 96.6 },
                  { 名前: 'ウクライナ'、値: 86.3 },
                  { 名前: 'エジプト'、値: 102.1 },
                  { 名前: '南アフリカ'、値: 101.3 },
                  { 名前: 'インド'、値: 107.6 },
                  { 名前: 'オーストラリア'、値: 99.9 },
                  { 名前: 'サウジアラビア'、値: 130.1 },
                  { 名前: 'アフガニスタン'、値: 106.5 },
                  { 名前: 'カザフスタン'、値: 93.4 },
                  { 名前: 'インドネシア'、値: 101.4 }
                ];
                定数userDv = ds.createView()
                  .source(ユーザーデータ)
                  。変身（{
                    ジオデータビュー: ワールドマップ、
                    フィールド: '名前',
                    タイプ: 'geo.region',
                    形式: [ '経度', '緯度' ]
                  })
                  。変身（{
                    タイプ: 'マップ'、
                    コールバック: obj => {
                      // obj.trend = obj.value
                      obj.trend = (obj.value > 100) ? '男性が多い' : '女性が多い';
                      obj を返します。
                    }
                  });
                ユーザービューをチャートビューに変換します。
                userView.source(userDv, {
                  トレンド: {
                    別名: 「女性 100 人あたりの男性の数」
                  }
                });
                ユーザービュー.ポリゴン()
                  .position('経度*緯度')
                  .color('トレンド', [ '#F51D27', '#0A61D7' ])
                  .opacity('値')
                  .tooltip('名前*トレンド')
                  .animate({
                    離れる：
                      アニメーション: 'fadeOut'
                    }
                  });
                チャートをレンダリングします。
              })
            },
        },
        マウント() {
          これをテストします。
        },
    }
</スクリプト>