解决Tab切换echarts图表不能正常显示问题:
// 绘图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页切换导致的图表显示问题,
由于是在图表初始化的时候设置了容器宽度,图表并不能随窗口缩放自适应,下面是解决方法:
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(); } };