evui 3.3.28 → 3.3.31

package/dist/evui.common.js

@@ -7940,7 +7940,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.28\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.31\"}");
 
 /***/ }),
 
@@ -34473,7 +34473,8 @@ var AXIS_OPTION = {
     fontFamily: 'Roboto',
     fontWeight: 400,
     fitWidth: false,
-    fitDir: 'right'
+    fitDir: 'right',
+    alignToGridLine: false
   },
   title: {
     use: false,
@@ -34899,7 +34900,6 @@ var element_line_Line = /*#__PURE__*/function () {
     });
     this.type = 'line';
     this.sId = sId;
-    this.state = 'normal';
     this.extent = {
       downplay: {
         opacity: 0.1,
@@ -34930,7 +34930,11 @@ var element_line_Line = /*#__PURE__*/function () {
   _createClass(Line, [{
     key: "draw",
     value: function draw(param) {
-      var _selectedLabel$dataIn,
+      var _selectLabel$selected,
+          _selectLabel$selected2,
+          _selectSeries$option,
+          _selectSeries$selecte,
+          _selectSeries$selecte2,
           _this2 = this;
 
       if (!this.show) {
@@ -34941,24 +34945,39 @@ var element_line_Line = /*#__PURE__*/function () {
           chartRect = param.chartRect,
           labelOffset = param.labelOffset,
           axesSteps = param.axesSteps,
-          selectLabel = param.selectLabel;
-      var extent = this.extent[this.state];
-      var selectLabelOption = selectLabel.option;
-      var selectedLabel = selectLabel.selected;
-      var isExistSelectedLabel = selectLabelOption.use && selectLabelOption.useSeriesOpacity && ((_selectedLabel$dataIn = selectedLabel.dataIndex) === null || _selectedLabel$dataIn === void 0 ? void 0 : _selectedLabel$dataIn.length) > 0;
-      var downplayOpacity = this.extent.downplay.opacity;
-      var fillOpacity = isExistSelectedLabel ? this.fillOpacity * downplayOpacity : this.fillOpacity * extent.opacity;
-      var lineWidth = this.lineWidth * extent.lineWidth;
+          selectLabel = param.selectLabel,
+          selectSeries = param.selectSeries,
+          legendHitInfo = param.legendHitInfo; // about selectLabel
+
+      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 selectedLabelIndexList = (_selectLabel$selected = selectLabel === null || selectLabel === void 0 ? void 0 : (_selectLabel$selected2 = selectLabel.selected) === null || _selectLabel$selected2 === void 0 ? void 0 : _selectLabel$selected2.dataIndex) !== null && _selectLabel$selected !== void 0 ? _selectLabel$selected : []; // set Style
+
+      var extent;
+
+      if (legendHitInfo) {
+        extent = this.extent[(legendHitInfo === null || legendHitInfo === void 0 ? void 0 : legendHitInfo.sId) === this.sId ? 'highlight' : 'downplay'];
+      } else if (selectSeries !== null && selectSeries !== void 0 && (_selectSeries$option = selectSeries.option) !== null && _selectSeries$option !== void 0 && _selectSeries$option.use && selectSeries !== null && selectSeries !== void 0 && (_selectSeries$selecte = selectSeries.selected) !== null && _selectSeries$selecte !== void 0 && (_selectSeries$selecte2 = _selectSeries$selecte.seriesId) !== null && _selectSeries$selecte2 !== void 0 && _selectSeries$selecte2.length) {
+        var _selectSeries$selecte3, _selectSeries$selecte4;
+
+        var isSelectedSeries = selectSeries === null || selectSeries === void 0 ? void 0 : (_selectSeries$selecte3 = selectSeries.selected) === null || _selectSeries$selecte3 === void 0 ? void 0 : (_selectSeries$selecte4 = _selectSeries$selecte3.seriesId) === null || _selectSeries$selecte4 === void 0 ? void 0 : _selectSeries$selecte4.includes(this.sId);
+        extent = this.extent[isSelectedSeries ? 'highlight' : 'downplay'];
+      } else if (useSelectLabel && selectedLabelIndexList.length) {
+        extent = this.extent.downplay;
+      } else {
+        extent = this.extent.normal;
+      }
 
       var getOpacity = function getOpacity(colorStr) {
-        var noneDownplayOpacity = colorStr.includes('rgba') ? helpers_util.getOpacity(colorStr) : 1;
-        return _this2.state === 'downplay' || isExistSelectedLabel ? 0.1 : noneDownplayOpacity;
+        return colorStr.includes('rgba') ? helpers_util.getOpacity(colorStr) : extent.opacity;
       };
 
       var mainColor = this.color;
       var mainColorOpacity = getOpacity(mainColor);
       var pointFillColor = this.pointFill;
       var pointFillColorOpacity = getOpacity(pointFillColor);
+      var fillOpacity = getOpacity(mainColor) * this.fillOpacity;
+      var lineWidth = this.lineWidth * extent.lineWidth;
       ctx.beginPath();
       ctx.save();
       ctx.lineJoin = 'round';
@@ -35061,19 +35080,23 @@ var element_line_Line = /*#__PURE__*/function () {
           }
         });
         ctx.fill();
-      }
+      } // Draw points
+
 
-      if (this.point || isExistSelectedLabel) {
+      if (this.point || useSelectLabel) {
         ctx.strokeStyle = helpers_util.colorStringToRgba(mainColor, mainColorOpacity);
         var focusStyle = helpers_util.colorStringToRgba(pointFillColor, 1);
         var blurStyle = helpers_util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
-        this.data.forEach(function (curr, i) {
-          if (curr.xp !== null && curr.yp !== null) {
-            ctx.fillStyle = isExistSelectedLabel && selectedLabel.dataIndex.includes(i) ? focusStyle : blurStyle;
+        this.data.forEach(function (curr, ix) {
+          var isSelectedLabel = selectedLabelIndexList.includes(ix);
 
-            if (_this2.point || selectedLabel.dataIndex.includes(i)) {
-              helpers_canvas.drawPoint(ctx, _this2.pointStyle, _this2.pointSize, curr.xp, curr.yp);
-            }
+          if (curr.xp === null || curr.yp === null) {
+            return;
+          }
+
+          if (_this2.point || isSelectedLabel) {
+            ctx.fillStyle = isSelectedLabel && !legendHitInfo ? focusStyle : blurStyle;
+            helpers_canvas.drawPoint(ctx, _this2.pointStyle, _this2.pointSize, curr.xp, curr.yp);
           }
         });
       }
@@ -35368,22 +35391,17 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
 
       var getOpacity = function getOpacity(colorStr, dataIndex) {
         var noneDownplayOpacity = colorStr.includes('rgba') ? helpers_util.getOpacity(colorStr) : 1;
-        var resultOpacity = noneDownplayOpacity;
-        var selectInfo = param.selectInfo;
-
-        if (selectInfo) {
-          var isSelectedData = (selectInfo === null || selectInfo === void 0 ? void 0 : selectInfo.seriesID) === _this2.sId && (selectInfo === null || selectInfo === void 0 ? void 0 : selectInfo.dataIndex) === dataIndex;
+        var isDownplay = false;
+        var selectInfo = param.selectInfo,
+            legendHitInfo = param.legendHitInfo;
 
-          if (isSelectedData) {
-            resultOpacity = noneDownplayOpacity;
-          } else {
-            resultOpacity = 0.1;
-          }
-        } else {
-          resultOpacity = _this2.state === 'downplay' ? 0.1 : noneDownplayOpacity;
+        if (legendHitInfo) {
+          isDownplay = legendHitInfo.sId !== _this2.sId;
+        } else if (selectInfo) {
+          isDownplay = (selectInfo === null || selectInfo === void 0 ? void 0 : selectInfo.seriesID) !== _this2.sId || (selectInfo === null || selectInfo === void 0 ? void 0 : selectInfo.dataIndex) !== dataIndex;
         }
 
-        return resultOpacity;
+        return isDownplay ? 0.1 : noneDownplayOpacity;
       };
 
       this.data.forEach(function (curr, idx) {
@@ -35606,7 +35624,7 @@ var element_bar_Bar = /*#__PURE__*/function () {
       this.borderRadius = param.borderRadius;
       var categoryPoint = null;
       this.data.forEach(function (dataItem, index) {
-        var _param$selectLabel$se;
+        var _param$selectLabel, _param$selectLabel$se, _param$selectLabel2, _param$selectLabel2$s;
 
         ctx.beginPath();
         var item = dataItem;
@@ -35642,11 +35660,16 @@ var element_bar_Bar = /*#__PURE__*/function () {
         }
 
         var barColor = item.dataColor || _this2.color;
-        var selectLabelOption = param.selectLabel.option;
-        var selectedLabel = (_param$selectLabel$se = param.selectLabel.selected) !== null && _param$selectLabel$se !== void 0 ? _param$selectLabel$se : {
-          dataIndex: []
-        };
-        var isDownplay = selectLabelOption.use && selectLabelOption.useSeriesOpacity ? selectedLabel.dataIndex.length && !selectedLabel.dataIndex.includes(index) : _this2.state === 'downplay';
+        var legendHitInfo = param === null || param === void 0 ? void 0 : param.legendHitInfo;
+        var selectLabelOption = param === null || param === void 0 ? void 0 : (_param$selectLabel = param.selectLabel) === null || _param$selectLabel === void 0 ? void 0 : _param$selectLabel.option;
+        var selectedLabelList = (_param$selectLabel$se = param === null || param === void 0 ? void 0 : (_param$selectLabel2 = param.selectLabel) === null || _param$selectLabel2 === void 0 ? void 0 : (_param$selectLabel2$s = _param$selectLabel2.selected) === null || _param$selectLabel2$s === void 0 ? void 0 : _param$selectLabel2$s.dataIndex) !== null && _param$selectLabel$se !== void 0 ? _param$selectLabel$se : [];
+        var isDownplay = false;
+
+        if (legendHitInfo) {
+          isDownplay = (legendHitInfo === null || legendHitInfo === void 0 ? void 0 : legendHitInfo.sId) !== _this2.sId;
+        } else if (selectLabelOption !== null && selectLabelOption !== void 0 && selectLabelOption.use && selectLabelOption !== null && selectLabelOption !== void 0 && selectLabelOption.useSeriesOpacity) {
+          isDownplay = selectedLabelList.length && !selectedLabelList.includes(index);
+        }
 
         if (typeof barColor !== 'string') {
           ctx.fillStyle = helpers_canvas.createGradient(ctx, isHorizontal, {
@@ -36392,7 +36415,6 @@ var element_pie_Pie = /*#__PURE__*/function () {
     this.doughnutHoleSize = 0;
     this.startAngle = 0;
     this.endAngle = 0;
-    this.state = null;
     this.ctx = null;
     this.isSelect = false;
   }
@@ -36416,7 +36438,7 @@ var element_pie_Pie = /*#__PURE__*/function () {
       var radius = this.isSelect ? this.radius + 5 : this.radius;
       var color = this.color;
       var noneDownplayOpacity = color.includes('rgba') ? helpers_util.getOpacity(color) : 1;
-      var opacity = this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
+      var opacity = this.isDownplay ? 0.1 : noneDownplayOpacity;
       ctx.beginPath();
       slice.moveTo(this.centerX, this.centerY);
       slice.arc(this.centerX, this.centerY, radius, this.startAngle, this.endAngle);
@@ -36489,7 +36511,7 @@ var element_pie_Pie = /*#__PURE__*/function () {
   }, {
     key: "itemHighlight",
     value: function itemHighlight(item, context) {
-      var _this$showValue2;
+      var _item$data, _this$showValue2;
 
       var ctx = context;
       var radius = this.isSelect ? this.radius + 5 : this.radius;
@@ -36497,7 +36519,7 @@ var element_pie_Pie = /*#__PURE__*/function () {
       ctx.shadowOffsetX = 0;
       ctx.shadowOffsetY = 0;
       ctx.shadowBlur = 4;
-      var color = item.data.dataColor || this.color;
+      var color = (item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.dataColor) || this.color;
       ctx.fillStyle = color;
       ctx.shadowColor = color;
       ctx.beginPath();
@@ -37494,7 +37516,11 @@ var scale_Scale = /*#__PURE__*/function () {
       numberOfSteps = Math.round(graphRange / interval);
 
       if (maxValue === 1) {
-        if (maxSteps > 2) {
+        if (!this.decimalPoint) {
+          interval = 1;
+          numberOfSteps = 1;
+          maxSteps = 1;
+        } else if (maxSteps > 2) {
           interval = 0.2;
           numberOfSteps = 5;
           maxSteps = 5;
@@ -38539,6 +38565,7 @@ var scale_logarithmic_LogarithmicScale = /*#__PURE__*/function (_Scale) {
 
 
 
+
 var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
   _inherits(StepScale, _Scale);
 
@@ -38565,7 +38592,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
   _createClass(StepScale, [{
     key: "calculateScaleRange",
     value: function calculateScaleRange(minMax, chartRect) {
-      var stepMinMax = this.rangeMode ? minMax : helpers_util.getStringMinMax(this.labels);
+      var stepMinMax = this.labelStyle.alignToGridLine ? minMax : helpers_util.getStringMinMax(this.labels);
       var maxValue = stepMinMax.max;
       var minValue = stepMinMax.min;
       var maxWidth = chartRect.chartWidth / (this.labels.length + 2);
@@ -38589,8 +38616,11 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
     value: function calculateSteps(range) {
       var numberOfSteps = this.labels.length;
       var interval = 1;
+      var isNumbersArray = this.labels.every(function (label) {
+        return !isNaN(label);
+      });
 
-      if (this.rangeMode) {
+      if (this.labelStyle.alignToGridLine && isNumbersArray) {
         var maxSteps = range.maxSteps;
 
         if (maxSteps > 2) {
@@ -38678,6 +38708,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
         }
 
         var labelGap = (endPoint - startPoint) / labels.length;
+        var alignToGridLine = this.labelStyle.alignToGridLine;
         var labelCenter = null;
         var linePosition = null;
         ctx.beginPath();
@@ -38707,7 +38738,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
             var _this$options3, _this$options3$select, _this$options4;
 
             labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-            var xPoint = this.rangeMode ? labelCenter : labelCenter + labelGap / 2;
+            var xPoint = alignToGridLine ? labelCenter : labelCenter + labelGap / 2;
             ctx.fillText(labelText, xPoint, labelPoint);
 
             if (!isBlurredLabel && (_this$options3 = this.options) !== null && _this$options3 !== void 0 && (_this$options3$select = _this$options3.selectItem) !== null && _this$options3$select !== void 0 && _this$options3$select.showLabelTip && hitInfo !== null && hitInfo !== void 0 && hitInfo.label && !((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.horizontal)) {
@@ -38738,7 +38769,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
             }
           } else {
             labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-            var yPoint = this.rangeMode ? labelCenter : labelCenter + labelGap / 2;
+            var yPoint = alignToGridLine ? labelCenter : labelCenter + labelGap / 2;
             ctx.fillText(labelText, labelPoint, yPoint);
 
             if (index > 0 && this.showGrid) {
@@ -38750,7 +38781,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
           ctx.stroke();
         }
 
-        if (this.rangeMode && index === this.labels.length) {
+        if (alignToGridLine && index === this.labels.length) {
           var labelLastText = +labels[labels.length - 1] + (+labels[1] - +labels[0]);
 
           if (isNaN(labelLastText)) {
@@ -39091,9 +39122,10 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
         return;
       }
 
+      var alignToGridLine = this.labelStyle.alignToGridLine;
       var graphGap = (endPoint - startPoint) / (labels.length || 1);
 
-      if (this.categoryMode && !this.rangeMode) {
+      if (this.categoryMode && !alignToGridLine) {
         startPoint += Math.ceil(graphGap / 2) - 2;
       }
 
@@ -39167,7 +39199,7 @@ var scale_time_category_TimeCategoryScale = /*#__PURE__*/function (_Scale) {
         ctx.stroke();
       }
 
-      if (this.categoryMode && this.rangeMode && count * steps === oriSteps) {
+      if (this.categoryMode && alignToGridLine && count * steps === oriSteps) {
         var diffTime = dayjs_min_default()(labels[1]).diff(dayjs_min_default()(labels[0]));
         var labelLastText = this.getLabelFormat(dayjs_min_default()(labels[labels.length - 1] + diffTime));
         labelCenter = Math.round(startPoint + graphGap * labels.length);
@@ -39274,7 +39306,6 @@ var plugins_title_modules = {
 
 
 
-
 var plugins_legend_modules = {
   /**
    * Create legend DOM
@@ -39498,8 +39529,6 @@ var plugins_legend_modules = {
 
 
     this.onLegendBoxOver = function (e) {
-      var _this3$defaultSelectI, _this3$defaultSelectI2;
-
       var type = e.target.dataset.type;
       var targetDOM;
 
@@ -39513,19 +39542,10 @@ var plugins_legend_modules = {
 
       var nameDOM = targetDOM.getElementsByClassName('ev-chart-legend-name')[0];
       var targetId = nameDOM.series.sId;
-      var selectSeriesOption = _this3.options.selectSeries;
-      var selectedList = (_this3$defaultSelectI = (_this3$defaultSelectI2 = _this3.defaultSelectInfo) === null || _this3$defaultSelectI2 === void 0 ? void 0 : _this3$defaultSelectI2.seriesId) !== null && _this3$defaultSelectI !== void 0 ? _this3$defaultSelectI : [];
-      Object.values(_this3.seriesList).forEach(function (series) {
-        series.state = series.sId === targetId || selectSeriesOption.use && selectedList.includes(targetId) ? 'highlight' : 'downplay';
-      });
-      var hitInfo = null;
-
-      if (helpers_util.isPieType(_this3.options.type)) {
-        hitInfo = {
-          sId: targetId,
-          type: _this3.options.type
-        };
-      }
+      var legendHitInfo = {
+        sId: targetId,
+        type: _this3.options.type
+      };
 
       _this3.update({
         updateSeries: false,
@@ -39533,7 +39553,9 @@ var plugins_legend_modules = {
           update: false,
           keepDomain: false
         },
-        hitInfo: hitInfo
+        hitInfo: {
+          legend: legendHitInfo
+        }
       });
     };
     /**
@@ -39544,23 +39566,14 @@ var plugins_legend_modules = {
 
 
     this.onLegendBoxLeave = function () {
-      var _this3$defaultSelectI3, _this3$defaultSelectI4;
-
-      var selectSeriesOption = _this3.options.selectSeries;
-      var selectedList = (_this3$defaultSelectI3 = (_this3$defaultSelectI4 = _this3.defaultSelectInfo) === null || _this3$defaultSelectI4 === void 0 ? void 0 : _this3$defaultSelectI4.seriesId) !== null && _this3$defaultSelectI3 !== void 0 ? _this3$defaultSelectI3 : [];
-      Object.values(_this3.seriesList).forEach(function (series) {
-        if (selectSeriesOption.use && selectedList.length) {
-          series.state = selectedList.includes(series.sId) ? 'highlight' : 'downplay';
-        } else {
-          series.state = 'normal';
-        }
-      });
-
       _this3.update({
         updateSeries: false,
         updateSelTip: {
           update: false,
           keepDomain: false
+        },
+        hitInfo: {
+          legend: null
         }
       });
     };
@@ -39784,6 +39797,8 @@ var plugins_legend_modules = {
     while (legendDOM.hasChildNodes()) {
       legendDOM.removeChild(legendDOM.firstChild);
     }
+
+    this.seriesInfo.count = 0;
   },
 
   /**
@@ -40859,9 +40874,6 @@ var es_object_from_entries = __webpack_require__("c1f9");
 
 
 
-
-
-
 var plugins_interaction_modules = {
   /**
    * Hide legend components by manipulating css
@@ -41367,34 +41379,36 @@ var plugins_interaction_modules = {
     var seriesName = _ref2.seriesName,
         value = _ref2.value,
         itemData = _ref2.itemData;
-    var tooltipOpt = this.options.tooltip;
-    var tooltipValueFormatter = typeof tooltipOpt.formatter === 'function' ? tooltipOpt.formatter : (_tooltipOpt$formatter = tooltipOpt.formatter) === null || _tooltipOpt$formatter === void 0 ? void 0 : _tooltipOpt$formatter.value;
+    var opt = this.options;
+    var isHorizontal = !!opt.horizontal;
+    var tooltipOpt = opt.tooltip;
+    var tooltipValueFormatter = typeof (tooltipOpt === null || tooltipOpt === void 0 ? void 0 : tooltipOpt.formatter) === 'function' ? tooltipOpt === null || tooltipOpt === void 0 ? void 0 : tooltipOpt.formatter : tooltipOpt === null || tooltipOpt === void 0 ? void 0 : (_tooltipOpt$formatter = tooltipOpt.formatter) === null || _tooltipOpt$formatter === void 0 ? void 0 : _tooltipOpt$formatter.value;
     var formattedTxt = value;
 
     if (tooltipValueFormatter) {
-      if (this.options.type === 'pie') {
+      if (opt.type === 'pie') {
         formattedTxt = tooltipValueFormatter({
           value: value,
           name: seriesName,
-          percentage: itemData.percentage
+          percentage: itemData === null || itemData === void 0 ? void 0 : itemData.percentage
         });
-      } else if (this.options.type === 'heatMap') {
+      } else if (opt.type === 'heatMap') {
         formattedTxt = tooltipValueFormatter({
-          x: itemData.x,
-          y: itemData.y,
+          x: itemData === null || itemData === void 0 ? void 0 : itemData.x,
+          y: itemData === null || itemData === void 0 ? void 0 : itemData.y,
           value: value > -1 ? value : 'error'
         });
       } else {
         formattedTxt = tooltipValueFormatter({
-          x: this.options.horizontal ? value : itemData.x,
-          y: this.options.horizontal ? itemData.y : value,
+          x: isHorizontal ? value : itemData === null || itemData === void 0 ? void 0 : itemData.x,
+          y: isHorizontal ? itemData === null || itemData === void 0 ? void 0 : itemData.y : value,
           name: seriesName
         });
       }
     }
 
     if (value && (!tooltipValueFormatter || typeof formattedTxt !== 'string')) {
-      if (this.options.type === 'heatMap') {
+      if (opt.type === 'heatMap') {
         formattedTxt = value < 0 ? 'error' : numberWithComma(value);
       } else {
         formattedTxt = numberWithComma(value);
@@ -41411,38 +41425,60 @@ var plugins_interaction_modules = {
   addNotHitInfo: function addNotHitInfo(hitInfo) {
     var _hitInfo$items, _hitInfo$items$hitIte, _hitInfo$items$hitIte2, _hitInfo$items2, _hitInfo$items2$hitIt, _hitInfo$items2$hitIt2;
 
+    var ctx = this.tooltipCtx;
     var isHorizontal = !!this.options.horizontal;
     var hitItemId = Object.keys(hitInfo.items)[0];
     var hitItemData = isHorizontal ? (_hitInfo$items = hitInfo.items) === null || _hitInfo$items === void 0 ? void 0 : (_hitInfo$items$hitIte = _hitInfo$items[hitItemId]) === null || _hitInfo$items$hitIte === void 0 ? void 0 : (_hitInfo$items$hitIte2 = _hitInfo$items$hitIte.data) === null || _hitInfo$items$hitIte2 === void 0 ? void 0 : _hitInfo$items$hitIte2.y : (_hitInfo$items2 = hitInfo.items) === null || _hitInfo$items2 === void 0 ? void 0 : (_hitInfo$items2$hitIt = _hitInfo$items2[hitItemId]) === null || _hitInfo$items2$hitIt === void 0 ? void 0 : (_hitInfo$items2$hitIt2 = _hitInfo$items2$hitIt.data) === null || _hitInfo$items2$hitIt2 === void 0 ? void 0 : _hitInfo$items2$hitIt2.x;
+    var maxSeriesName = '';
+    var maxValueTxt = '';
     var sIds = Object.keys(this.seriesList);
 
     for (var ix = 0; ix < sIds.length; ix++) {
       var sId = sIds[ix];
       var series = this.seriesList[sId];
-      var hasData = series.data.find(function (data) {
-        return isHorizontal ? (data === null || data === void 0 ? void 0 : data.y) === hitItemData : (data === null || data === void 0 ? void 0 : data.x) === hitItemData;
-      });
 
-      if (hasData && !hitInfo.items[sId] && series !== null && series !== void 0 && series.show) {
-        var item = {};
-        item.color = series.color;
-        item.hit = false;
-        item.name = series.name;
-        item.axis = {
-          x: series.xAxisIndex,
-          y: series.yAxisIndex
-        };
-        item.index = isHorizontal ? series.yAxisIndex : series.xAxisIndex;
-        item.data = hasData;
-        item.data.formatted = this.getFormattedTooltipValue({
+      if (series !== null && series !== void 0 && series.show) {
+        var hasData = series.data.find(function (data) {
+          return isHorizontal ? (data === null || data === void 0 ? void 0 : data.y) === hitItemData : (data === null || data === void 0 ? void 0 : data.x) === hitItemData;
+        });
+        var formattedValue = this.getFormattedTooltipValue({
           seriesName: series.name,
-          value: hasData.o,
-          x: hasData.x,
-          y: hasData.y
+          value: hasData === null || hasData === void 0 ? void 0 : hasData.o,
+          itemData: hasData
         });
-        hitInfo.items[sId] = item;
+
+        if (hasData && !hitInfo.items[sId]) {
+          var item = {};
+          item.color = series.color;
+          item.hit = false;
+          item.name = series.name;
+          item.axis = {
+            x: series.xAxisIndex,
+            y: series.yAxisIndex
+          };
+          item.index = isHorizontal ? series.yAxisIndex : series.xAxisIndex;
+          item.data = hasData;
+          item.data.formatted = formattedValue;
+          hitInfo.items[sId] = item;
+        }
+
+        var maxSeriesNameWidth = ctx ? ctx.measureText(maxSeriesName).width : 1;
+        var seriesNameWidth = ctx ? ctx.measureText(series.name).width : 1;
+
+        if (maxSeriesNameWidth < seriesNameWidth) {
+          maxSeriesName = series.name;
+        }
+
+        var maxValueWidth = ctx ? ctx.measureText(maxValueTxt).width : 1;
+        var valueWidth = ctx ? ctx.measureText("".concat(formattedValue)).width : 1;
+
+        if (maxValueWidth < valueWidth) {
+          maxValueTxt = "".concat(formattedValue);
+        }
       }
     }
+
+    hitInfo.maxTip = [maxSeriesName, maxValueTxt];
   },
 
   /**
@@ -41531,17 +41567,6 @@ var plugins_interaction_modules = {
           seriesId: []
         };
       }
-
-      var selectedList = this.defaultSelectInfo.seriesId;
-      Object.values(this.seriesList).forEach(function (series) {
-        if (!selectedList.length) {
-          series.state = 'normal';
-        } else if (selectedList.includes(series.sId)) {
-          series.state = 'highlight';
-        } else {
-          series.state = 'downplay';
-        }
-      });
     }
   },
 
@@ -42517,7 +42542,10 @@ var plugins_pie_modules = {
               ctx.stroke();
             }
 
-            series.isSelect = (hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.sId) === slice.id;
+            var selectInfo = hitInfo.selectInfo,
+                legendHitInfo = hitInfo.legendHitInfo;
+            series.isSelect = (selectInfo === null || selectInfo === void 0 ? void 0 : selectInfo.sId) === slice.id;
+            series.isDownplay = legendHitInfo && legendHitInfo.sId !== slice.id;
             series.type = isDoughnut ? 'doughnut' : 'pie';
             series.centerX = centerX;
             series.centerY = centerY;
@@ -42622,7 +42650,10 @@ var plugins_pie_modules = {
               ctx.stroke();
             }
 
-            series.isSelect = (hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.sId) === slice.id;
+            var selectInfo = hitInfo.selectInfo,
+                legendHitInfo = hitInfo.legendHitInfo;
+            series.isSelect = (selectInfo === null || selectInfo === void 0 ? void 0 : selectInfo.sId) === slice.id;
+            series.isDownplay = legendHitInfo && legendHitInfo.sId !== slice.id;
             series.type = 'sunburst';
             series.centerX = centerX;
             series.centerY = centerY;
@@ -43317,7 +43348,6 @@ var element_tip_modules = {
 
 
 
-
 
 
 var chart_core_EvChart = /*#__PURE__*/function () {
@@ -43479,7 +43509,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.axesSteps = this.calculateSteps();
       this.drawAxis(hitInfo);
       this.drawSeries(hitInfo);
-      this.drawTip(hitInfo);
+      this.drawTip();
 
       if (this.bufferCanvas) {
         this.displayCtx.drawImage(this.bufferCanvas, 0, 0);
@@ -43487,7 +43517,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     }
     /**
      * Draw each series
-     * @param {any} [hitInfo=undefined]    from mousemove callback (object or undefined)
+     * @param {any} [hitInfo=undefined]   legend mouseover callback (object or undefined)
      *
      * @returns {undefined}
      */
@@ -43541,12 +43571,17 @@ var chart_core_EvChart = /*#__PURE__*/function () {
             case 'line':
             case 'heatMap':
               {
-                series.draw(opt);
+                var legendHitInfo = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
+                series.draw(_objectSpread2({
+                  legendHitInfo: legendHitInfo
+                }, opt));
                 break;
               }
 
             case 'bar':
               {
+                var _legendHitInfo = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
+
                 var _this$options3 = this.options,
                     thickness = _this$options3.thickness,
                     cPadRatio = _this$options3.cPadRatio,
@@ -43556,7 +43591,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
                   cPadRatio: cPadRatio,
                   borderRadius: borderRadius,
                   showSeriesCount: showSeriesCount,
-                  showIndex: showIndex
+                  showIndex: showIndex,
+                  legendHitInfo: _legendHitInfo
                 }, opt));
 
                 if (series.show) {
@@ -43568,16 +43604,24 @@ var chart_core_EvChart = /*#__PURE__*/function () {
 
             case 'pie':
               {
-                var _ref, _this$defaultSelectIt;
+                var _this$lastHitInfo, _this$defaultSelectIt;
 
-                var selectInfo = (_ref = hitInfo !== null && hitInfo !== void 0 ? hitInfo : this.lastHitInfo) !== null && _ref !== void 0 ? _ref : {
+                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;
+
                 if (this.options.sunburst) {
-                  this.drawSunburst(selectInfo);
+                  this.drawSunburst({
+                    selectInfo: selectInfo,
+                    legendHitInfo: _legendHitInfo2
+                  });
                 } else {
-                  this.drawPie(selectInfo);
+                  this.drawPie({
+                    selectInfo: selectInfo,
+                    legendHitInfo: _legendHitInfo2
+                  });
                 }
 
                 if (this.options.doughnutHoleSize > 0) {
@@ -43589,34 +43633,30 @@ var chart_core_EvChart = /*#__PURE__*/function () {
 
             case 'scatter':
               {
+                var _legendHitInfo3 = hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.legend;
+
+                var _selectInfo = void 0;
+
                 if (selectItem.use && selectItem.useSeriesOpacity) {
-                  var _this$lastHitInfo, _this$lastHitInfo2, _this$defaultSelectIt2, _this$defaultSelectIt3;
-
-                  if (hitInfo) {
-                    if (hitInfo !== null && hitInfo !== void 0 && hitInfo.maxIndex || (hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.maxIndex) === 0) {
-                      opt.selectInfo = {
-                        seriesID: hitInfo.sId,
-                        dataIndex: hitInfo.maxIndex
-                      };
-                    } else {
-                      opt.selectInfo = null;
-                    }
-                  } else if ((_this$lastHitInfo = this.lastHitInfo) !== null && _this$lastHitInfo !== void 0 && _this$lastHitInfo.maxIndex || ((_this$lastHitInfo2 = this.lastHitInfo) === null || _this$lastHitInfo2 === void 0 ? void 0 : _this$lastHitInfo2.maxIndex) === 0) {
-                    opt.selectInfo = {
-                      seriesID: this.lastHitInfo.sId,
-                      dataIndex: this.lastHitInfo.maxIndex
-                    };
-                  } else if ((_this$defaultSelectIt2 = this.defaultSelectItemInfo) !== null && _this$defaultSelectIt2 !== void 0 && _this$defaultSelectIt2.dataIndex || ((_this$defaultSelectIt3 = this.defaultSelectItemInfo) === null || _this$defaultSelectIt3 === void 0 ? void 0 : _this$defaultSelectIt3.dataIndex) === 0) {
-                    opt.selectInfo = {
-                      seriesID: this.defaultSelectItemInfo.seriesID,
-                      dataIndex: this.defaultSelectItemInfo.dataIndex
+                  var lastHitInfo = this.lastHitInfo;
+                  var defaultSelectInfo = this.defaultSelectItemInfo;
+
+                  if (lastHitInfo !== null && lastHitInfo !== void 0 && lastHitInfo.maxIndex || (lastHitInfo === null || lastHitInfo === void 0 ? void 0 : lastHitInfo.maxIndex) === 0) {
+                    _selectInfo = {
+                      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 {
-                    opt.selectInfo = null;
+                    _selectInfo = null;
                   }
                 }
 
-                series.draw(opt);
+                series.draw(_objectSpread2({
+                  legendHitInfo: _legendHitInfo3,
+                  selectInfo: _selectInfo
+                }, opt));
                 break;
               }
 
@@ -43630,21 +43670,14 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     }
     /**
      * Draw Tip with hitInfo and defaultSelectItemInfo
-     * @param hitInfo
      */
 
   }, {
     key: "drawTip",
-    value: function drawTip(hitInfo) {
-      if (helpers_util.isPieType(hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.type)) {
-        return;
-      }
-
+    value: function drawTip() {
       var tipLocationInfo;
 
-      if (hitInfo) {
-        tipLocationInfo = hitInfo;
-      } else if (this.lastHitInfo) {
+      if (this.lastHitInfo) {
         tipLocationInfo = this.lastHitInfo;
       } else if (this.defaultSelectItemInfo) {
         tipLocationInfo = this.getItem(this.defaultSelectItemInfo, false);