vue echarts中改变canvas长和宽 自适应

存放Echarts的DOM容器，如果给的高和宽是百分比，渲染的时候DOM容器的高和宽是按百分比给的，但是DOM容器下的子元素div和canvas高和宽是根据图标内容渲染。项目应用的时候，底部会有一部分DOM容器和div的高度差，不美观。
希望Echarts的canvas和DOM容器的高宽一致。
下面给出代码：

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

<script>
  import echarts from 'echarts'
  
  export default {
     
    name: "Chart",
    mounted() {
     
      var myChartContainer = document.getElementById('main')

	// 获取自适应的高度和宽度
      var resizeMyChartContainer = function() {
     
        myChartContainer.style.height = window.innerHeight * 0.65 + 'px';
        myChartContainer.style.width = window.innerWidth * 0.75 + 'px';
      };
	// 设置容器高和宽
      resizeMyChartContainer();

      var myChart = echarts.init(myChartContainer);

      let option = {
     };
      
      myChart.setOption(option);
	// 自适应高和宽
      window.onresize = function () {
     
        resizeMyChartContainer();
        myChart.resize();
      }
    }
  }
</script>

这里的DOM容器下的div和canvas高和宽和DOM容器一样了

错误1

document.getElementById('main').firstChild.firstChild.style.height = window.innerHeight * 0.55 + 'px'

如果强行获取canvas元素，改变它的高度（上面的div和DOM高度都不变），会把echarts拉高，图像也拉高了，比例不对。

错误2

var myChart = echarts.init(myChartContainer, {
     width:'800px',height:'400px'});

在初始化的时候传入高和宽，此时DOM元素下的div和canvas的高和宽还是渲染出来的。传入的数据限制了数据展示区域的高和宽。