关于echarts 同页面多图表同实例名resize只变一个的解决方法

3 篇文章 0 订阅
1 篇文章 0 订阅

今天项目中做一个客户决策分析的echarts图表分析,在同一页面有多个图,在浏览器改变大小的同事图表也要跟着变化,但是单纯的使用


 window.addEventListener("resize",function(){
            $Chart.myChart.resize();    
 });

时不行的 ,作用的只是最后一个测试7 才会变 由于图表的所有数据和数量都是通过服务端过来的,因此所有的实例的名称都一样

 for(var i = 0 ;i < chartDatas.length; i++){
                var datas = chartDatas[i];
                var list = datas.dataSource;
                var body = '<div class="box'+ i+' box"style="height:'+datas.displaySize.split(",")[0] +'%;width:'+datas.displaySize.split(",")[1]+'%;position:absolute;top:'+ datas.location.split(",")[0]+'%;left:'+datas.location.split(",")[1] +'%">'
				            + '<div class="main'+ i +'"style="position:absolute;top:0;left:0;z-index:20;width:100%;height:100%;overflow: hidden;">'
				            + '<div id="main'+ i +'" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;overflow: hidden;">'			
				            + '</div>'
				            +' </div>'
			                + '</div>';
			    $("#content").append(body);
                var type = parseInt(datas.chartType); 
			    if(type == 0){
			        var list0 = [datas.dataSource.caseInfo];
			        $Chart.get(type,"main"+i,list0,datas.title,datas.color,datas.unit,distance); 
			    }else if(type == 7){
			        var div = "<div style='font-weight:bold;color:"+ datas.color +"'>"+ datas.title +"</div>";
			        $("#main"+i).html(div).append(htmlDecode(datas.html));
			    }else{
			        $Chart.get(type,"main"+i,list,datas.title,datas.color,datas.unit,distance);		     
			    }  
}

 $Chart.get是我自己写的插件 包含了所有图表的类型,通过判断type的数值来插入不同类型的图形表,进入页面的时候插入以i为顺序的不同div中如果直接在for循环中写resize的话是不行的只有 测试7 会resize,但是在for中console.log出$Chart.myChart(实例化名在插件中定义的)是把所有的都会打印出来,但是resize只会是最后一个,最开始我实在window的resize中再写了一个resize但是作用也是最后一个,打印出来不是全部而是最后一个。解决的方法是什么呢?由于在for中能打印出来所有的实例化,那么我们就var 一个空数组charts在for外面
var charts = []
在for循环中将$Chart.myChart 都push到这个数组中

然后在for循环外添加resize

window.addEventListener("resize",function(){
        for(var i = 0; i < charts.length; i++){
            charts[i].resize();
        }
        });
这样每一个实例化都会跟随浏览器的变化而变化。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在Vue3中,当一个页面引入多个echarts时,由于每个echart实例都具有自己的Dom元素,并且每个实例都需要根据父容器的大小进行自适应,可能会出现自适应失灵的问题。 为了解决这个问题,可以采取以下几个步骤: 1.确保每个echart实例的Dom元素都有唯一的id,在页面的template中设置不同的id。 2.在Vue3中,可以通过使用refs来获取echart实例,然后对每个实例进行相应的操作。 3.在生命周期的mounted钩子函数中,对每个echart实例进行初始化,并设置其自适应。可以使用window的resize事件监听父容器的大小变化,然后调用echart实例resize方法。 4.在数据更新后,可以通过watch来监听数据的改变,并调用相应的echart实例的setOption方法进行更新。 综上所述,通过以上步骤,可以使得多个echarts实例在同一个页面中进行自适应,并且随着父容器的大小变化而更新。这样就可以解决多个echarts实例自适应失灵的问题。 ### 回答2: 当一个页面引入了多个echarts图表时,使用Vue3进行自适应可能会导致失灵的情况发生。这是因为Vue3中的组件渲染和数据响应机制发生了变化,可能会导致echarts图表无法正确地根据父容器的大小进行自适应。 要解决这个问题,我们可以采取以下步骤: 1. 在Vue3中,使用`nextTick`方法来确保DOM已经完全渲染后再进行echarts图表的初始化。在组件的`mounted`钩子函数中,使用`nextTick`来确保初始化的echarts图表能够正确获取父容器的大小。 2. 在需要自适应的echarts图表中,使用`window.onresize`事件来监听窗口大小的变化,并在事件回调函数中重新绘制图表。这样可以确保图表能够根据父容器的大小进行自适应。 3. 如果有多个echarts图表需要进行自适应,可以为每个图表添加一个专属的`resize`事件,并在事件回调函数中根据当前图表的父容器大小重新绘制图表。 总结来说,要解决Vue3中多个echarts图表自适应失灵的问题,我们需要确保图表的初始化在DOM渲染完成后进行,并通过监听窗口大小变化的事件来实现图表的自适应。这样可以确保多个图表能够正确地根据父容器的大小进行自适应。 ### 回答3: 在Vue3中,当一个页面引入多个echarts图表并且要实现自适应的时候,可能会出现自适应失灵的情况。这是因为echarts图表默认是根据其容器的大小来自适应的,而在Vue3中,由于组件的加载顺序以及页面的渲染顺序可能存在差异,导致echarts在计算容器大小时获取到的是不准确的数值。 解决这个问题的方法有以下几种: 首先,可以使用Vue3的生命周期钩子函数来手动触发echarts的自适应计算。在mounted钩子函数中,使用ref获取到页面echarts容器的DOM元素,然后调用echartsresize()方法,强制图表重新计算自适应大小。这样即使组件加载顺序有变化,也能确保每个图表都能正确地计算自适应大小。 其次,可以使用Vue3的watch特性来监听页面容器的大小变化。通过监听容器的width和height属性,当属性发生变化时,调用echartsresize()方法进行自适应计算。这样无论页面中有多少个echarts图表,只要有容器大小变化,都能触发echarts的自适应计算。 最后,可以考虑使用Vue3提供的第三方插件或者封装自定义指令来处理echarts的自适应。这些插件或者指令会在页面渲染完毕后自动触发echartsresize()方法,保证图表大小的正确计算。通过使用这些插件或者指令,可以简化代码,提高开发效率。 综上所述,通过合理运用生命周期钩子函数、watch特性以及第三方插件或自定义指令,可以解决在Vue3中多个echarts图表自适应失灵的问题。这样能够确保页面中的每个图表都能正确计算适应大小,提供良好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值