Vue多组件使用Echarts图显示错乱问题

这篇文章给自己提个醒

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之后图就能正常显示了。
我的问题虽然解决了，但是还是不知道原理，在这里希望各位大佬们能够给我解答一下，万分感谢！！！