解决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();
}
};
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/119531.html原文链接:https://javaforall.cn