echart动态柱状排序图切换条件后，清除原来数据重新渲柒

问题：echart动态柱状排序图，点击“重新获取”按钮后，原来渲染未完成的部分继续动态展示。与新条件下的渲染混在一起。
需要的效果：有什么办法，点击“重新获取”按钮，原来未完成的渲染就清除了，重新渲染动态柱状排序图

<template>
  <button type="button" @click="reset()">重新获取</button>
  <div ref="chartDom" :style="{ width: '450px', height: '400px' }"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

// 定义测试数据
let newArr = [];
var fruits = ["苹果", "香蕉", "桔子", "芒果", "葡桃", "西瓜"];
var price = () => {
  let num = [];
  for (let i = 0, min = 5, max = 99; i < 6; i++) {
    num.push(Math.floor(Math.random() * (max + 1 - min) + min)); //取[min, max)之间的随机整数
  }
  return num;
};
// 将数据读入newArr
for (let i = 0; i < 60; i++) {
  let Object = {
    cdate: i + 1949,
    cname: fruits,
    cut: price(),
  };
  newArr.push(Object);
}

// 定义ref
const chartDom = ref();
let myChart = null;
// 挂载dom元素
onMounted(() => {
  initchart();
});

const initchart = () => {
  // 基于准备好的dom，初始化echarts实例
  myChart = echarts.init(chartDom.value);
  var updateFrequency = 80; // 数据更新速度
  var years = newArr;
  var startIndex = 0;

  // 获取第一个数据
  var startYear = years[startIndex].cdate;
  var startName = years[startIndex].cname;
  var startCut = years[startIndex].cut;

  var option = {
    // x 轴数据
    xAxis: {
      max: "dataMax", //坐标值最大刻度，可以设置成特殊值"dataMax"
    },
    // 数据集
    dataset: {
      source: newArr,
    },
    // y 轴数据
    yAxis: {
      type: "category",
      inverse: true, // 大在上面，小在下面排序
      data: startName,
    },
    // 序列
    series: [
      {
        realtimeSort: true,
        seriesLayoutBy: "column",
        type: "bar",
        data: startCut,
      },
    ],
    animationDuration: 0,
    animationDurationUpdate: 1000,
    animationEasing: "linear",
    animationEasingUpdate: "linear",
    graphic: {
      // 年份 Text
      elements: [
        {
          type: "text",
          right: 120,
          bottom: 40,
          style: {
            text: startYear,
            font: "bolder 30px monospace",
            fill: "rgba(100, 100, 100, 0.5)",
          },
          z: 100,
        },
      ],
    },
  };

  // 使用指定的配置项和数据显示图表。
  myChart.setOption(option);

  // 定时更新数据
  for (var i = startIndex; i < newArr.length - 1; ++i) {
    ((i) => {
      setTimeout(() => {
        updateYear(years[i + 1]);
      }, (i + 1) * updateFrequency);
    })(i);
  }

  // 更新数据
  const updateYear = (year) => {
    option.yAxis.data = year.cname;
    option.series[0].data = year.cut;
    option.graphic.elements[0].style.text = year.cdate;
    // 使用指定的配置项和数据显示图表。
    myChart.setOption(option);
  };
};

// 点击重新获取
const reset = () => {
  if (
    //判断是否存在echarts实例化对象,如果存在则销毁
    myChart != null &&
    myChart != "" &&
    myChart != undefined
  ) {
    myChart.dispose();
  }
  initchart();
};
</script>