vueでechartsを使用する際の問題点。Error Initialize failed invalid dom

今日、echartsを使っているときに小さな問題が発生しましたので、記録しておきます。

まず、echartsの使い方です。

// 1: npm install dependencies
npm install echarts --save
// 2: Introduce echarts
import * as echarts from 'echarts'; // Note: here you want * as echarts instead of import echarts from xxx
// 3: Need an exit to display echarts
<div id="hello-world"></div>
// 4: Initialization: initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('hello-world'));
myChart.setOption({ // draw chart
	title: {
	   text: 'ECharts Getting Started Example'
	},
	tooltip: {},
	xAxis: {
	   data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']
	},
	yAxis: {},
	series: [{
	   name: 'sales',
	   type: 'bar',
	   data: [5, 20, 36, 10, 10, 20]
	}]
});

 ここでのポイントは、手順4で遭遇した問題です。

1 エラーが報告されることがあります: "エラー。Initialize failed: invalid dom."

   エラーの理由は、domがまだマウントされていないためで、これを処理する方法はいくつかあります。

   1.1 ここで created を使用しないでください (mounted を使用してください)、created はまだインスタンスを作成するだけで、テンプレートはまだマウントされていません。
   1.2 this.$nextTick(()=>{}) を使う（このコールバック関数は、データがマウントされ更新された後に実行されるので、うまくいきます）。
   1.3 プロミスの使用

コードはこのようになります。

mounted() {
	// this.$nextTick(()=>{
		 this.initData()
	// })
	// // Create a new promise object
	// let newPromise = new Promise((resolve) => {
	// resolve()
	// })
	// // then asynchronously execute the initialization function of the echarts
	// newPromise.then(() => {
	// // This dom is the echarts icon display dom
	// this.initData()
	// })
},

2 Echartsで表示される終了タグ（<div id"hello-world"></div> ）には、幅と高さを設定しなければ、表示されません。