evui 3.3.48 → 3.3.49

package/dist/evui.umd.js

@@ -7997,7 +7997,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.48\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.49\"}");
 
 /***/ }),
 
@@ -33171,7 +33171,7 @@ var modules = {
         colorState = series.colorState,
         isGradient = series.isGradient;
     var colorOpt = this.options.heatMapColor;
-    var categoryCnt = colorOpt.categoryCnt;
+    var rangeCount = colorOpt.colorsByRange.length || colorOpt.rangeCount;
     var decimalPoint = colorOpt.decimalPoint;
     var minValue;
     var maxValue = 0;
@@ -33192,9 +33192,9 @@ var modules = {
       }
     });
 
-    if (isExistError && !isGradient && colorState.length === categoryCnt) {
+    if (isExistError && !isGradient && colorState.length === rangeCount) {
       colorState.push({
-        id: "color#".concat(categoryCnt),
+        id: "color#".concat(rangeCount),
         color: colorOpt.error,
         state: 'normal',
         label: 'Error',
@@ -33202,11 +33202,11 @@ var modules = {
       });
     }
 
-    var interval = maxValue > minValue ? Math.floor((maxValue - minValue) / categoryCnt) : 1;
+    var interval = maxValue > minValue ? Math.floor((maxValue - minValue) / rangeCount) : 1;
 
-    if (maxValue - minValue <= categoryCnt) {
+    if (maxValue - minValue <= rangeCount) {
       if (decimalPoint > 0) {
-        interval = +((maxValue - minValue) / categoryCnt).toFixed(decimalPoint);
+        interval = +((maxValue - minValue) / rangeCount).toFixed(decimalPoint);
       } else {
         interval = 1;
       }
@@ -34705,6 +34705,7 @@ var AXIS_OPTION = {
   startToZero: false,
   showAxis: true,
   axisLineColor: '#C9CFDC',
+  axisLineWidth: 1,
   showGrid: true,
   gridLineColor: '#C9CFDC',
   showIndicator: false,
@@ -36885,10 +36886,11 @@ var element_pie_Pie = /*#__PURE__*/function () {
 
 
 
+
 
 
 var element_heatmap_HeatMap = /*#__PURE__*/function () {
-  function HeatMap(sId, opt, colorOpt, isGradient) {
+  function HeatMap(sId, opt, colorOpt, isHorizontal, isGradient) {
     var _this = this;
 
     _classCallCheck(this, HeatMap);
@@ -36897,6 +36899,7 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
     Object.keys(merged).forEach(function (key) {
       _this[key] = merged[key];
     });
+    this.isHorizontal = isHorizontal;
     this.isGradient = isGradient;
     this.createColorState(colorOpt);
     this.sId = sId;
@@ -36926,8 +36929,8 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
       var regex = /[^0-9]&[^,]/g;
       var min = colorOpt.min,
           max = colorOpt.max,
-          categoryCnt = colorOpt.categoryCnt,
-          categoryColors = colorOpt.categoryColors,
+          rangeCount = colorOpt.rangeCount,
+          colorsByRange = colorOpt.colorsByRange,
           error = colorOpt.error,
           stroke = colorOpt.stroke;
       var minColor = min.includes('#') ? helpers_util.hexToRgb(min) : min.replace(regex, '');
@@ -36957,14 +36960,13 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
             maxG: maxG,
             maxB: maxB
           },
-          categoryCnt: categoryCnt,
+          rangeCount: rangeCount,
           start: 0,
           end: 100,
           selectedValue: null
         });
-      } else if (categoryColors.length) {
-        colorOpt.categoryCnt = categoryColors.length;
-        categoryColors.forEach(function (_ref, ix) {
+      } else if (colorsByRange.length) {
+        colorsByRange.forEach(function (_ref, ix) {
           var color = _ref.color,
               label = _ref.label;
           colorState.push({
@@ -36976,11 +36978,11 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
           });
         });
       } else {
-        var unitR = Math.floor((minR - maxR) / (categoryCnt - 1));
-        var unitG = Math.floor((minG - maxG) / (categoryCnt - 1));
-        var unitB = Math.floor((minB - maxB) / (categoryCnt - 1));
+        var unitR = Math.floor((minR - maxR) / (rangeCount - 1));
+        var unitG = Math.floor((minG - maxG) / (rangeCount - 1));
+        var unitB = Math.floor((minB - maxB) / (rangeCount - 1));
 
-        for (var ix = 0; ix < categoryCnt; ix++) {
+        for (var ix = 0; ix < rangeCount; ix++) {
           var r = +minR - unitR * ix;
           var g = +minG - unitG * ix;
           var b = +minB - unitB * ix;
@@ -37015,8 +37017,8 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
       return "rgb(".concat(r, ",").concat(g, ",").concat(b, ")");
     }
   }, {
-    key: "getColorIndexForIcon",
-    value: function getColorIndexForIcon(value) {
+    key: "getColorIndexByValue",
+    value: function getColorIndexByValue(value) {
       var _this$valueOpt = this.valueOpt,
           existError = _this$valueOpt.existError,
           min = _this$valueOpt.min,
@@ -37044,7 +37046,7 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
           max = _this$valueOpt2.max;
       var itemInfo = {
         show: false,
-        opacity: 0,
+        opacity: 1,
         dataColor: null,
         id: null,
         isHighlight: null
@@ -37060,11 +37062,10 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
         if (value < 0 || start <= ratio && ratio <= end) {
           itemInfo.show = true;
           itemInfo.isHighlight = selectedValue !== null && Math.floor(value) === Math.floor(min + (max - min) * (selectedValue / 100));
-          itemInfo.opacity = 1;
           itemInfo.dataColor = value < 0 ? this.errorColor : this.getColorForGradient(ratio);
         }
       } else {
-        var colorIndex = this.getColorIndexForIcon(value);
+        var colorIndex = this.getColorIndexByValue(value);
         var _this$colorState$colo = this.colorState[colorIndex],
             show = _this$colorState$colo.show,
             state = _this$colorState$colo.state,
@@ -37080,18 +37081,26 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
     }
   }, {
     key: "drawItem",
-    value: function drawItem(ctx, x, y, w, h) {
+    value: function drawItem(ctx, x, y, w, h, borderOpt) {
       ctx.beginPath();
 
-      if (this.stroke.show) {
-        var radius = this.stroke.radius;
+      if (borderOpt.show) {
+        var radius = borderOpt.radius;
 
-        if (radius > 0 && radius < h && radius < w) {
-          ctx.moveTo(x + radius, y);
-          ctx.arcTo(x + w, y, x + w, y + h, radius);
-          ctx.arcTo(x + w, y + h, x, y + h, radius);
-          ctx.arcTo(x, y + h, x, y, radius);
-          ctx.arcTo(x, y, x + w, y, radius);
+        if (radius > 0) {
+          var minSize = Math.min(w, h);
+          var r = radius;
+
+          if (r > minSize / 2) {
+            r = Math.floor(minSize / 2);
+          }
+
+          ctx.moveTo(x + r, y);
+          ctx.arcTo(x + w, y, x + w, y + h, r);
+          ctx.arcTo(x + w, y + h, x, y + h, r);
+          ctx.arcTo(x, y + h, x, y, r);
+          ctx.arcTo(x, y, x + w, y, r);
+          ctx.stroke();
           ctx.fill();
         } else {
           ctx.strokeRect(x, y, w, h);
@@ -37141,15 +37150,46 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
       var ctx = param.ctx,
           chartRect = param.chartRect,
           labelOffset = param.labelOffset,
-          overlayCtx = param.overlayCtx;
+          overlayCtx = param.overlayCtx,
+          selectLabel = param.selectLabel,
+          legendHitInfo = param.legendHitInfo,
+          selectItem = param.selectItem;
       var xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
       var yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
       var xsp = chartRect.x1 + labelOffset.left;
       var ysp = chartRect.y2 - labelOffset.bottom;
       this.size.w = xArea / this.labels.x.length;
       this.size.h = yArea / this.labels.y.length;
-      this.data.forEach(function (item) {
-        var xp = _this2.calculateXY('x', item.x, xsp);
+
+      var getOpacity = function getOpacity(item, opacity, index) {
+        var selectLabelOption = selectLabel === null || selectLabel === void 0 ? void 0 : selectLabel.option;
+        var useSelectLabel = (selectLabelOption === null || selectLabelOption === void 0 ? void 0 : selectLabelOption.use) && (selectLabelOption === null || selectLabelOption === void 0 ? void 0 : selectLabelOption.useSeriesOpacity);
+        var selectItemOption = selectItem === null || selectItem === void 0 ? void 0 : selectItem.option;
+        var useSelectItem = (selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.use) && (selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.useSeriesOpacity);
+
+        if (!legendHitInfo) {
+          var isDownplay = false;
+
+          if (useSelectItem) {
+            var _selectItem$selected;
+
+            isDownplay = (selectItem === null || selectItem === void 0 ? void 0 : selectItem.selected) && index !== (selectItem === null || selectItem === void 0 ? void 0 : (_selectItem$selected = selectItem.selected) === null || _selectItem$selected === void 0 ? void 0 : _selectItem$selected.dataIndex);
+          } else if (useSelectLabel) {
+            var _selectLabel$selected;
+
+            var selectedLabelList = selectLabel === null || selectLabel === void 0 ? void 0 : (_selectLabel$selected = selectLabel.selected) === null || _selectLabel$selected === void 0 ? void 0 : _selectLabel$selected.label;
+            isDownplay = selectedLabelList.length && !selectedLabelList.includes(_this2.isHorizontal ? item.y : item.x);
+          }
+
+          return isDownplay ? 0.1 : 1;
+        }
+
+        return opacity;
+      };
+
+      this.data.forEach(function (item, index) {
+        var axisLineWidth = 1;
+        var xp = _this2.calculateXY('x', item.x, xsp) + axisLineWidth;
 
         var yp = _this2.calculateXY('y', item.y, ysp);
 
@@ -37165,27 +37205,40 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
               id = _this2$getItemInfo.id,
               isHighlight = _this2$getItemInfo.isHighlight;
 
+          var itemOpacity = getOpacity(item, opacity, index);
           item.dataColor = dataColor;
           item.cId = id;
           ctx.save();
 
           if (show) {
-            ctx.fillStyle = helpers_util.colorStringToRgba(item.dataColor, opacity);
-
-            if (_this2.stroke.show) {
-              var _this2$stroke = _this2.stroke,
-                  color = _this2$stroke.color,
-                  lineWidth = _this2$stroke.lineWidth,
-                  sOpacity = _this2$stroke.opacity;
-              ctx.strokeStyle = helpers_util.colorStringToRgba(color, opacity === 1 ? sOpacity : opacity);
+            var _selectItem$selected2;
+
+            ctx.fillStyle = helpers_util.colorStringToRgba(item.dataColor, itemOpacity);
+            var borderOpt = _this2.stroke;
+            var selectItemOption = selectItem === null || selectItem === void 0 ? void 0 : selectItem.option;
+            var useSelectItem = (selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.use) && (selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.showBorder);
+            var isHit = index === (selectItem === null || selectItem === void 0 ? void 0 : (_selectItem$selected2 = selectItem.selected) === null || _selectItem$selected2 === void 0 ? void 0 : _selectItem$selected2.dataIndex);
+
+            if (useSelectItem && isHit) {
+              borderOpt = _objectSpread2({
+                show: selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.showBorder
+              }, selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.borderStyle);
+            }
+
+            if (borderOpt.show) {
+              var _borderOpt = borderOpt,
+                  color = _borderOpt.color,
+                  lineWidth = _borderOpt.lineWidth,
+                  borderOpacity = _borderOpt.opacity;
+              ctx.strokeStyle = helpers_util.colorStringToRgba(color, itemOpacity === 1 ? borderOpacity : itemOpacity);
               ctx.lineWidth = lineWidth;
-              xp += lineWidth * 1.5;
-              yp += lineWidth * 1.5;
-              w -= lineWidth * 2;
-              h -= lineWidth * 2;
+              xp += lineWidth * 0.5;
+              yp += lineWidth * 0.5;
+              w -= lineWidth;
+              h -= lineWidth;
             }
 
-            _this2.drawItem(ctx, xp, yp, w, h);
+            _this2.drawItem(ctx, xp, yp, w, h, borderOpt);
 
             ctx.restore();
             item.xp = xp;
@@ -37369,16 +37422,25 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
       }
 
       ctx.save();
-      ctx.shadowOffsetX = 2;
-      ctx.shadowOffsetY = 2;
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
       ctx.shadowBlur = 4;
 
       if (x !== null && y !== null && isShow) {
         var color = gdata.dataColor;
-        ctx.shadowColor = helpers_util.colorStringToRgba('#605F5F');
+        ctx.shadowColor = helpers_util.colorStringToRgba('#959494');
         ctx.strokeStyle = helpers_util.colorStringToRgba(color);
         ctx.fillStyle = helpers_util.colorStringToRgba(color);
-        this.drawItem(ctx, x - 2, y - 2, w + 4, h + 4);
+
+        if (this.stroke.show) {
+          var lineWidth = this.stroke.lineWidth;
+          x += lineWidth * 0.5;
+          y += lineWidth * 0.5;
+          w -= lineWidth;
+          h -= lineWidth;
+        }
+
+        this.drawItem(ctx, x - 0.5, y - 0.5, w + 1, h + 1, this.stroke);
         ctx.restore();
 
         if (this.showValue.use) {
@@ -37408,7 +37470,7 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
         name: null
       };
       var gdata = this.data;
-      var foundItem = gdata.find(function (data) {
+      var itemIndex = gdata.findIndex(function (data) {
         var x = data.xp,
             y = data.yp,
             wSize = data.w,
@@ -37416,9 +37478,11 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
         return x <= xp && xp <= x + wSize && y <= yp && yp <= y + hSize;
       });
 
-      if (foundItem) {
+      if (itemIndex > -1) {
+        var foundItem = gdata[itemIndex];
         item.data = foundItem;
         item.color = foundItem.dataColor;
+        item.index = itemIndex;
         item.hit = true;
       }
 
@@ -37610,7 +37674,7 @@ var model_series_modules = {
           heatMapColor = _this$options.heatMapColor,
           legend = _this$options.legend;
       var isGradient = legend.type === 'gradient';
-      return new element_heatmap(id, opt, heatMapColor, isGradient);
+      return new element_heatmap(id, opt, heatMapColor, isHorizontal, isGradient);
     }
 
     return false;
@@ -37927,7 +37991,7 @@ var scale_Scale = /*#__PURE__*/function () {
       }
 
       if (this.showAxis) {
-        ctx.lineWidth = 2;
+        ctx.lineWidth = this.axisLineWidth;
         aliasPixel = helpers_util.aliasPixel(ctx.lineWidth);
         ctx.beginPath();
         ctx.strokeStyle = this.axisLineColor;
@@ -38981,7 +39045,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
         }
 
         ctx.fillStyle = this.labelStyle.color;
-        ctx.lineWidth = 1;
+        ctx.lineWidth = this.axisLineWidth;
         var aliasPixel = helpers_util.aliasPixel(ctx.lineWidth);
         ctx.beginPath();
         ctx.strokeStyle = this.axisLineColor;
@@ -39395,7 +39459,7 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
       }
 
       ctx.fillStyle = this.labelStyle.color;
-      ctx.lineWidth = 1;
+      ctx.lineWidth = this.axisLineWidth;
       var aliasPixel = helpers_util.aliasPixel(ctx.lineWidth);
       ctx.beginPath();
       ctx.strokeStyle = this.axisLineColor;
@@ -40094,6 +40158,10 @@ var plugins_legend_modules = {
       }
 
       var targetId = targetDOM === null || targetDOM === void 0 ? void 0 : (_targetDOM$series4 = targetDOM.series) === null || _targetDOM$series4 === void 0 ? void 0 : _targetDOM$series4.cId;
+      var legendHitInfo = {
+        sId: targetId,
+        type: _this5.options.type
+      };
       series.colorState.forEach(function (colorItem) {
         colorItem.state = colorItem.id === targetId ? 'highlight' : 'downplay';
       });
@@ -40103,6 +40171,9 @@ var plugins_legend_modules = {
         updateSelTip: {
           update: false,
           keepDomain: false
+        },
+        hitInfo: {
+          legend: legendHitInfo
         }
       });
     };
@@ -41519,6 +41590,8 @@ var es_object_from_entries = __webpack_require__("c1f9");
 
 
 
+
+
 var plugins_interaction_modules = {
   /**
    * Hide legend components by manipulating css
@@ -41665,15 +41738,19 @@ var plugins_interaction_modules = {
 
         var hitInfo = _this.getItemByPosition(offset, false);
 
-        if (hitInfo.label !== null) {
-          _this.render(hitInfo);
-        }
-
         args.label = hitInfo.label;
         args.value = hitInfo.value;
         args.seriesId = hitInfo.sId;
         args.dataIndex = hitInfo.maxIndex;
         args.acc = hitInfo.acc;
+
+        if (_this.options.type === 'heatMap') {
+          args.deselect = _this.setDeselectItem(hitInfo);
+        }
+
+        if (hitInfo.label !== null) {
+          _this.render(hitInfo);
+        }
       } else if (_this.options.selectLabel.use && _this.options.selectLabel.useClick) {
         var _offset = _this.getMousePosition(e);
 
@@ -42206,14 +42283,18 @@ var plugins_interaction_modules = {
     var _this3 = this;
 
     if (this.options.selectLabel.use) {
-      var limit = this.options.selectLabel.limit;
-
       if (!this.defaultSelectInfo) {
         this.defaultSelectInfo = {
           dataIndex: []
         };
       }
 
+      if (this.options.type === 'heatMap') {
+        this.initSelectedInfoForHeatMap();
+        return;
+      }
+
+      var limit = this.options.selectLabel.limit;
       var infoObj = this.defaultSelectInfo;
       infoObj.dataIndex.splice(limit);
       infoObj.label = infoObj.dataIndex.map(function (i) {
@@ -42238,6 +42319,29 @@ var plugins_interaction_modules = {
     }
   },
 
+  /**
+   * init defaultSelectInfo object for HeatMap.
+   * - at selectLabel using: set each series data and label text
+   */
+  initSelectedInfoForHeatMap: function initSelectedInfoForHeatMap() {
+    var _this4 = this;
+
+    var limit = this.options.selectLabel.limit;
+    var isHorizontal = this.options.horizontal;
+    var infoObj = this.defaultSelectInfo;
+    infoObj.dataIndex.splice(limit);
+    var targetLabel = isHorizontal ? 'y' : 'x';
+    infoObj.label = infoObj.dataIndex.map(function (i) {
+      return _this4.data.labels[targetLabel][i];
+    });
+    var dataValues = Object.values(this.data.data)[0];
+    infoObj.data = dataValues.filter(function (_ref5) {
+      var x = _ref5.x,
+          y = _ref5.y;
+      return infoObj.label.includes(isHorizontal ? y : x);
+    });
+  },
+
   /**
    * Add or delete selected label index, according to policy and option
    * (set each series data and label text)
@@ -42333,12 +42437,12 @@ var plugins_interaction_modules = {
    *                 object.range: coordinate-based range in graph
    * @returns {object}
    */
-  getSelectionRage: function getSelectionRage(_ref5) {
-    var xsp = _ref5.xsp,
-        ysp = _ref5.ysp,
-        width = _ref5.width,
-        height = _ref5.height,
-        range = _ref5.range;
+  getSelectionRage: function getSelectionRage(_ref6) {
+    var xsp = _ref6.xsp,
+        ysp = _ref6.ysp,
+        width = _ref6.width,
+        height = _ref6.height,
+        range = _ref6.range;
     var dataRangeX = this.axesSteps.x.length ? this.axesSteps.x[0] : null;
     var dataRangeY = this.axesSteps.y.length ? this.axesSteps.y[0] : null;
 
@@ -42395,11 +42499,11 @@ var plugins_interaction_modules = {
 
     var sId = Object.keys(this.seriesList)[0];
 
-    var _ref6 = (_this$seriesList$sId$ = this.seriesList[sId].findSelectionRange(range)) !== null && _this$seriesList$sId$ !== void 0 ? _this$seriesList$sId$ : {},
-        xMin = _ref6.xMin,
-        xMax = _ref6.xMax,
-        yMin = _ref6.yMin,
-        yMax = _ref6.yMax;
+    var _ref7 = (_this$seriesList$sId$ = this.seriesList[sId].findSelectionRange(range)) !== null && _this$seriesList$sId$ !== void 0 ? _this$seriesList$sId$ : {},
+        xMin = _ref7.xMin,
+        xMax = _ref7.xMax,
+        yMin = _ref7.yMin,
+        yMax = _ref7.yMax;
 
     return {
       xMin: xMin !== null && xMin !== void 0 ? xMin : dataRangeX.graphMin,
@@ -42407,6 +42511,23 @@ var plugins_interaction_modules = {
       yMin: yMin !== null && yMin !== void 0 ? yMin : dataRangeY.graphMin,
       yMax: yMax !== null && yMax !== void 0 ? yMax : dataRangeY.graphMax
     };
+  },
+  setDeselectItem: function setDeselectItem(hitInfo) {
+    var deselect = false;
+
+    if (this.options.selectItem.useDeselectItem) {
+      var _this$defaultSelectIt;
+
+      var isEqualSelectItem = (hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.maxIndex) === ((_this$defaultSelectIt = this.defaultSelectItemInfo) === null || _this$defaultSelectIt === void 0 ? void 0 : _this$defaultSelectIt.dataIndex);
+
+      if (!isNaN(hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.maxIndex) && isEqualSelectItem) {
+        deselect = true;
+        this.defaultSelectItemInfo = null;
+        return true;
+      }
+    }
+
+    return deselect;
   }
 };
 /* harmony default export */ var plugins_interaction = (plugins_interaction_modules);
@@ -43434,7 +43555,8 @@ var element_tip_modules = {
     var isExistSelectedLabel;
 
     if (labelTipOpt.use && labelTipOpt.showTip) {
-      isExistSelectedLabel = this.drawLabelTip();
+      var isHeatMap = opt.type === 'heatMap';
+      isExistSelectedLabel = isHeatMap ? this.drawLabelTipForHeatMap() : this.drawLabelTip();
     }
 
     var executeDrawIndicator = function executeDrawIndicator(tipOpt) {
@@ -43814,6 +43936,53 @@ var element_tip_modules = {
     return drawTip;
   },
 
+  /**
+   * Draw Selected Label Tip
+   * @returns {boolean} Whether drew at least one tip
+   */
+  drawLabelTipForHeatMap: function drawLabelTipForHeatMap() {
+    var _this3 = this;
+
+    var opt = this.options;
+    var isHorizontal = !!opt.horizontal;
+    var labelTipOpt = opt.selectLabel;
+    var dataIndex = this.defaultSelectInfo.dataIndex;
+    var drawTip = false;
+
+    if (dataIndex) {
+      drawTip = true;
+      var chartRect = this.chartRect;
+      var labelOffset = this.labelOffset;
+      var aPos = {
+        x1: chartRect.x1 + labelOffset.left,
+        x2: chartRect.x2 - labelOffset.right,
+        y1: chartRect.y1 + labelOffset.top,
+        y2: chartRect.y2 - labelOffset.bottom
+      };
+      var labelAxes = isHorizontal ? this.axesY[0] : this.axesX[0];
+      var labelStartPoint = aPos[labelAxes.units.rectStart];
+      var labelEndPoint = aPos[labelAxes.units.rectEnd];
+      var labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
+      var valueAxes = isHorizontal ? this.axesX[0] : this.axesY[0];
+      var offset = 6 * (isHorizontal ? 1 : -1);
+      var gp = aPos[valueAxes.units.rectEnd] + offset;
+      dataIndex === null || dataIndex === void 0 ? void 0 : dataIndex.forEach(function (index) {
+        var labelCenter = Math.round(labelStartPoint + labelGap * index);
+        var dp = labelCenter + labelGap / 2;
+
+        _this3.showTip({
+          context: _this3.bufferCtx,
+          x: isHorizontal ? gp : dp,
+          y: isHorizontal ? dp : gp,
+          opt: labelTipOpt,
+          isSamePos: false
+        });
+      });
+    }
+
+    return drawTip;
+  },
+
   /**
    * Calculate x, y position to draw text tip
    * @param {object} param     object for drawing text tip
@@ -44287,7 +44456,6 @@ var chart_core_EvChart = /*#__PURE__*/function () {
 
           switch (chartType) {
             case 'line':
-            case 'heatMap':
               {
                 var legendHitInfo = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
                 series.draw(_objectSpread2({
@@ -44296,10 +44464,34 @@ var chart_core_EvChart = /*#__PURE__*/function () {
                 break;
               }
 
-            case 'bar':
+            case 'heatMap':
               {
                 var _legendHitInfo = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
 
+                var selectInfo = void 0;
+                var defaultSelectInfo = this.defaultSelectItemInfo;
+
+                if (defaultSelectInfo !== null && defaultSelectInfo !== void 0 && defaultSelectInfo.dataIndex || (defaultSelectInfo === null || defaultSelectInfo === void 0 ? void 0 : defaultSelectInfo.dataIndex) === 0) {
+                  selectInfo = _objectSpread2({}, defaultSelectInfo);
+                } else {
+                  selectInfo = null;
+                }
+
+                series.draw(_objectSpread2({
+                  legendHitInfo: _legendHitInfo,
+                  selectInfo: selectInfo,
+                  selectItem: {
+                    option: selectItem,
+                    selected: selectInfo
+                  }
+                }, opt));
+                break;
+              }
+
+            case 'bar':
+              {
+                var _legendHitInfo2 = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
+
                 var _this$options3 = this.options,
                     thickness = _this$options3.thickness,
                     cPadRatio = _this$options3.cPadRatio,
@@ -44310,7 +44502,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
                   borderRadius: borderRadius,
                   showSeriesCount: showSeriesCount,
                   showIndex: showIndex,
-                  legendHitInfo: _legendHitInfo
+                  legendHitInfo: _legendHitInfo2
                 }, opt));
 
                 if (series.show) {
@@ -44324,21 +44516,21 @@ var chart_core_EvChart = /*#__PURE__*/function () {
               {
                 var _this$lastHitInfo, _this$defaultSelectIt;
 
-                var selectInfo = (_this$lastHitInfo = this.lastHitInfo) !== null && _this$lastHitInfo !== void 0 ? _this$lastHitInfo : {
+                var _selectInfo = (_this$lastHitInfo = this.lastHitInfo) !== null && _this$lastHitInfo !== void 0 ? _this$lastHitInfo : {
                   sId: (_this$defaultSelectIt = this.defaultSelectItemInfo) === null || _this$defaultSelectIt === void 0 ? void 0 : _this$defaultSelectIt.seriesID
                 };
 
-                var _legendHitInfo2 = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
+                var _legendHitInfo3 = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
 
                 if (this.options.sunburst) {
                   this.drawSunburst({
-                    selectInfo: selectInfo,
-                    legendHitInfo: _legendHitInfo2
+                    selectInfo: _selectInfo,
+                    legendHitInfo: _legendHitInfo3
                   });
                 } else {
                   this.drawPie({
-                    selectInfo: selectInfo,
-                    legendHitInfo: _legendHitInfo2
+                    selectInfo: _selectInfo,
+                    legendHitInfo: _legendHitInfo3
                   });
                 }
 
@@ -44351,29 +44543,29 @@ var chart_core_EvChart = /*#__PURE__*/function () {
 
             case 'scatter':
               {
-                var _legendHitInfo3 = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
+                var _legendHitInfo4 = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
 
-                var _selectInfo = void 0;
+                var _selectInfo2 = void 0;
 
                 if (selectItem.use && selectItem.useSeriesOpacity) {
                   var lastHitInfo = this.lastHitInfo;
-                  var defaultSelectInfo = this.defaultSelectItemInfo;
+                  var _defaultSelectInfo = this.defaultSelectItemInfo;
 
                   if (lastHitInfo !== null && lastHitInfo !== void 0 && lastHitInfo.maxIndex || (lastHitInfo === null || lastHitInfo === void 0 ? void 0 : lastHitInfo.maxIndex) === 0) {
-                    _selectInfo = {
+                    _selectInfo2 = {
                       seriesID: lastHitInfo.sId,
                       dataIndex: lastHitInfo.maxIndex
                     };
-                  } else if (defaultSelectInfo !== null && defaultSelectInfo !== void 0 && defaultSelectInfo.dataIndex || (defaultSelectInfo === null || defaultSelectInfo === void 0 ? void 0 : defaultSelectInfo.dataIndex) === 0) {
-                    _selectInfo = _objectSpread2({}, defaultSelectInfo);
+                  } else if (_defaultSelectInfo !== null && _defaultSelectInfo !== void 0 && _defaultSelectInfo.dataIndex || (_defaultSelectInfo === null || _defaultSelectInfo === void 0 ? void 0 : _defaultSelectInfo.dataIndex) === 0) {
+                    _selectInfo2 = _objectSpread2({}, _defaultSelectInfo);
                   } else {
-                    _selectInfo = null;
+                    _selectInfo2 = null;
                   }
                 }
 
                 series.draw(_objectSpread2({
-                  legendHitInfo: _legendHitInfo3,
-                  selectInfo: _selectInfo
+                  legendHitInfo: _legendHitInfo4,
+                  selectInfo: _selectInfo2
                 }, opt));
                 break;
               }
@@ -44853,7 +45045,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       if (options.legend.show) {
         var _options$legend, _options$legend$table;
 
-        var useTable = !!((_options$legend = options.legend) !== null && _options$legend !== void 0 && (_options$legend$table = _options$legend.table) !== null && _options$legend$table !== void 0 && _options$legend$table.use) && options.type !== 'heatmap' && options.type !== 'scatter';
+        var useTable = !!((_options$legend = options.legend) !== null && _options$legend !== void 0 && (_options$legend$table = _options$legend.table) !== null && _options$legend$table !== void 0 && _options$legend$table.use) && options.type !== 'heatMap' && options.type !== 'scatter';
 
         if (!this.isInitLegend) {
           this.initLegend();
@@ -45747,7 +45939,15 @@ var DEFAULT_OPTIONS = {
       fontFamily: 'Roboto',
       fontWeight: 400
     },
-    useSeriesOpacity: false
+    useSeriesOpacity: false,
+    useDeselectItem: false,
+    showBorder: false,
+    borderStyle: {
+      color: '#FFFFFF',
+      lineWidth: 1,
+      opacity: 1,
+      radius: 0
+    }
   },
   selectLabel: {
     use: false,
@@ -45817,8 +46017,8 @@ var DEFAULT_OPTIONS = {
   heatMapColor: {
     min: '#FFFFFF',
     max: '#0052FF',
-    categoryCnt: 1,
-    categoryColors: [],
+    rangeCount: 1,
+    colorsByRange: [],
     stroke: {
       show: false,
       color: '#FFFFFF',
@@ -45874,6 +46074,7 @@ var chart_uses_useModel = function useModel(selectedLabel) {
       var _click = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(e) {
         var _e$selected, _e$selected2;
 
+        var selectedItem;
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -45883,10 +46084,20 @@ var chart_uses_useModel = function useModel(selectedLabel) {
 
               case 2:
                 if (e.label) {
-                  emit('update:selectedItem', {
+                  selectedItem = {
                     seriesID: e.seriesId,
                     dataIndex: e.dataIndex
-                  });
+                  };
+
+                  if ('deselect' in e) {
+                    if (e.deselect) {
+                      selectedItem = null;
+                    }
+
+                    delete e.deselect;
+                  }
+
+                  emit('update:selectedItem', selectedItem);
                 }
 
                 if ((_e$selected = e.selected) !== null && _e$selected !== void 0 && _e$selected.dataIndex) {