update echart 优化

src/components/common/echartCard/echartsOptions.ts

@@ -59,6 +59,9 @@ export const disposeEchartsByKey = (key: any) => {
 // isDark： 当前是否为深色模式
 export const initEcharts = (id: string, win: string, type: string, param: any, isDark?: any) => {
   chartDom = document.getElementById(id) as HTMLElement;
+  if (!chartDom) {
+    return;
+  }
   myChart[id] = echarts.init(chartDom);
 
   if (type === 'barChart') {

src/views/data/storage/components/storageStatistics/index.vue

@@ -38,10 +38,9 @@
         <div class="chart-content">
           <EchartCard
             :title="$t('系统管理.项目存储空间统计')"
-            ref="projectStorageSpaceStatisticsRef"
             :charts-id="'chart1'"
             :bar-type="'barChart'"
-            @refresh="initProjectStorageSpaceStatisticsFun"
+            :option="rojectStorageSpaceStatisticsOption"
           >
             <template #formSlot>
               <el-form :model="projectStorageSpaceStatisticsFormData" label-width="auto">
@@ -74,10 +73,9 @@
         <div class="chart-content">
           <EchartCard
             :title="$t('系统管理.学科存储空间统计')"
-            ref="statisticsOfSubjectStorageSpaceRef"
             :charts-id="'chart2'"
             :bar-type="'barChart'"
-            @refresh="initStatisticsOfSubjectStorageSpaceFun"
+            :option="statisticsOfSubjectStorageSpaceOption"
           >
             <template #formSlot>
               <el-form :model="statisticsOfSubjectStorageSpaceFormData" label-width="auto">
@@ -108,10 +106,9 @@
         <div class="chart-content">
           <EchartCard
             :title="$t('系统管理.用户存储空间统计')"
-            ref="userStorageSpaceStatisticsRef"
+            :option="userStorageSpaceStatisticsOption"
             :charts-id="'chart3'"
             :bar-type="'barChart'"
-            @refresh="initUserStorageSpaceStatisticsFun"
           >
             <template #formSlot>
               <el-form :model="userStorageSpaceStatisticsFormData" label-width="auto">
@@ -249,7 +246,7 @@ const updateChartFun = async () => {
 };
 
 // 项目存储空间统计
-const projectStorageSpaceStatisticsRef = ref();
+const rojectStorageSpaceStatisticsOption = ref<any>();
 const projectStorageSpaceStatisticsFormData = reactive<any>({
   nodeId: '',
 });
@@ -321,13 +318,7 @@ const initProjectStorageSpaceStatisticsFun = async () => {
       }
     );
   }
-  if (
+  const option = {
-    !projectStorageSpaceStatisticsRef.value ||
-    !projectStorageSpaceStatisticsRef.value.commonChartRef
-  )
-    return;
-  projectStorageSpaceStatisticsRef.value.commonChartRef.disposeEchartsByKey('chart1');
-  projectStorageSpaceStatisticsRef.value.commonChartRef.option = {
     color: ['#409eff', '#67c23a'],
     title: {
       show: false,
@@ -372,11 +363,11 @@ const initProjectStorageSpaceStatisticsFun = async () => {
     dataZoom: xData.length > 3 ? [] : null,
     series: seriesData,
   };
-  projectStorageSpaceStatisticsRef.value.commonChartRef.initChart();
+  rojectStorageSpaceStatisticsOption.value = option;
 };
 
 // 学科存储空间统计
-const statisticsOfSubjectStorageSpaceRef = ref();
+const statisticsOfSubjectStorageSpaceOption = ref<any>();
 const statisticsOfSubjectStorageSpaceFormData = reactive<any>({
   nodeId: [],
 });
@@ -448,13 +439,7 @@ const initStatisticsOfSubjectStorageSpaceFun = async () => {
       }
     );
   }
-  if (
+  const option = {
-    !statisticsOfSubjectStorageSpaceRef.value ||
-    !statisticsOfSubjectStorageSpaceRef.value.commonChartRef
-  )
-    return;
-  statisticsOfSubjectStorageSpaceRef.value.commonChartRef.disposeEchartsByKey('chart2');
-  statisticsOfSubjectStorageSpaceRef.value.commonChartRef.option = {
     color: ['#409eff', '#67c23a'],
     title: {
       show: false,
@@ -499,11 +484,11 @@ const initStatisticsOfSubjectStorageSpaceFun = async () => {
     dataZoom: xData.length > 4 ? [] : null,
     series: seriesData,
   };
-  statisticsOfSubjectStorageSpaceRef.value.commonChartRef.initChart();
+  statisticsOfSubjectStorageSpaceOption.value = option;
 };
 
 // 用户存储空间统计
-const userStorageSpaceStatisticsRef = ref();
+const userStorageSpaceStatisticsOption = ref<any>();
 const userStorageSpaceStatisticsFormData = reactive({
   userIds: [],
   userGroupId: '',
@@ -576,10 +561,7 @@ const initUserStorageSpaceStatisticsFun = async () => {
     );
   }
 
-  if (!userStorageSpaceStatisticsRef.value || !userStorageSpaceStatisticsRef.value.commonChartRef)
+  const option = {
-    return;
-  userStorageSpaceStatisticsRef.value.commonChartRef.disposeEchartsByKey('chart3');
-  userStorageSpaceStatisticsRef.value.commonChartRef.option = {
     color: ['#409eff', '#67c23a'],
     title: {
       show: false,
@@ -624,7 +606,7 @@ const initUserStorageSpaceStatisticsFun = async () => {
     dataZoom: xData.length > 2 ? [] : null,
     series: seriesData,
   };
-  userStorageSpaceStatisticsRef.value.commonChartRef.initChart();
+  userStorageSpaceStatisticsOption.value = option;
 };
 
 const userGroupOptions = ref<any>([]);