Bug: Modal中打开Echarts，关闭Modal后再打开，Echarts不展示

[hejarve92]

Version

Vben Admin V5

Describe the bug?

如图所示：在一个Modal中打开两个折线图，第一次进入页面有图表渲染，关闭Modal再打开，图表无法渲染。 第一次打开： 关闭后再打开：

Reproduction

<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { Card } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import collectServerApi from '#/api/collect/collectServer';
import { $t } from '#/locales';

const memoryLineRef = ref<EchartsUIType>();

const cpuLineRef = ref<EchartsUIType>();

const { renderEcharts: renderMemoryEcharts } = useEcharts(memoryLineRef);

const { renderEcharts: renderCupEcharts } = useEcharts(cpuLineRef);

const data = ref();

/**
 * 定义弹窗
 */
const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  onCancel() {
    modalApi.close();
  },
  async onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>();
      if (data.value) {
        rendCharts({});
      }
    }
  },
});

/**
 * 定义查询条件
 */
const [QueryForm] = useVbenForm({
  // 默认展开
  collapsed: false,
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    colon: true,
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: rendCharts,
  layout: 'horizontal',
  schema: [
    {
      component: 'DatePicker',
      componentProps: {
        placeholder: '',
        showTime: true,
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
      fieldName: 'beginTime',
      label: $t('collectServer.column.beginTime'),
    },
    {
      component: 'DatePicker',
      componentProps: {
        placeholder: '',
        showTime: true,
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
      fieldName: 'endTime',
      label: $t('collectServer.column.endTime'),
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  // 是否在字段值改变时提交表单
  submitOnChange: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
  submitButtonOptions: {
    content: $t('common.search'),
  },
  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
});

/**
 * 查询数据并渲染图表
 * @param params
 */
async function rendCharts(params: any) {
  const { serverId } = data.value;
  // 渲染折线图
  const chartsData = await collectServerApi.queryCollectServerRunningCharts({
    ...params,
    serverId,
  });
  const { memoryData, cpuData } = chartsData;
  rendMemoryCharts(memoryData);
  rendCpuCharts(cpuData);
}

/**
 * 渲染CPU使用折线图
 * @param data 数据
 */
function rendCpuCharts(data: any) {
  const { series, xAxis } = data;
  renderCupEcharts({
    title: {
      text: $t('collectServer.useCpu'),
      textStyle: {
        color: '#999',
        fontWeight: 'normal',
        fontSize: '12px',
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      bottom: 0,
      left: '2%',
      right: '1%',
      top: '25%',
      containLabel: true,
    },
    legend: {
      data: [],
    },
    series,
    xAxis: { ...xAxis },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} %',
      },
    },
  });
}

/**
 * 渲染内存使用折线图
 * @param data 数据
 */
function rendMemoryCharts(data: any) {
  const { series, xAxis } = data;
  renderMemoryEcharts({
    title: {
      text: $t('collectServer.useMemory'),
      textStyle: {
        color: '#999',
        fontWeight: 'normal',
        fontSize: '12px',
      },
    },
    tooltip: {
      trigger: 'axis',
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      bottom: 0,
      left: '2%',
      right: '1%',
      top: '25%',
      containLabel: true,
    },
    legend: {
      data: [],
    },
    series,
    xAxis: { ...xAxis },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} GB',
      },
    },
  });
}
</script>

<template>
  <Modal
    :footer="false"
    :title="$t('collectServer.viewCharts')"
    class="max-h-[90%] w-[1500px]"
    centered
    content-class="w-[1460px]"
  >
    <Card class="mb-5">
      <QueryForm />
      <div class="w-full">
        <EchartsUI
          :style="{ height: '200px', width: '100%' }"
          ref="cpuLineRef"
        />
      </div>
    </Card>
    <Card class="mb-5">
      <div class="w-full">
        <EchartsUI
          :style="{ height: '200px', width: '100%' }"
          ref="memoryLineRef"
        />
      </div>
    </Card>
  </Modal>
</template>

### System Info

```shell
System:
    OS: macOS 13.4.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 38.01 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 9.15.9 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 135.0.7049.85
    Safari: 16.5.1

Relevant log output

浏览器没有报错

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.

[wyc001122]

原因找到了，useEcharts 源码中 注册的 销毁钩子 与 EchartsUI 组件是否销毁没有直接关系。
useVbenModal 中 destroyOnClose 默认是 true。
修改destroyOnClose 为 false 可以解决，但是也许会影响 Modal 下你其他组件的用法（如果你本身就期望那些组件需要销毁重新渲染）。
不动源码的情况下，可以将 图表 单独放在一个组件中
例如创建一个echartsCompnent.vue ，然后外部引入，假设后期 useEcharts 有优化应该也 不会影响

<script lang="ts" setup>
// echartsCompnent.vue
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

onMounted(() => {
  renderEcharts({
    // ...
  });
});
</script>

<template>
  <EchartsUI ref="chartRef" />
</template>