技術標籤：VueJsvue

這篇文章給自己提個醒

vue在使用Echarts時，一般都是一個圖表一個元件。

元件一：
<template>
	<div id='myChart'></div>
</template>
元件二：
<template>
	<div id='myChart'></div>
</template>
元件三：
<template>
	<div id='myChart'></div>
</template>
......

第一個元件結果圖：

第二個元件結果圖：

第三個元件結果圖：

這裡第四個結果就不展示了，因為每個vue元件都有自己的作用域，所以我們可以想象上面幾張圖就是咱們要的結果。但是結果就是展示的時候頁面沒有報錯，只有第一個圖可以展示出來，其他三個出不來。如果點選切換第二圖，那麼就會在第一個圖的位置展示第二個圖。結果就是，只在第一個圖位置顯示，有時候圖表顯示還會亂套。
這問題困惑了哥們兒兩個小時。最終我想是不是因為四個圖的ID一樣導致的，但是每個vue元件都有自己的作用域，感覺跟ID沒啥關係，但是實在是沒有別的辦法了，就試著改了一下。果然就是id的問題。這給哥們難受的。修改成不同的ID之後圖就能正常顯示了。
我的問題雖然解決了，但是還是不知道原理，在這裡希望各位大佬們能夠給我解答一下，萬分感謝！！！