Echarts高和宽自适应问题

<div id="myEcharts" style="display: none">

        <div id="main" ></div>
    </div>

function creatEcharts() {
    let myChartId = document.getElementById("main");
    //高度计算
    this.chartssize(document.getElementById("myEcharts"),myChartId);

    let myChart = echarts.init(myChartId);
    let option = {

        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }]
};
     // 为echarts对象加载数据
    myChart.clear();
    myChart.setOption(option,true);
     //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function () {
        myChart.resize()
    });
}


function chartssize(container, charts) {
    function getStyle(el, name) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(el, null);
        } else {
            return el.currentStyle;
        }
    }
    let hi = getStyle(container, 'height').height;
    charts.style.height = hi;
}