echarts 多个图形resize时的问题
2016-02-22 00:00
471 查看
可以这样
也可以这样:
2016-03-01那天在处理这个页面时,发现在菜单栏收起和展开时,这个图形没有跟随变动,于是又对代码做了调整。如下:
在第二种方法的基础上 ,将window.addEventListener("resize"),function(){
........
})
替换为
3ff0
function init(){ var chart1 = echarts.init(document.getElementById('chart1')); ...... chart1.setOption(option1); var chart2 = echarts.init(document.getElementById('chart2')); ...... chart2.setOption(option2); var chart3 = echarts.init(document.getElementById('chart3')); ...... chart3.setOption(option3); window.onresize = function() { chart1.resize(); chart2.resize(); chart3.resize(); } }
也可以这样:
function chart1(){ var chart1 = echarts.init(document.getElementById('chart1')); ...... chart1.setOption(option1); return chart1; }; function chart2(){ var chart2 = echarts.init(document.getElementById('chart2')); ...... chart2.setOption(option2); return chart2; }; function chart3(){ var chart3 = echarts.init(document.getElementById('chart3')); ...... chart1.setOption(option3); return chart3; }; $(function(){ jQuery.ajax({ url: , dataType: "json", success: function(data) { var chart1 = chart1(); var chart2 = chart2(); var chart3 = chart3(); } }); window.addEventListener("resize", function () { chart1.resize(); chart2.resize(); chart3.resize(); }); });
2016-03-01那天在处理这个页面时,发现在菜单栏收起和展开时,这个图形没有跟随变动,于是又对代码做了调整。如下:
在第二种方法的基础上 ,将window.addEventListener("resize"),function(){
........
})
替换为
$("#main-content").on("resize", function () { if(chart1!=null ){ chart1.resize(); } if(chart2!=null){ chart2.resize(); } });
3ff0
相关文章推荐
- ECharts仪表盘实例代码(附源码下载)
- Ajax获取到数据放入echarts里不显示的原因分析及解决办法
- echarts图表导出excel示例
- Canvas和SVG的区别
- 解决ajax获取到数据放到echarts里不显示问题
- leaflet-echarts,使用leaflet加载echarts制作超炫可视化地图
- ECharts初使用,从后台得到数据源
- Convert shp to geoJSON,for ECharts.
- 基于ECharts报表开发
- echarts简单使用
- Spring 组合Echart.js
- 同时添加多个窗口改变大小事件
- echarts 文字标签云图实现方法
- echarts 兼容IE8问题 与实际开发范例
- Echarts小感
- 带时间轴的线型报表的配置说明和多维度的说明:
- 心路历程-初尝echarts
- ECharts Java 动态加载数据,echartsjava
- 如何让echarts在extjs5中自适应大小
- extjs5中使用echart让图表更丰富