echarts ワードクラウドチャートを使用した Vue の実践記録

echarts ワードクラウドチャートを使用した Vue の実践記録

echartsワードクラウドはechartsの拡張版です

https://echarts.apache.org/zh/download-extension.html

1. 依存関係をインストールする

 npm インストール echarts
 
 npm インストール echarts-wordcloud

2. main.jsをインポートする

'echarts' から echarts をインポートします。
Vue.prototype.$echarts = echarts

3. 使用するコンポーネントに拡張機能を導入する

<スクリプト>
「echarts-wordcloud/dist/echarts-wordcloud」をインポートします。
「echarts-wordcloud/dist/echarts-wordcloud.min」をインポートします。
 
 </スクリプト>

4. 構成

<テンプレート>
  <div class="結果">
      <el-tabs type="border-card" v-model="name">
        <el-tab-pane label="各州における累積感染者数" name="0">
          <div ref="chart1" style="幅: 800px;高さ: 600px;"></div>
        </el-tab-pane>
        <el-tab-pane label="各州における感染者数" name="1">
          <div ref="chart2" style="width: 800px;height:600px;" class="charts-two"></div>
        </el-tab-pane>
        <el-tab-pane label="各都市の累積感染者数" name="2">
          <div ref="chart3" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
        <el-tab-pane label="各都市の現在の感染者数" name="3">
          <div ref="chart4" style="幅: 800px;高さ: 600px;"></div>
        </el-tab-pane>
      </el-tabs>
  </div>
</テンプレート>
 
 
// ワードクラウドチャート <script>
* を echarts として "echarts" からインポートします。
「echarts-wordcloud/dist/echarts-wordcloud」をインポートします。
「echarts-wordcloud/dist/echarts-wordcloud.min」をインポートします。
 
エクスポートデフォルト{
  名前: "VisitShow",
  データ() {
    戻る {
      ユーザー訪問回数: [],
      日付: []、
      良い訪問回数: [],
      商品名: [],
      名前: "0",
    };
  },
  マウント() {
    this.showEeharts();
  },
 
  メソッド: {
    表示Eeharts() {
      var chart1 = echarts.init(this.$refs.chart1);
      var chart2 = echarts.init(this.$refs.chart2);
      var chart3 = echarts.init(this.$refs.chart3);
      var chart4 = echarts.init(this.$refs.chart4);
      varデータ1 = [
         {'名前': '香港', '値': 11801},
         {'名前': '台湾', '値': 1178},
         {'名前': '上海', '値': 2006},
         {'名前': '広東省', '値': 2365},
         {'名前': '雲南', '値': 347},
         {'名前': '四川', '値': 992},
         {'名前': '福建省', '値': 595},
         {'名前': '浙江省', '値': 1345},
         {'名前': '海南', '値': 188},
         {'名前': '江蘇省', '値': 720},
         {'名前': '天津', '値': 387},
         {'名前': '山西', '値': 251},
         {'名前': '広西', '値': 275},
         {'名前': '陝西省', '値': 592},
         {'名前': '湖北省', '値': 38158},
         {'名前': '重慶', '値': 597},
         {'name': '内モンゴル', 'value': 382},
         {'名前': '湖南', '値': 1045},
         {'名前': '山東', '値': 879},
         {'名前': '北京', '値': 1057},
         {'名前': '河南', '値': 1312},
         {'名前': '甘粛', '値': 193},
         {'名前': 'チベット', '値': 1},
         {'名前': '吉林', '値': 573},
         {'名前': '河北省', '値': 1317},
         {'名前': '青海', '値': 18},
         {'名前': 'マカオ', '値': 49},
         {'名前': '新疆', '値': 980},
         {'名前': '遼寧省', '値': 408},
         {'名前': '安徽省', '値': 994},
         {'name': '黒龍江省', 'value': 1610},
         {'名前': '貴州省', '値': 147},
         {'名前': '江西', '値': 937},
         {'名前': '寧夏', '値': 75}
      ]
      var データ2 = [
         {'名前': '香港', '値': 118},
         {'名前': '台湾', '値': 89},
         {'名前': '上海', '値': 56},
         {'名前': '広東省', '値': 51},
         {'名前': '雲南', '値': 46},
         {'名前': '四川', '値': 30},
         {'名前': '福建省', '値': 25},
         {'名前': '浙江省', '値': 22},
         {'名前': '海南', '値': 17},
         {'名前': '江蘇省', '値': 8},
         {'名前': '天津', '値': 7},
         {'名前': '山西', '値': 7},
         {'名前': '広西', '値': 7},
         {'名前': '陝西', '値': 6},
         {'名前': '湖北省', '値': 6},
         {'名前': '重慶', '値': 6},
         {'name': '内モンゴル', 'value': 4},
         {'名前': '湖南', '値': 4},
         {'名前': '山東', '値': 3},
         {'名前': '北京', '値': 2},
         {'名前': '河南', '値': 1},
         {'名前': '甘粛', '値': 1},
         {'名前': 'チベット', '値': 0},
         {'名前': '吉林', '値': 0},
         {'名前': '河北', '値': 0},
         {'名前': '青海', '値': 0},
         {'名前': 'マカオ', '値': 0},
         {'名前': '新疆', '値': 10},
         {'名前': '遼寧省', '値': 0},
         {'名前': '安徽省', '値': 0},
         {'名前': '黒龍江省', '値': 0},
         {'名前': '貴州省', '値': 0},
         {'名前': '江西', '値': 0},
         {'名前': '寧夏', '値': 0}
         ]
      var データ3 = [
         {'名前': '香港', '値': 11801},
         {'名前': '台湾', '値': 1178},
         {'名前': '上海', '値': 2006},
         {'名前': '広東省', '値': 2365},
         {'名前': '雲南', '値': 347},
         {'名前': '四川', '値': 992},
         {'名前': '福建省', '値': 595},
         {'名前': '浙江省', '値': 1345},
         {'名前': '海南', '値': 188},
         {'名前': '江蘇省', '値': 720},
         {'名前': '天津', '値': 387},
         {'名前': '山西', '値': 251},
         {'名前': '広西', '値': 275},
         {'名前': '陝西省', '値': 592},
         {'名前': '湖北省', '値': 38158},
         {'名前': '重慶', '値': 597},
         {'name': '内モンゴル', 'value': 382},
         {'名前': '湖南', '値': 1045},
         {'名前': '山東', '値': 879},
         {'名前': '北京', '値': 1057},
         {'名前': '河南', '値': 1312},
         {'名前': '甘粛', '値': 193},
         {'名前': 'チベット', '値': 1},
         {'名前': '吉林', '値': 573},
         {'名前': '河北省', '値': 1317},
         {'名前': '青海', '値': 18},
         {'名前': 'マカオ', '値': 49},
         {'名前': '新疆', '値': 980},
         {'名前': '遼寧省', '値': 408},
         {'名前': '安徽省', '値': 994},
         {'name': '黒龍江省', 'value': 1610},
         {'名前': '貴州省', '値': 147},
         {'名前': '江西', '値': 937},
         {'名前': '寧夏', '値': 75}
      ]
      var データ4 = [
         {'名前': '香港', '値': 118},
         {'名前': '台湾', '値': 89},
         {'名前': '上海', '値': 56},
         {'名前': '広東省', '値': 51},
         {'名前': '雲南', '値': 46},
         {'名前': '四川', '値': 30},
         {'名前': '福建省', '値': 25},
         {'名前': '浙江省', '値': 22},
         {'名前': '海南', '値': 17},
         {'名前': '江蘇省', '値': 8},
         {'名前': '天津', '値': 7},
         {'名前': '山西', '値': 7},
         {'名前': '広西', '値': 7},
         {'名前': '陝西', '値': 6},
         {'名前': '湖北省', '値': 6},
         {'名前': '重慶', '値': 6},
         {'name': '内モンゴル', 'value': 4},
         {'名前': '湖南', '値': 4},
         {'名前': '山東', '値': 3},
         {'名前': '北京', '値': 2},
         {'名前': '河南', '値': 1},
         {'名前': '甘粛', '値': 1},
         {'名前': 'チベット', '値': 0},
         {'名前': '吉林', '値': 0},
         {'名前': '河北', '値': 0},
         {'名前': '青海', '値': 0},
         {'名前': 'マカオ', '値': 0},
         {'名前': '新疆', '値': 10},
         {'名前': '遼寧省', '値': 0},
         {'名前': '安徽省', '値': 0},
         {'名前': '黒龍江省', '値': 0},
         {'名前': '貴州省', '値': 0},
         {'名前': '江西', '値': 0},
         {'名前': '寧夏', '値': 0}
         ]
			var chart1オプション = {
          タイトル:
              テキスト: '各州の累積確認症例数 - ワードクラウド', //タイトル x: 'center',
              テキストスタイル: {
                  フォントサイズ: 23
              }
 
          },
          背景色: '#fff', //F7F7F7
          ツールチップ: {
              表示: 真
          },
          シリーズ: [{
              name: '各州における累積確認症例数', //データプロンプトウィンドウのタイトルタイプ: 'wordCloud',
              sizeRange: [12, 64], //キャンバスの範囲。設定が大きすぎると、文字数が少なくなります(画面からはみ出します)
              rotationRange: [-45, 90], //データ反転範囲 //shape: 'circle',
              テキストパディング: 0,
              自動サイズ: {
                  有効: 真、
                  最小サイズ: 6
              },
              テキストスタイル: {
                  普通: {
                      色: 関数() {
                          'rgb(' + [ を返す
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  強調:
                      影ぼかし: 10,
                      影色: '#333'
                  }
              },
              データ: データ1、
          }]
      };
 
      var chart2Option = {
          タイトル:
              テキスト: '各州で確認された症例 - ワードクラウド', //タイトル x: 'center',
              テキストスタイル: {
                  フォントサイズ: 23
              }
 
          },
          背景色: '#fff',
          ツールチップ: {
              表示: 真
          },
          シリーズ: [{
              name: '各州の確認された症例', //データプロンプトウィンドウのタイトルタイプ: 'wordCloud',
              sizeRange: [12, 64], //キャンバスの範囲。設定が大きすぎると、文字数が少なくなります(画面からはみ出します)
              rotationRange: [-45, 90], //データ反転範囲 //shape: 'circle',
              テキストパディング: 0,
              自動サイズ: {
                  有効: 真、
                  最小サイズ: 6
              },
              テキストスタイル: {
                  普通: {
                      色: 関数() {
                          'rgb(' + [ を返す
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  強調:
                      影ぼかし: 10,
                      影色: '#333'
                  }
              },
              データ: データ2、
          }]
      };
      var chart3Option = {
          タイトル:
              テキスト: '各都市の累積確認症例数 - ワードクラウド', //タイトル x: 'center',
              テキストスタイル: {
                  フォントサイズ: 23
              }
 
          },
          背景色: '#fff',
          ツールチップ: {
              表示: 真
          },
          シリーズ: [{
              name: '各都市の累積確認症例数', //データプロンプトウィンドウのタイトルタイプ: 'wordCloud',
              sizeRange: [12, 64], //キャンバスの範囲。設定が大きすぎると、文字数が少なくなります(画面からはみ出します)
              rotationRange: [-45, 90], //データ反転範囲 //shape: 'circle',
              テキストパディング: 0,
              自動サイズ: {
                  有効: 真、
                  最小サイズ: 6
              },
              テキストスタイル: {
                  普通: {
                      色: 関数() {
                          console.log('rgb(' + [
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)
                          ].join(',') + ')')
                          'rgb(' + [ を返す
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  強調:
                      影ぼかし: 10,
                      影色: '#333'
                  }
              },
              データ: データ3、
          }]
      };
      var chart4Option = {
          タイトル:
              テキスト: '各都市の現在の確認症例 - ワードクラウド', //タイトル x: 'center',
              テキストスタイル: {
                  フォントサイズ: 23
              }
 
          },
          背景色: '#fff',
          ツールチップ: {
              表示: 真
          },
          シリーズ: [{
              name: '各都市の確認された症例', //データプロンプトウィンドウのタイトルタイプ: 'wordCloud',
              sizeRange: [12, 64], //キャンバスの範囲。設定が大きすぎると、文字数が少なくなります(画面からはみ出します)
              rotationRange: [-45, 90], //データ反転範囲 //shape: 'circle',
              テキストパディング: 0,
              自動サイズ: {
                  有効: 真、
                  最小サイズ: 6
              },
              テキストスタイル: {
                  普通: {
                      色: 関数() {
                          console.log('rgb(' + [
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)
                          ].join(',') + ')')
                          'rgb(' + [ を返す
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)、
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  強調:
                      影ぼかし: 10,
                      影色: '#333'
                  }
              },
              データ: データ4、
          }]
      };
      chart1.setOption(chart1Option);
      chart2.setOption(chart2Option);
      chart3.setOption(chart3Option);
      chart4.setOption(chart4Option);
    },
  },
};
</スクリプト>
<スタイル lang="less">
 
</スタイル>

5. 完成した絵

要約する

これで、echarts ワード クラウド チャートを使用した vue に関するこの記事は終了です。より関連性の高い vue echarts ワード クラウド チャートのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue に Echarts チャートを追加するための基本的なチュートリアル
  • Vue を使用して動的更新 Echarts コンポーネントを開発するための詳細なチュートリアル
  • Vue で echarts を使用するサンプルコード (3 種類の画像)
  • 複数チャートデータ可視化ダッシュボードを実現するVue2+Echartsの詳しい解説(ソースコード付き)
  • vue ファイルで echarts.js を使用する 2 つの方法の詳細な説明
  • vue.js で echarts を使用して動的データ更新機能を実装する
  • vue+echarts をベースにした大画面でデータ可視化を表示する方法の例
  • Vue Echarts は視覚的な世界地図のコード例を実装します
  • Vue で ECharts を使用する場合の非同期更新とデータ読み込みの詳細な説明
  • Vue+echartsは、動的にチャートを描画し、非同期にデータをロードする方法を実現します。

<<:  Linux でソフトウェア パッケージのバージョンをアップグレードする方法の詳細な説明

>>:  Linuxでのソフトウェア(ライブラリ)の更新コマンドの詳しい説明

推薦する

CSS を使用して等アスペクト比のアダプティブ コンテナを実装する方法

最近、モバイル ページを開発しているときに、ページの幅が 100% の場合、高さは幅の半分になり、携...

MySQL サービスを起動できない問題の解決策を含む MySQL 5.7.17 インストール チュートリアル

.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...

MYSQL updatexml() 関数のエラーインジェクション分析

まず、updatexml()関数を理解する UPDATEXML (XML ドキュメント、XPath ...

IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル

この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...

MySQLが数十億のトラフィックをサポートする方法

目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...

5分でDockerを使ってRedisのクラスターモードとセンチネルモードを構築する方法を教えます

目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...

Docker を使用した JMeter+Grafana+Influxdb 監視プラットフォームの構築に関する詳細なチュートリアル

Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...

MySql8.023 インストール プロセスの詳細なグラフィック説明 (初回インストール)

まず、MySQL公式サイトからインストールパッケージをダウンロードします。MySQLはオープンソース...

ブートストラップ学習体験のまとめ - CSS スタイル デザイン共有

プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...

MySQL マスタースレーブレプリケーションの読み書き分離構造の詳細な説明

MySQL マスタースレーブ設定MySQL のマスター/スレーブ レプリケーションと読み取り/書き込...

MySQL 5.7 でルートパスワードを変更する方法に関するチュートリアル

バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...

MySQL テーブルの断片化を解消し、スペースを再利用する方法

目次MySQL テーブルの断片化の原因行の断片化行内断片化空き領域の断片化MySQL で極度に断片化...

MySQL テーブルの垂直分割と水平分割

垂直分割垂直分割とは、データテーブルの列を分割すること、つまり、多くの列を持つテーブルを複数のテーブ...

MySQLのexplain型の詳細な説明

導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...