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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐