在vue.js框架下，建立echarts圖表，當圖表的外部容器的寬度設定為百分比時，出現圖表內容寬度超出其外部容器的情況，幾番除錯，得解決方案如下：

（備註說明：問題產生的具體原因尚不清晰，後面若知曉了再補充，但是初期解決問題階段一定不要鑽牛角，不是一開始就能或者可以知道真理的）

• 在建立了echart物件之後，就呼叫一次echart的resize方法，同時，獲取圖表資料的方法應該是非同步的，如果是初期除錯模擬也要用setTimeout延遲一下，0秒即OK了。

methods: {
    ...mapActions("chartonetwo", ["getData"]),
    initChart() {
      let oChart = echarts.init(document.getElementById("chartone"));
      oChart.resize();//關鍵步驟
      ......（其他程式碼省略）
    }
}
 

echart圖表隨視窗大小變化的自適應的實現方法

• 在渲染圖表即setOption之後，新增視窗的resize方法

oChart.setOption(option);
window.addEventListener("resize", function() {
    oChart.resize();
});

• 特別注意：當專案是引用jquery框架時，此處的事件新增也一定要用原生js的方式，否則，當一個頁面中有多個echart圖表時，會造成事件的覆蓋，即只有一個圖表的resize方法生效。