原文:http://blog.csdn.net/u012043416/article/details/51912011
最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表。所以div容器的高度宽度必须指定为px,这设计不知道是为啥。
google到的解决方案如下
- 添加window.οnresize=myCharts.resize在setOption之后
我添加后图表的高度被压缩到了min-height,很奇怪,于是自己采用了如下解决方案,直接贴代码了。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
此时,worldMapContainer的高宽已经无所谓了,因为我们已经在js中设定了div容器高宽。
这个方法可以在使ECharts在高度和宽度上均自适应,如若遇到什么坑,之后再补充。
2017.9.26更新
- 如果是需要图表跟随容器自适应的话,将上述
window.innerWidth
和window.innerHeight
替换为容器元素的container.clientWidth
和container.clientHeight
即可。其根本原理就是通过JavaScript来刷新图表宽高而非直接css自适应(因为ECharts不支持)