echarts 图形随屏幕大小改变(resize)

echarts 的resize 用来改变图表尺寸，当容器大小发生变化时使用window.onresize = myChart.resize可使图标随着屏幕大小改变。//初始化echartsvar myChart = echarts.init(document.getElementById('main'));//此处省略echarts的配置项.......//加载echarts配置项myChart.

D_jing20

18391人浏览 · 2022-03-14 13:53:42

D_jing20 · 2022-03-14 13:53:42 发布

echarts 的resize 用来改变图表尺寸，当容器大小发生变化时使用 window.onresize = myChart.resize 可使图标随着屏幕大小改变。

//初始化echarts
var myChart = echarts.init(document.getElementById('main'));

//此处省略echarts的配置项
 .......

 //加载echarts配置项
 myChart.setOption(option);

 //图形宽度随屏幕宽度改变而改变
 window.onresize = myChart.resize;

如果一个页面有多个图表的时候，需要特殊设置，不然页面上只有一个图表会根据浏览器的变化而自适应。

//初始化echarts
var myChart = echarts.init(document.getElementById('main'));
var myChartA = echarts.init(document.getElementById('mainA'));
var myChartB = echarts.init(document.getElementById('mainB'));

//此处省略echarts的配置项
 .......

//加载echarts配置项
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();
}