@小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也不识别。
你的思路有问题。
首先,每次渲染是根据你的div的大小生成的Canvas;
再来,你resize()并不会变动Canvas;
所以,你想要resize(),就要重新渲染echarts
回复 @小q蹲街:我用了window.onresize,但是不起作用啊我误导你了,看了下接口文档,如下:ECharts没有绑定resize事件,显示区域大小发生改变内部并不知道,使用方可以根据自己的需求绑定关心的事件,主动调用resize达到自适应的效果,常见如window.onresize=myChart.resize。版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。