JS----多个Echarts resize方法，只有一个图表自适应生效

原创已于 2022-03-28 11:46:16 修改 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts resize

于 2022-03-28 09:58:14 首次发布

JS小记专栏收录该内容

22 篇文章

订阅专栏

本文探讨了ECharts中多个图表在窗口调整大小时仅有一个图表能正确自适应的问题，并提供了几种解决方案，包括使用addEventListener监听窗口变化、设置定时器延迟执行resize方法等。

多个Echarts resize方法，只有一个图表自适应生效

Echarts的 resize方法，在多个echarts图标下window.onresize，只有一个图表自适应生效

有多个时，单个生效

var option = layui.myChart.option.bar(data.dateList, data.valueList);
option.series[0].name = name;
var chart = layui.myChart.initChart(id, option);

window.onresize = chart.resize;

有多个时，多个生效

var option = layui.myChart.option.bar(data.dateList, data.valueList);
option.series[0].name = name;
var chart = layui.myChart.initChart(id, option);

window.addEventListener("resize", () => {
	chart.resize()
})

window.onresize = () => {
        chart1 && chart1.resize();
        chart2 && chart2.resize();
    }

使用定时器

var timer = null;
    $(window).on('resize', function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(function(){
                chart1 && chart1.resize()
                chart2 && chart2.resize()
            }, 400);
        }
    );