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

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

方法一：根据浏览器宽高为echarts容器赋宽高

<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.