mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小

Posted 2022-03-16 attentle

在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表，网上说的window.onresize = mycharts.resize;方法根本就没有效果，后面在https://blog.csdn.net/dreamcarp/article/details/71439060 博客才找到了解决方法，特意记录下来

浏览器有warning：cannot get height and width.

解决方法：

//echarts-content是echarts图表div的id
var worldMapContainer = document.querySelector(‘#echarts-content‘);
// 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () 
worldMapContainer.style.width = window.innerWidth + ‘px‘;
worldMapContainer.style.height = 300 + ‘px‘;
;
// 设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom，初始化echarts实例
var mycharts = echarts.init(worldMapContainer);
//设置图表参数
var option = ;

mycharts.setOption(option);
window.onresize = mycharts.resize;