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);
});

或者循环缩放也是可以的,个人感觉第二种比较好

   this.$nextTick(()=>{var charts = [];var echartsList = document.querySelectorAll(".mychart"); for(var i = 0; i<echartsList.length; i++ ){var myChart = echarts.init(echartsList[i]);myChart.setOption(this.option);charts.push(myChart);myChart.setOption({xAxis:{data: this.echartTime},series:[{ data: this.echartDate[i]}]});charts.push(myChart);}window.addEventListener('resize',()=>{for(var i = 0; i < charts.length; i++){charts[i].resize();}})})

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
最后：如果此篇博文对您有帮助，还请动动小手点点关注点点赞呐~，谢谢 ~ ~

Echarts图表根据浏览器窗口缩放进行动态缩放，多个echarts同时缩放相关推荐

echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）
问题提出: 使用echars做完图表之后,需要根据浏览器窗口的缩放做自适应效果. 原因分析及解决方案: echars的图标实例事实上并没有主动的去绑定resize()事件,就是说显示区域的大小改变内部 ...
echarts图表自适应浏览器、盒子宽高
一.出现的问题二.想要的效果三.实现步骤 1.在html中,一定要写宽高100% <div id="main" style="width: 100%; heig ...
Echarts图表在VUE项目中使用动态数据源
动态数据源问题:目前我使用的方法是当后台查询到数据时,直接传递给option中的对应data内: 例如柱状图,可以直接将x轴数据注入到 this.option.xAxis.data 中,如 this. ...
vue动态生成多个Echarts图表
vue动态生成多个Echarts图表首先先动态的获取到id <div v-for="(item,index) in chartList" :key="index& ...
echarts 图表导出PDF(带滚动条)/图片导出PDF
echarts 图表导出PDF[带滚动条]/图片导出PDF 效果展示提出问题思考问题解决问题导出PDF 里面的页头中文乱码问题参数说明效果展示提出问题在开发过程中,有需求是将展示出来的 ...
零基础ECharts 图表使用步骤流程图详解与 pc 端自适应
前言:呦呦呦是我我来了我是静静,这回又是零基础 echarts 图表的使用,最近项目中要用到echarts 使用,实话是在使用中,一共就三个步骤,看完开发文档稳稳当当的就会使用,但是大家懒啊所以这 ...
js将html转为word文档,js将html导出到word文档（含echarts图表）
需求在开发项目途中遇到了一个需求,就是将一个整个HTML界面导出到word文档,其中包含了echarts图表,经过一番折腾,终于完成了~~~(鸡肋),过程中用到了几个插件,总结了一下几个步骤,希望可 ...
vue socketio 实现echarts图表动态显示
本文主要为续之前vue和flask使用socketio实现互连的文章,记一下我的Vue项目中使用echarts实现动态图表的方法. 如仍然不了解 socketio 的使用方法,可点击此看我之前写的关于 ...
openlayers学习——14、openlayers结合echarts图表和地图
openlayers结合echarts图表和地图一.普通饼图.柱图二.加载炫酷地图标记前言:基于Vue,学习openlayers,根据官网demo,记录常用功能写法.本人不是专业GIS开发,只是 ...

Echarts图表根据浏览器窗口缩放进行动态缩放，多个echarts同时缩放

Echarts图表根据浏览器窗口缩放进行动态缩放，多个echarts同时缩放相关推荐

最新文章

热门文章