[JavaScript知识库] Echarts图表根据浏览器窗口缩放进行动态缩放，多个echarts同时缩放

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Echarts图表根据浏览器窗口缩放进行动态缩放，多个echarts同时缩放 -> 正文阅读

[JavaScript知识库]Echarts图表根据浏览器窗口缩放进行动态缩放，多个echarts同时缩放

更改之前的效果图:

在这里插入图片描述
更改之前浏览器窗口放大缩小图表都不会进行动态的缩放，
更改之后的效果图：

在这里插入图片描述
更改之后图表就会根据浏览器窗口大小实时监听进行缩放
代码：

        topChart.setOption({
          series: [
            {name: '最大值',type: 'line',stack: '最大值',data: dataMax},
            {name: '最小值',type: 'line',stack: '最小值',data: dataMin},
            {name: '平均值',type: 'line',stack: '平均值',data: dataAvg},
          ]
        });
        window.addEventListener("resize",()=> {//监听浏览器窗口大小
          topChart.resize();
        });

如果有多个图表同时渲染，给个定时器就可以了，ss[0]，ss[1]，ss[2]，ss[3]分别表示四个图表的class

var resizeTimer = null;
window.addEventListener("resize", () => { 
	if (resizeTimer) {
		clearTimeout(resizeTimer)
	}
	resizeTimer = setTimeout(function(){
      ss[0].resize();
      ss[1].resize();
      ss[2].resize();
      ss[3].resize();
	}, 10);
});