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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux でソフトウェア パッケージのバージョンをアップグレードする方法の詳細な説明
>>: Linuxでのソフトウェア（ライブラリ）の更新コマンドの詳しい説明
![入力[type=file]の起動が遅くて動かなくなる問題を素早く解決します](/upload/images/67cac06ea7027.webp)
推薦する
MySQLデータクエリが多すぎるとOOMが発生するかどうかについての簡単な議論
目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...
Svelte の Defer Transition を Vue で実装する方法
最近、Rich Harris の <Rethinking Reactivity> ビデオ...
CSS設定div背景画像実装コード
コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...
MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル (一般)
MySQLサービス8.0.14のインストール（一般）の参考までに、具体的な内容は次のとおりです。イ...
MySQLデッドロックの原因と解決策
データベースは、オペレーティング システムと同様に、複数のユーザーが使用する共有リソースです。複数の...
MySQLインデックスの詳細
1. インデックスの原則インデックスは、列内の特定の値を持つ行をすばやく見つけるために使用されます。...
CocosCreatorを使ってシューティングゲームを作る方法
製造手順を分析します。 1. リソースを準備してシーンを構築するオンラインでリソースを探すか、私のリ...
VMware 仮想マシンで Linux の IP アドレスを表示する方法
1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...
シェルで文字列内のスペースや指定された文字を削除する方法
インターネット上には、正しい方法であっても、使用しても正しい結果が得られない方法が数多くあります。正...
VMWare ネットワーク アダプタの 3 つのモードの実装プロセスの分析
3つのモードブリッジ（ブリッジ モード）、NAT（ネットワーク アドレス変換モード）、ホストオンリー...
MySQL 8.0.17 のインストールと使用方法のチュートリアル図
前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...
ウェブデザイン経験
<br />著者はかつてWebデザインの初心者でしたが、継続的な探求と実践を通じて、今で...
JavaScript を使用してページに動的な検証コードを実装する例
導入：現在、プログラム攻撃を防ぐために、ユーザーがログインまたは登録するときに多くの動的検証テクノロ...
Vue モバイル開発で better-scroll を使用するときにクリック イベントが失敗する問題の解決策
最近、モバイル プロジェクトの開発方法を学ぶために vue を使用し、スクロールには better-...
Echatsチャートの大画面適応を実装する方法
目次説明する成し遂げるプロジェクトのディレクトリ構造は次のとおりです。効果図は以下のとおりです要約す...