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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux でソフトウェア パッケージのバージョンをアップグレードする方法の詳細な説明
>>: Linuxでのソフトウェア(ライブラリ)の更新コマンドの詳しい説明
最近、モバイル ページを開発しているときに、ページの幅が 100% の場合、高さは幅の半分になり、携...
.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...
まず、updatexml()関数を理解する UPDATEXML (XML ドキュメント、XPath ...
この記事は、IDEA で Web プロジェクトを作成し、Tomcat を構成する方法についての統合記...
目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...
目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...
vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...
Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...
まず、MySQL公式サイトからインストールパッケージをダウンロードします。MySQLはオープンソース...
プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...
MySQL マスタースレーブ設定MySQL のマスター/スレーブ レプリケーションと読み取り/書き込...
バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...
目次MySQL テーブルの断片化の原因行の断片化行内断片化空き領域の断片化MySQL で極度に断片化...
垂直分割垂直分割とは、データテーブルの列を分割すること、つまり、多くの列を持つテーブルを複数のテーブ...
導入:多くの場合、さまざまな選択ステートメントを使用して必要なデータを照会した後、多くの人は作業が正...