Bug: EchartsUI 配合renderEcharts 重复渲染页面失效

[ha1c9on]

Version

Vben Admin V5

Describe the bug?

Bug: EchartsUI 配合renderEcharts 重复渲染页面失效

Reproduction

Bug: EchartsUI 配合renderEcharts + Modal 重复渲染页面失效
具体表现为 首次点击触发model子模块后成功渲染 二次点击后失效

<script lang="ts" setup>
import { ref } from 'vue';
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/plugins/echarts';
import { getAnalyzeDetail } from "#/api/task/task";
import { useVbenModal } from '@vben/common-ui';

let chartRef = ref<EchartsUIType>();
let { renderEcharts } = useEcharts(chartRef);
const data = ref([]);

const detailForm = ref({});

const [Modal, modalApi] = useVbenModal({
  draggable: true,
  title: '数据分析',
  showConfirmButton: false,
  showCancelButton: false,

  onConfirm() {},
  onBeforeClose() {
    chartRef = ref<EchartsUIType>();
    // modalApi.close();
  },

  async onOpenChange(isOpen: boolean) {
    if (isOpen) {
      detailForm.value = modalApi.getData<Record<string, any>>() || {};
      await fetchData();
      await renderChart();
    }
  },
});

const fetchData = async () => {
  const resp = await getAnalyzeDetail(detailForm.value);
  data.value = resp.data;
};

const renderChart = async () => {
  if (!data.value || data.value.length === 0) {
    console.warn('No data available for rendering chart');
    return;
  }

  await renderEcharts({
    legend: {
      bottom: '2%',
      left: 'center',
      type: 'scroll',
    },
    series: [{
      animationDelay: () => Math.random() * 100,
      animationEasing: 'exponentialInOut',
      animationType: 'scale',
      avoidLabelOverlap: false,
      data: data.value,
      emphasis: {
        label: {
          fontSize: '12',
          fontWeight: 'bold',
          show: true,
        },
      },
      itemStyle: {
        borderRadius: 10,
        borderWidth: 2,
      },
      label: {
        position: 'center',
        show: false,
      },
      labelLine: {
        show: false,
      },
      name: '剧本名称',
      radius: ['40%', '65%'],
      type: 'pie',
    }],
    tooltip: {
      trigger: 'item',
    },
  }, false);
};

</script>

<template>
  <Modal class="dialog-content w-2/5 h-auto">
    <EchartsUI ref="chartRef" />
  </Modal>
</template>

System Info

lastest chrome

Relevant log output

No response

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[likui628]

仔细看了下，Modal关闭后echarts实例销毁了，参考我下面的代码

const renderChart = async () => {
  // 在renderChart里重新取renderEcharts
  const { renderEcharts } = useEcharts(chartRef);

  await renderEcharts({
    series: [
      {
        animationDelay() {
          return Math.random() * 400;
        },
        animationEasing: 'exponentialInOut',
        animationType: 'scale',
        center: ['50%', '50%'],
        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
        data: [
          { name: '外包', value: 500 },
          { name: '定制', value: 310 },
          { name: '技术支持', value: 274 },
          { name: '远程', value: 400 },
        ].sort((a, b) => {
          return a.value - b.value;
        }),
        name: '商业占比',
        radius: '80%',
        roseType: 'radius',
        type: 'pie',
      },
    ],

    tooltip: {
      trigger: 'item',
    },
  });
}