在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方法生效。

vue框架下，echarts圖表外部容器寬度設置為百分比時內容超出容器以及echarts圖表自適應的實現方案