在vue項目里，組件復用是一件很開心的事，可以節省很多時間去排版，達到事半功倍效果，但是昨晚在vue-cli項目里組件復用時發現基於Echarts圖表的組件不能夠復用，昨晚捯飭了很久，終於還是解決了這個問題，在此記錄，加深自己理解。
具體來說，問題如下：開發了一個基於Echarts的圖表組件，現在我想在一個界面內多次使用這個組件，但是我發現Echarts是通過找id來創建canvas的，這樣調用同一個基於Echarts的組件時，這個id就會重復，導致第二個圖表不能顯示出來。如下圖所示，按理說左下方應該也有左上方所示的基於Echarts的圖表組件，但是並沒有加載出來。
參考核心代碼：
參考結果：
解決辦法(昨晚捯飭了好久才思索到這個方法)：具體來說，就是在組件內動態生成id，然后將這個id賦值給DOM，再使用Echarts初始化即可。問題的關鍵就在於如何在組件內動態生成id，這個是最關鍵的，思索了好久發現了一個很笨的方法（哈哈，能解決問題就行.....）：先是獲取系統當前時間，利用getTime()函數返回從1970年1月1日至今的毫秒數，然后將這個毫秒數賦值給id，再將這個id再賦值給DOM即可。這樣，在組件復用時，由於創建vue實例的時間必定有所差別，不同的毫秒數形成了不同的id名，這樣我們就可以在同一界面復用這個基於Echarts的組件了。
參考核心代碼：
參考結果：
分別查看兩個基於Echarts組件的id，發現id名確實不一樣。
注意一個題外細節：必須為 ECharts 准備一個具備高寬的 DOM 容器，否則無法進行初始化。