ECharts3中的图表大小自适应
来源:互联网 发布:福建知天气 编辑:程序博客网 时间:2024/05/16 05:15
最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表。所以div容器的高度宽度必须指定为px,这设计不知道是为啥。
google到的解决方案如下
- 添加window.onresize=myCharts.resize在setOption之后
我添加后图表的高度被压缩到了min-height,很奇怪,于是自己采用了如下解决方案,直接贴代码了。
var worldMapContainer = document.getElementById('WorldMap');//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽var resizeWorldMapContainer = function () { worldMapContainer.style.width = window.innerWidth+'px'; worldMapContainer.style.height = window.innerHeight+'px';};//设置容器高宽resizeWorldMapContainer();// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(worldMapContainer);// 指定图表的配置项和数据var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'], height: worldMapContainer.style.height, width: worldMapContainer.style.width }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//用于使chart自适应高度和宽度window.onresize = function () { //重置容器高宽 resizeWorldMapContainer(); myChart.resize();};
此时,worldMapContainer的高宽已经无所谓了,因为我们已经在js中设定了div容器高宽。
这个方法可以在使ECharts在高度和宽度上均自适应,如若遇到什么坑,之后再补充。
2017.9.26更新
- 如果是需要图表跟随容器自适应的话,将上述
window.innerWidth
和window.innerHeight
替换为容器元素的container.clientWidth
和container.clientHeight
即可。其根本原理就是通过JavaScript来刷新图表宽高而非直接css自适应(因为ECharts不支持)
阅读全文
0 0
- ECharts3中的图表大小自适应
- ECharts3中的图表大小自适应
- ECharts3中的图表大小自适应
- echarts图表大小自适应
- d3中图表大小自适应区域大小
- echarts 图表根据容器大小自适应
- echarts3 图表配置小总结
- 使用Echarts3.0做图表
- vue中echarts3.0自适应
- 多图表根据浏览器大小的变化自适应
- Echarts 如何设置多个图表自适应窗口大小
- Echarts3中的交互组件
- vuejs2和echarts3组合显示图表
- 使webview中的内容自适应屏幕大小
- 自适应大小
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
- Echarts3.0:实现一个页面放多个Echarts图表的方法
- echarts3 使用((绘制各种图表,地图))
- 今日小程序推荐:斑马音乐-没被发现的好音乐
- 如何采集卫星电视信号并转成网络IP流 (TS over UDP)
- execute immediate在存储过程中的使用
- 我的第一篇博客
- 机器学习导读
- ECharts3中的图表大小自适应
- java常见包名类型
- Java Number & Math 类
- ExcelUtil通用的excel处理类
- long包中的八大基本包装类
- switch mii psgmii mdio 之间的关系
- python3.5+selenium3.4自动化测试5_frame中的对象
- 深层神经网络——多层网络解决异或运算
- spring整合quartz并持久化