1
回答
echarts dom大小用百分比
滴滴云服务器,限时包月0.9元,为开发者而生>>>   

@小q蹲街 你好,想跟你请教个问题:我的echarts的容器大小之前用的px,有多个容器,现在想让它自适应大小,开始时用window.onresize=function(){...}不起作用。因为之前做过一个图表,当时的div用的百分比,就想把这个多个div也换成百分比结果居然都加载不出来了。想问一下多个div的自适应怎么做?这是我的代码

for(var i=0;i<seriesarr.length;i++){
	      
		    myCharts[i] = ec.init(document.getElementById("container" + i));
		    myChartZooms[i] = ec.init(document.getElementById("newdiv" + i));
		    
		    var myChartContainer = function () {
		             myCharts[i].style.width = "container"+i.clientWidth+'px';
   					 myCharts[i].style.height = "container"+i.clientHeight+'px';
    			   	
    			   	 myChartZooms[i].style.width = "newdiv"+i.clientWidth+'px';
    			   	 myChartZooms[i].style.height = "newdiv"+i.clientHeight+'px';
			};
           myChartContainer();  
		   
			var option = MyECharts.ChartOptionTemplates.Bar(legendData[i],xdata,xtype,seriesarr[i]);
		     myChartZooms[i].setOption(option);
         	 myCharts[i].setOption(option); // 为echarts对象加载数据 
         	 
         
         	window.onresize = function () {
         		for(var i=0;i<myCharts.length;i++){
   				   		 myCharts[i].resize();
   				 }
   				 for(var i=0;i<myChartZooms.length;i++){
   				   		 myChartZooms[i].resize();
   				  }
   				   
			 };

之前写的是用window,也没起作用

     myCharts[i].style.width = window.innerWidth+'px';
     myCharts[i].style.height = window.innerHeight+'px';

报错width,height都不识别,就换成domdiv.clientWidth,domdiv.clientHidth其中的width还有height也不识别。

<无标签>
举报
古月哥欠666
发帖于5个月前 1回/41阅

以下是问题补充:

  • @古月哥欠666 :一个图表,width和height用百分比再加window.onresize()能做出大小随页面的大小而变化来,多个图表div用百分比时都不能初始化。但是多个图表用px至少图能加载出来就是不能自适应大小。 (5个月前)

你的思路有问题。

首先,每次渲染是根据你的div的大小生成的Canvas;

再来,你resize()并不会变动Canvas;

所以,你想要resize(),就要重新渲染echarts

--- 共有 2 条评论 ---
古月哥欠666 回复 @小q蹲街 : 我用了window.onresize,但是不起作用啊 5个月前 回复
小q蹲街我误导你了,看了下接口文档,如下: ECharts没有绑定resize事件,显示区域大小发生改变内部并不知道,使用方可以根据自己的需求绑定关心的事件,主动调用resize达到自适应的效果,常见如window.onresize = myChart.resize。 5个月前 回复
顶部