echarts 随屏幕大小改变大小(resize)
转 载https://blog.csdn.net/qq6759/article/details/95632822
echarts多个图表大小随屏幕的大小改变自适应,Echarts 多图表自适应窗口大小,echarts随页面大小变化而变化;
当页面只有一个图表的时候直接用 window.onresize = myChart.resize 就可以了
resize 用来改变图表尺寸,在容器大小发生改变时需要手动调用。 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option={title:{text:'ECharts 入门示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]}; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.onresize = myChart.resize;
但是如果一个页面有多个图表的时候就需要用到 addEventListener 了,不然页面上只有一个图表会根据浏览器的变化而自适应。
var myChart = echarts.init(document.getElementById('main')); var myChartA = echarts.init(document.getElementById('mainA')); var myChartB = echarts.init(document.getElementById('mainB')); // 指定图表的配置项和数据 var option={title:{text:'ECharts 入门示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]}; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); myChartA.setOption(option); myChartB.setOption(option); window.addEventListener("resize",function (){ myChart.resize(); myChartA.resize(); myChartB.resize(); });
或者
window.onresize = function(){
myChart.resize();
myChartA.resize();
myChartB.resize();
}
本文作者:___mouM
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。
版权说明:本文版权归作者和博客园共有,欢迎转载。但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利.