1. 程式人生 > >vue框架下,echarts圖表外部容器寬度設定為百分比時內容超出容器以及echarts圖表自適應的實現方案

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

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