解決Tab切換echarts圖表不能正常顯示問題:css
// 繪圖div父容器的寬度 let w = $('.figure').width(); $('#fig-t').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果 $('#fig-f').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果 $('#fig-e').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果 fig_t = echarts.init(document.getElementById('fig-t'), 'white', {renderer: 'canvas'}); fig_f = echarts.init(document.getElementById('fig-f'), 'white', {renderer: 'canvas'}); fig_e = echarts.init(document.getElementById('fig-e'), 'white', {renderer: 'canvas'});
上面只是解決了Tab頁切換致使的圖表顯示問題,canvas
因爲是在圖表初始化的時候設置了容器寬度,圖表並不能隨窗口縮放自適應,下面是解決方法:echarts
window.onresize = function () { // 繪圖div父容器的寬度 let w = $('.figure').width(); $('#fig-t').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果 $('#fig-f').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果 $('#fig-e').css('width', w); // 獲取父容器的寬度直接賦值給圖表以達到寬度100%的效果 if ((typeof fig_t) !== "undefined" && fig_t.dispose) { // ECharts隨窗口大小改變而自適應 fig_t.resize(); } if ((typeof fig_f) !== "undefined" && fig_f.dispose) { // ECharts隨窗口大小改變而自適應 fig_f.resize(); } if ((typeof fig_e) !== "undefined" && fig_e.dispose) { // ECharts隨窗口大小改變而自適應 fig_e.resize(); } };