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でのソフトウェア（ライブラリ）の更新コマンドの詳しい説明

推薦する

英語: リンクタグはIEでhrefを自動的に補完します

英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...

dl、dt、dd はいつ使用するのが適切ですか?

dl：定義一覧定義リストdt：定義タイトルタイトルを定義するdd：定義説明定義の説明dt は情報のタ...

vxe-table を使用して vue で編集可能なテーブルを作成するプロセス

プロジェクトには、オンラインで編集する必要があるテーブルがあります。最初は、要素の el-table...

1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

1. 単一行オーバーフロー1. 1 行がオーバーフローした場合、超過部分は表示されます...または、...

Vue computedのキャッシュ実装原理の詳細な説明

目次計算結果を初期化する依存関係の収集アップデートを配布する総括するこの記事では、計算された初期化と...

React HTML で react を使用する 2 つの方法

基本的な使い方 <!DOCTYPE html> <html lang="...

MySQL シリーズ データベース設計 3 つのパラダイム チュートリアルの例

目次1. データベース設計の3つのパラダイムに関する知識の説明1. デザインパラダイムとは何ですか?...

JavaScript で右クリック メニューを統合する layim のサンプル コード

目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...

モバイル開発におけるHTML5開発の現状を深く理解する

「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...

js のマクロタスクとマイクロタスクについての簡単な説明

目次1. JavaScriptについて2. JavaScript イベントループ3. マクロタスクと...

Vue Element-ui フォーム検証ルールの実装

目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...

MYSQL データベースの基礎 - 結合操作の原理

結合では、ネスト ループ結合アルゴリズムが使用されます。ネスト ループ結合には 3 つの種類がありま...

nginx リクエスト ヘッダー データ読み取りプロセスの詳細な説明

前回の記事では、nginx がリクエスト ラインのデータを読み取って、リクエスト ラインを解析する方...

Linux 上で Python3.6 をコンパイルしてインストールするための詳細なチュートリアル

1. まず、公式ウェブサイト https://www.python.org/downloads/so...

Win10 DVWA のダウンロード、インストール、構成のグラフィック チュートリアルの詳細な説明 (初心者向け学習侵入)

コンピュータ システムが再インストールされ、侵入テスト学習環境 DVWA を再インストールする必要が...