Vue3+echarts5踩坑，resize方法报错

<script setup lang="ts">
import cardContentComponent from '@/components/generalCardComponents/cardContentComponent/index.vue'
import { ReboundCountTo,ReNormalCountTo } from '@/layout/components/ReCountTo/index.ts'
import echarts from "@/plugins/echarts";
import { onMounted, ref } from 'vue';

const props = defineProps({
  cardTitle:{
    default:"卡片标题",
    type:String
  },
  cardSubTitle:{
    default:"周比",
    type:String
  },
  cardRightCount:{
    default:0,
    type:Number,
  },
  isShow$:{
    default:false,
    type:Boolean
  },
  color:{
    default:"#FFCB60",
    type:String
  },
  transitonColorOne:{
    default:"rgba(255,203, 96,.3)",
    type:String
  },
  transitonColorTwo:{
    default:"rgba(255,203, 96,0)",
    type:String
  },
  rightBili:{
    default:"-4.21",
    type:String
  }
})

const main = ref(null)

// 生成一个随机销售额的函数
function generateRandomSalesData(days) {
  const salesData = [];
  for (let i = 0; i < days; i++) {
    // 生成100到1000之间的随机数作为销售额
    const sales = Math.floor(Math.random() * (1000000 - 100) + 100);
    salesData.push(sales);
  }
  return [...salesData];
}

// 生成30天的销售额数据
const monthlySalesData = generateRandomSalesData(18);

const option = {
  xAxis: {
    type: 'category',
    show: false,
    offset: 0
  },
  yAxis: {
    show: false,
    type: 'value',
  },
  color: [props.color],
  grid: {
    top: '5%',      // 调整上边距
    bottom: '10%',   // 调整下边距
    left: '0%',     // 可选：调整左边距
    right: '0%'     // 可选：调整右边距
  },
  legend: {
    bottom: '0px'
  },
  series: [
    {
      data: monthlySalesData,
      type: 'line',
      smooth: true,
      symbol:'none',
      areaStyle: {
        normal:{
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: props.color
          },{
            offset: 0.5,
            color: props.transitonColorOne,
          }, {
            offset: 1,
            color: props.transitonColorTwo,
          }],false)
        }
      }
    }
  ]
};

let myChart = null

onMounted(() => {
  let myChartDom = main.value as HTMLElement
  myChart = echarts.init(myChartDom);
  console.log(myChart)
  myChart.setOption(option)

  const resizeObserver = new ResizeObserver(entries => {
    myChart.resize()
  })
  resizeObserver.observe(myChartDom)
})

</script>

<template>
  <div class="the-month-order-number-component">
    <cardContentComponent #cardContent>
      <div class="card-top">
        <div class="left">
          <div class="left-icon mr-2" :style="{ background: color }">
            <slot name="leftIcon"></slot>
          </div>
          <div class="left-card-title">
            <p class="left-card-top-title">{{ cardTitle }}</p>
            <p class="left-card-bottom-title mt-2">{{ cardSubTitle }}</p>
          </div>
        </div>
        <div class="right">
          <ReNormalCountTo fontSize="26px" :startVal="0" :endVal="cardRightCount"></ReNormalCountTo>
          <p class="right-bili">-4.21%</p>
        </div>
      </div>
      <!--      card-bottom-->
      <div class="card-bottom">
        <div ref="main" class="main"></div>
      </div>
    </cardContentComponent>
  </div>
</template>

<style scoped lang="scss">
.the-month-order-number-component {
  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .left-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        padding: 6px;
        border-radius: 100%;
        overflow: hidden;
        color: #ffffff;
      }
      .left-card-title {
        .left-card-top-title {
          font-weight: 550;
          font-size: 20px;
        }
        .left-card-bottom-title {
          font-size: 12px;
          color: #999999;
        }
      }
    }
    .right {
      font-weight: bold;
      .right-bili {
        text-align: right;
        color:var(--el-color-error);
      }
    }
  }
  .card-bottom {
    width: 100%;
    height: 70px;
    .main {
      width: 100%;
      height: 100%;
    }
  }
}
</style>