evui 3.4.92 → 3.4.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.92",
+  "version": "3.4.93",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/Chart.vue

@@ -172,9 +172,9 @@
       watch(() => props.options, (chartOpt) => {
         const newOpt = getNormalizedOptions(chartOpt);
         const isUpdateLegendType = !isEqual(newOpt.legend.table, evChart.options.legend.table);
-        const isUpdateTooltipFormatter = newOpt.tooltip.use === true && !isEqual(
-            newOpt.tooltip.formatter,
-            evChart.options.tooltip.formatter,
+        const isUpdateTooltip = newOpt.tooltip.use && !isEqual(
+            newOpt.tooltip,
+            evChart.options.tooltip,
         );
 
         evChart.options = cloneDeep(newOpt);
@@ -183,7 +183,7 @@
           updateSeries: false,
           updateSelTip: { update: false, keepDomain: false },
           updateLegend: isUpdateLegendType,
-          updateTooltipFormatter: isUpdateTooltipFormatter,
+          updateTooltip: isUpdateTooltip,
         });
 
         if (!injectIsChartGroup) {

package/src/components/chart/chart.core.js

@@ -132,7 +132,7 @@ class EvChart {
 
     this.drawChart();
 
-    if (tooltip.use) {
+    if (tooltip.use && !this.isInitTooltip) {
       this.createTooltipDOM();
     }
 
@@ -722,13 +722,7 @@ class EvChart {
     const groups = this.data.groups;
     const series = this.data.series;
 
-    const {
-      updateSeries,
-      updateSelTip,
-      updateLegend,
-      updateData,
-      updateTooltipFormatter,
-    } = updateInfo;
+    const { updateSeries, updateSelTip, updateLegend, updateData, updateTooltip } = updateInfo;
 
     if (!this.isInit) {
       return;
@@ -823,7 +817,11 @@ class EvChart {
     }
 
     // Tooltip Update
-    if (updateTooltipFormatter) {
+    if (updateTooltip) {
+      if (!this.isInitTooltip) {
+        this.createTooltipDOM();
+      }
+
       this.tooltipDOM.innerHTML = '';
 
       if (!options.tooltip?.formatter?.html) {
@@ -981,11 +979,8 @@ class EvChart {
       window.removeEventListener('click', this.dragTouchSelectionEvent);
     }
 
-    if (this.options.tooltip.use) {
-      this.tooltipCanvas.remove();
-      this.tooltipCanvas = null;
-      this.tooltipDOM.remove();
-      this.tooltipDOM = null;
+    if (this.isInitTooltip) {
+      this.tooltipDestroy();
     }
 
     if (this.renderVisibleLegendsFrameId != null) {

package/src/components/chart/plugins/plugins.interaction.js

@@ -34,7 +34,7 @@ const modules = {
       this.overlayClear();
 
       if (Object.keys(hitInfo.items).length) {
-        if (tooltip.use) {
+        if (tooltip.use && this.isInitTooltip) {
           this.drawItemsHighlight(hitInfo, ctx);
 
           if (tooltip?.formatter?.html) {
@@ -51,7 +51,7 @@ const modules = {
             }
           }
         }
-      } else if (tooltip.use) {
+      } else if (tooltip.use && this.isInitTooltip) {
         this.hideTooltipDOM();
       }
 
@@ -99,7 +99,7 @@ const modules = {
         this.overlayClear();
       }
 
-      if (tooltip.use) {
+      if (tooltip.use && this.isInitTooltip) {
         this.tooltipClear();
       }
       this.listeners['mouse-leave']();
@@ -353,7 +353,7 @@ const modules = {
     };
 
     this.onWheel = (e) => {
-      const isTooltipVisible = this.tooltipDOM.style.display === 'block';
+      const isTooltipVisible = this.tooltipDOM?.style?.display === 'block';
 
       if (isTooltipVisible) {
         e.preventDefault();

package/src/components/chart/plugins/plugins.tooltip.js

@@ -46,6 +46,7 @@ const modules = {
         this.tooltipDOM.style.display = 'none';
       };
     }
+    this.isInitTooltip = true;
   },
 
   setDefaultTooltipLayout() {
@@ -942,6 +943,14 @@ const modules = {
 
     return result;
   },
+
+  tooltipDestroy() {
+    if (this.tooltipDOM) {
+      this.tooltipDOM.remove();
+      this.tooltipDOM = null;
+    }
+    this.isInitTooltip = false;
+  },
 };
 
 export default modules;