Vue3 echarts 图表跟随窗口自适应大小

<template>
 <div class="box">
     <Breadcrumb name="数据统计"/>
     <el-card>
        <div ref="echartsRef" id="main" :style="`height:${$attrs.height || 400}px;width:${$attrs.width + 'px' || '70%'} 800px; `"></div>
     </el-card>
 </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb.vue';
import { ref ,onMounted, onBeforeUnmount} from 'vue'
import {_getData} from '@/network/reports.js'
import {debounce} from '@/utils/debounce.js'
import { getCurrentInstance } from 'vue'

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart,LineChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件