研究了一下午，終于搞懂了是為啥。

先看一下代碼，兩個tab標簽頁，其中一個放chart的掛在節點，但是初始化的時候一直報兩個錯。

<a-tabs default-active-key="1" @change="callback"><a-tab-pane key="1" tab="預覽"><a-tablesize="small":pagination="false":scroll="{x: 10000, y: 500}":columns="columns":data-source="data"></a-table></a-tab-pane><a-tab-pane key="3" tab="可視化"><div id="chartMountNode"></div></a-tab-pane></a-tabs> const graphMountNode = document.getElementById("chartMountNode")this.chart = new G2.Chart({container: graphMountNode,width: 600,height: 300});

Please specify the container for the chart!

這個是因為chartMountNode的div不存在導致的，在G2畫圖之前div還沒有渲染。

但問題是，default-active-key指定的是1，所以3標簽頁里掛載節點的div還沒有渲染，所以，不能放在這里。

TypeError: Cannot read property 'appendChild' of null

this.chart = new G2.Chart({container: "chartMountNode",width: 600,height: 300});

這個不知道是為啥，直接從文檔里復制過來的代碼結果不能運行，只能用document.getElementById先獲取元素。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue+G2:Please specify the container for the chart! + Cannot read property ‘appendChild‘ of null的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。