vue+echartsデータに基づいて大画面表示を可視化する方法の例

EChartsを取得する経路は以下の通りです。あなたの状況に応じて選択してください。
1）最も直接的な方法は、EChartsの公式サイトであなたに似合うバージョンを選んでダウンロードし、異なるパッケージダウンロードを異なる開発者の機能と体積の需要に適用するか、または直接に完全なバージョンをダウンロードすることができます。開発環境は共通のエラーメッセージと警告を含むソースコードのバージョンをダウンロードすることを提案しています。
2）ECharthubで最新バージョンのreleaseをダウンロードしてもいいです。解凍されたフォルダのdistディレクトリに最新バージョンのechartライブラリがあります。
3）またはnpmでecharts、npm install echard--saveを取得し、詳細は「webpackでechartsを使用する」と参照してください。
cdnによって導入され、cdnjs、npmcdnまたは国内のbootcdnでEChartsの最新バージョンを見つけることができます。
この紹介はどのようにvueにechartsを導入しますか？
1.先にインストール依存

npm install echarts --save

2.1グローバル導入メール.jsにおける配置（使用を推奨しないと、カバンが大きすぎ、冗長性が多い）

import echarts from 'echarts' //  echarts
Vue.prototype.$echarts = echarts //     ，       this.$echarts  

2.2コンポーネント内に必要に応じて導入する（推奨使用）
この方法は簡単で，グラフを導入する必要があるコンポーネントには，例えば次のようにヒストグラムを導入する。具体的にどのようなコンポーネントを使うかは、何を導入する必要がありますか？

//         
let echarts = require("echarts/lib/echarts");
//          
require("echarts/lib/chart/bar");

3.グローバル導入の一例として、コンポーネントでの使用例

<template>
	<div class="view-content">
		<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
	</div>
</template>

<script>
	export default {
		name: 'Echarts',
		data() {
			return {
			}
		},
		mounted() {
			this.drawLine();
		},
		methods: {
			drawLine() {
				//       dom，   echarts  
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				//       
				let option = {
					tooltip: {},
					xAxis: {
						data: ["  ", "   ", "   ", "  ", "   ", "  "]
					},
					yAxis: {},
					series: [{
						name: '  ',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				};
				//          
				myChart.setOption(option);
				setTimeout(function() {
					window.onresize = function() {
						myChart.resize();
					}
				}, 200)
			}
		}
	}
</script>
<style lang="scss" scoped>
</style>

4.効果

5.上記の効果は公式の黙認効果です。もちろんこのようにプロジェクトに適用すると明らかに需要に合わないです。よりクールで科学技術的な感覚を持つためには、配置が必要です。



ここで、vue+echartsデータに基づいて大画面表示の方法例についての記事を紹介します。vue+echartsデータの可視化に関する大画面の内容は以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。