echarts随屏幕大小改变大小（resize）

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(); }