[apache/echarts]官网实例是如何实现图表宽高随浏览器窗口变化而自适应的？

问题简述 (One-line summary)

官网实例是如何实现图表随浏览器窗口变化而自适应的？ DOM宽高设置为百分比？浏览器窗口变化时调用resize？

版本及环境 (Version & Environment)

ECharts 版本 (ECharts version):3.2.3
浏览器类型和版本 (Browser version):chrome
操作系统类型和版本 (OS Version):win7 64位

maoyr

监听浏览器的 resize 事件然后调用 myChart.resize()

pissang

最初指定DOM：

，添加监听后调用 myChart.resize()，宽度可以随之正常变化，但高度始终是300px，是在bootstrap布局里放置的图表，百分比似乎不适用？

如果获取浏览器变化后的高度再赋值给DOM，就会重新初始化生成一遍图表，大小是正确的，但是效果不如官网好。

请问这样的话该怎么解决？

maoyr

<div id="main" style="height:300px;"></div>

maoyr

百分比怎么不适用了，写死高度是没法自适应的

pissang

在bootstrap里，row没有固定高度··· height:100% 撑起的高度太小，图表不能正常展示 height:0px;padding-bottom:100% 报错找不到Dom的width、height

maoyr

类似的问题，两个实例，为什么只有一个实例随着浏览器窗口的变化而变化，而另一个不变。要怎么写？ myChart.setOption(option); myChart2.setOption(option2); window.onresize = myChart.resize; window2.onresize = myChart2.resize;

warlock-lv

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

pissang

我是用过修改css中的zoom 来控制页面缩放的、但是放大后图表功能区错位，重新调用myChart.resize依旧无效如何解决代码如下：

<!DOCTYPE html>

ECharts

1304800050

tim 20170630211715

请问这是什么原因导致的

echart 溢出了容器的高度，这是在初始化的时候

mxy2316868975javascript

@maoyr 我也是遇到这个问题，你后来是怎么解决的？

KJlmfe

window2不存在吧，而且同一个事件函数定义会被覆盖

xingaa

[apache/echarts]官网实例是如何实现图表宽高随浏览器窗口变化而自适应的？

回答