[#1245] Chart > Legend 관련 옵션 변경 시 DOM 을 못찾는 Error log 발생

################################# 1. watch 문이 mounted hook 안에 들어있어 mounted 될 때 마다 동일한 객체를 바라보는 watch가 중복으로 생성되여 발생한 문제 픽스
ex-em · Jul 21, 2022 · 74d8ece · 74d8ece
1 parent e2b48df
commit 74d8ece
Showing 1 changed file with 50 additions and 42 deletions.
diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
@@ -97,51 +97,59 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         }
       };
 
+      watch(() => props.options, (chartOpt) => {
+        const newOpt = getNormalizedOptions(chartOpt);
+
+        const isUpdateLegendType = !isEqual(newOpt.legend.table, evChart.options.legend.table);
+
+        evChart.options = cloneDeep(newOpt);
+
+        evChart.update({
+          updateSeries: false,
+          updateSelTip: { update: false, keepDomain: false },
+          updateLegend: isUpdateLegendType,
+        });
+      }, { deep: true });
+
+      watch(() => props.data, (chartData) => {
+        const newData = getNormalizedData(chartData);
+
+        const isUpdateSeries = !isEqual(newData.series, evChart.data.series)
+            || !isEqual(newData.groups, evChart.data.groups)
+            || props.options.type === 'heatMap';
+
+        const isUpdateData = !isEqual(newData.data, evChart.data);
+
+        evChart.data = cloneDeep(newData);
+
+        evChart.update({
+          updateSeries: isUpdateSeries,
+          updateSelTip: { update: true, keepDomain: false },
+          updateData: isUpdateData,
+        });
+      }, { deep: true });
+
+      watch(() => props.selectedItem, (newValue) => {
+        const chartType = props.options?.type;
+
+        evChart.selectItemByData(newValue, chartType);
+      }, { deep: true });
+
+      watch(() => props.selectedLabel, (newValue) => {
+        if (newValue.dataIndex) {
+          evChart.renderWithSelected(newValue.dataIndex);
+        }
+      }, { deep: true });
+
+      watch(() => props.selectedSeries, (newValue) => {
+        if (newValue.seriesId) {
+          evChart.renderWithSelected(newValue.seriesId);
+        }
+      }, { deep: true });
+
       onMounted(async () => {
         await createChart();
         await drawChart();
-
-        await watch(() => props.options, (chartOpt) => {
-          const newOpt = getNormalizedOptions(chartOpt);
-          const isUpdateLegend = !isEqual(newOpt.legend, evChart.options.legend);
-          evChart.options = cloneDeep(newOpt);
-          evChart.update({
-            updateSeries: false,
-            updateSelTip: { update: false, keepDomain: false },
-            updateLegend: isUpdateLegend,
-          });
-        }, { deep: true });
-
-        await watch(() => props.data, (chartData) => {
-          const newData = getNormalizedData(chartData);
-          const isUpdateSeries = !isEqual(newData.series, evChart.data.series)
-              || !isEqual(newData.groups, evChart.data.groups)
-              || props.options.type === 'heatMap';
-          const isUpdateData = !isEqual(newData.data, evChart.data);
-          evChart.data = cloneDeep(newData);
-          evChart.update({
-            updateSeries: isUpdateSeries,
-            updateSelTip: { update: true, keepDomain: false },
-            updateData: isUpdateData,
-          });
-        }, { deep: true });
-
-        await watch(() => props.selectedItem, (newValue) => {
-          const chartType = props.options?.type;
-          evChart.selectItemByData(newValue, chartType);
-        }, { deep: true });
-
-        await watch(() => props.selectedLabel, (newValue) => {
-          if (newValue.dataIndex) {
-            evChart.renderWithSelected(newValue.dataIndex);
-          }
-        }, { deep: true });
-
-        await watch(() => props.selectedSeries, (newValue) => {
-          if (newValue.seriesId) {
-            evChart.renderWithSelected(newValue.seriesId);
-          }
-        }, { deep: true });
       });
 
       onBeforeUnmount(() => {