evui 3.3.27 → 3.3.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.27",
+  "version": "3.3.30",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "eslint src test docs",
     "docs": "vue-cli-service serve --port 9999 docs/main.js",
-    "docs_build": "vue-cli-service build docs/main.js"
+    "docs_build": "vue-cli-service build --mode production docs/main.js"
   },
   "files": [
     "dist",
@@ -44,6 +44,7 @@
     "eslint-config-exem": "^3.0.3",
     "eslint-plugin-import": "^2.21.2",
     "eslint-plugin-vue": "^7.0.0-0",
+    "gh-pages": "^4.0.0",
     "highlight.js": "^10.2.0",
     "lodash-es": "^4.17.15",
     "marked": "^1.1.1",

package/src/components/calendar/Calendar.vue

@@ -307,7 +307,7 @@ export default {
         const timeReg = new RegExp(/(HH|2[0-3]|[01][0-9]):(mm|[0-5][0-9]):(ss|[0-5][0-9])/);
         return (multiType ? ['weekday', 'week', 'date'].indexOf(multiType) !== -1 : true)
         && (multiDayLimit ? typeof multiDayLimit === 'number' && multiDayLimit > 0 : true)
-        && (disabledDate ? typeof disabledDate === 'function' : true)
+        && (disabledDate ? (typeof disabledDate === 'function' || Array.isArray(disabledDate)) : true)
         && Array.isArray(timeFormat)
             ? timeFormat.every(v => !!(!v || timeReg.exec(v)))
             : !!(!timeFormat || (timeReg.exec(timeFormat)));
@@ -349,7 +349,6 @@ export default {
       clickTime,
       wheelMonth,
       wheelTime,
-      resetCalendarInfo,
       calendarEventName,
       onMousemoveDate,
       preventTimeEventType,
@@ -357,6 +356,8 @@ export default {
       selectedValue,
       mainCalendarPageInfo,
       expandedCalendarPageInfo,
+      mainTimeTableInfo,
+      expandedTimeTableInfo,
       setCalendarDate,
       setHmsTime,
     });
@@ -391,7 +392,6 @@ export default {
       clickTime,
       wheelMonth,
       wheelTime,
-      resetCalendarInfo,
       calendarEventName,
       onMousemoveDate,
       preventTimeEventType,

package/src/components/calendar/uses.js

@@ -206,6 +206,10 @@ const getTimeInfoByTimeFormat = (timeFormat, dateTimeValue, typeToImport) => {
  * @returns string
  */
 export const getChangedValueByTimeFormat = (timeFormat, modelValue) => {
+  if (!modelValue) {
+    return '';
+  }
+
   const hourByTimeFormat = lpadToTwoDigits(getTimeInfoByTimeFormat(timeFormat, modelValue, 'hour'));
   const minByTimeFormat = lpadToTwoDigits(getTimeInfoByTimeFormat(timeFormat, modelValue, 'min'));
   const secByTimeFormat = lpadToTwoDigits(getTimeInfoByTimeFormat(timeFormat, modelValue, 'sec'));
@@ -224,8 +228,8 @@ const compareFromAndToDateTime = (mode, calendarType, targetDate, modelValue) =>
   let toDateTime = toDate;
   if (!targetDate.split(' ')[1]) {
     if (mode === 'dateTimeRange') {
-      fromDate = fromDateTime.split(' ')[0];
-      toDate = toDateTime.split(' ')[0];
+      fromDate = fromDate.split(' ')[0];
+      toDate = toDate.split(' ')[0];
       const fromTime = modelValue[0].split(' ')[1];
       const toTime = modelValue[1].split(' ')[1];
       fromDateTime = `${fromDate} ${fromTime}`;
@@ -236,7 +240,8 @@ const compareFromAndToDateTime = (mode, calendarType, targetDate, modelValue) =>
     }
   }
 
-  return new Date(fromDateTime).getTime() > +new Date(toDateTime).getTime();
+  return (fromDateTime && toDateTime)
+    && new Date(fromDateTime).getTime() > +new Date(toDateTime).getTime();
 };
 
 /**
@@ -303,16 +308,12 @@ export const useModel = () => {
     } else if (props.mode === 'dateRange' && props.modelValue) {
       if (!Array.isArray(props.modelValue)) {
         console.warn('[EVUI][Calendar] When mode is \'dateRange\', v-model must be \'Array\' type.');
-      } else if (props.modelValue.length !== 0 && props.modelValue.length !== 2) {
-        console.warn('[EVUI][Calendar] When mode is \'dateRange\', v-model\'s length is 0 or 2.');
       } else if (getDateMs(`${props.modelValue[0]} 00:00:00`) > getDateMs(`${props.modelValue[1]} 00:00:00`)) {
         console.warn('[EVUI][Calendar] When mode is \'dateRange\', fromDate must be less than toDate.');
       }
     } else if (props.mode === 'dateTimeRange' && props.modelValue) {
       if (!Array.isArray(props.modelValue)) {
         console.warn('[EVUI][Calendar] When mode is \'dateTimeRange\', v-model must be \'Array\' type.');
-      } else if (props.modelValue.length !== 0 && props.modelValue.length !== 2) {
-        console.warn('[EVUI][Calendar] When mode is \'dateRange\', v-model\'s length is 0 or 2.');
       } else if (getDateMs(props.modelValue[0]) > getDateMs(props.modelValue[1])) {
         console.warn('[EVUI][Calendar] When mode is \'dateRange\', fromDate must be less than toDate.');
       }
@@ -322,10 +323,10 @@ export const useModel = () => {
   // 메인(좌측) 달력(연, 월, 시, 분, 초) 페이징 정보
   let mainCalendarPageInfo;
   const mainValue = !['dateRange', 'dateTimeRange'].includes(props.mode) ? selectedValue.value : selectedValue.value[0];
-  if (props.mode) {
+  if (mainValue?.length) {
     mainCalendarPageInfo = reactive({
-      year: getDateTimeInfoByType(mainValue, 'year') || new Date().getFullYear(),
-      month: getDateTimeInfoByType(mainValue, 'month') || new Date().getMonth() + 1,
+      year: getDateTimeInfoByType(mainValue, 'year'),
+      month: getDateTimeInfoByType(mainValue, 'month'),
       hour: Math.floor(getDateTimeInfoByType(mainValue, 'hour') / CELL_CNT_IN_ONE_PAGE) + 1 || 1,
       min: Math.floor(getDateTimeInfoByType(mainValue, 'min') / CELL_CNT_IN_ONE_PAGE) + 1 || 1,
       sec: Math.floor(getDateTimeInfoByType(mainValue, 'sec') / CELL_CNT_IN_ONE_PAGE) + 1 || 1,
@@ -334,6 +335,9 @@ export const useModel = () => {
     mainCalendarPageInfo = reactive({
       year: new Date().getFullYear(),
       month: new Date().getMonth() + 1,
+      hour: 1,
+      min: 1,
+      sec: 1,
     });
   }
 
@@ -356,17 +360,13 @@ export const useModel = () => {
       expandedCalendarPageInfo.sec = Math.floor(getDateTimeInfoByType(expandedValue, 'sec') / CELL_CNT_IN_ONE_PAGE) + 1 || 1;
     }
   } else {
-    expandedCalendarPageInfo = reactive(getSideMonthCalendarInfo(
-      'next',
-      mainCalendarPageInfo.year,
-      mainCalendarPageInfo.month,
-    ));
-
-    if (props.mode === 'dateTimeRange') {
-      expandedCalendarPageInfo.hour = 1;
-      expandedCalendarPageInfo.min = 1;
-      expandedCalendarPageInfo.sec = 1;
-    }
+    expandedCalendarPageInfo = reactive({
+      year: new Date().getFullYear(),
+      month: new Date().getMonth() + 1,
+      hour: 1,
+      min: 1,
+      sec: 1,
+    });
   }
 
   // 현재 달력이 표현되는 월
@@ -401,7 +401,7 @@ export const useModel = () => {
 };
 
 export const useCalendarDate = (param) => {
-  const { props } = getCurrentInstance();
+  const { props, emit } = getCurrentInstance();
   const { selectedValue, mainCalendarPageInfo, expandedCalendarPageInfo } = param;
 
   // 메인 달력 테이블의 날짜 정보 (6X7, 2차원배열)
@@ -421,6 +421,42 @@ export const useCalendarDate = (param) => {
     sec: [],
   });
 
+  /**
+   * calendar setting 하기 전 선택된 날짜가 disabledDate에 포함되는지 체크
+   * @param isRangeMode
+   * @param calendarType
+   * @param disabledDate
+   */
+  const checkDisabledDate = ({ isRangeMode, calendarType, disabledDate }) => {
+    if (isRangeMode) {
+      if (calendarType === 'main' && selectedValue.value[0]) {
+        if (disabledDate && disabledDate(new Date(selectedValue.value[0]))) {
+          selectedValue.value[0] = '';
+          emit('update:modelValue', [...selectedValue.value]);
+        }
+      } else if (calendarType === 'expanded' && selectedValue.value[1]) {
+        if (disabledDate && disabledDate(new Date(selectedValue.value[1]))) {
+          selectedValue.value[1] = '';
+          emit('update:modelValue', [...selectedValue.value]);
+        }
+      }
+    } else if (props.mode === 'dateMulti') {
+      let isUpdate = false;
+      selectedValue.value.forEach((value, index) => {
+        if (disabledDate && disabledDate(new Date(value))) {
+          selectedValue.value.splice(index, 1);
+          isUpdate = true;
+        }
+      });
+      if (isUpdate) {
+        emit('update:modelValue', [...selectedValue.value]);
+      }
+    } else if (disabledDate && disabledDate(new Date(selectedValue.value))) {
+        selectedValue.value = '';
+        emit('update:modelValue', selectedValue.value);
+      }
+  };
+
   /**
    * Dropdown Calendar 날짜 정보 세팅하기
    * @param calendarType - 달력 종류 ('main'|'expanded')
@@ -430,7 +466,18 @@ export const useCalendarDate = (param) => {
       ? expandedCalendarPageInfo : mainCalendarPageInfo;
     const calendarTableInfo = calendarType === 'expanded'
       ? expandedCalendarTableInfo : mainCalendarTableInfo;
-    const disabledDate = props.options.disabledDate;
+
+    let disabledDate = props.options.disabledDate;
+    if (disabledDate && Array.isArray(disabledDate)) {
+      disabledDate = calendarType === 'main' ? disabledDate[0] : disabledDate[1];
+    }
+    const isRangeMode = ['dateRange', 'dateTimeRange'].includes(props.mode);
+
+    checkDisabledDate({
+      isRangeMode,
+      calendarType,
+      disabledDate,
+    });
 
     const TODAY_YMD = formatDateTime({
       year: new Date().getFullYear(),
@@ -462,6 +509,15 @@ export const useCalendarDate = (param) => {
       calendarPageInfo.month,
     ));
 
+    let modelValue = '';
+    if (props.mode.includes('Time')) {
+      if (props.mode === 'dateTime') {
+        modelValue = selectedValue.value;
+      } else {
+        modelValue = calendarType === 'main' ? selectedValue.value[0] : selectedValue.value[1];
+      }
+    }
+
     let monthDate = 0;
     let year = 0;
     let month = 0;
@@ -470,22 +526,26 @@ export const useCalendarDate = (param) => {
     // date 숫자 및 속성 세팅
     const setDateInfo = (monthType, i, j) => {
       currDate = formatDateTime({ year, month, date });
-      const isRangeMode = ['dateRange', 'dateTimeRange'].includes(props.mode);
-      const isDisabled = disabledDate ? disabledDate(new Date(currDate)) : false;
       const isInvalidDate = isRangeMode
           && compareFromAndToDateTime(props.mode, calendarType, currDate, selectedValue.value);
 
-      const index = calendarType !== 'main' | 0;
+      // time 모드인 경우 현재 값의 시간을 가지고 테스트
+      const timeValue = modelValue?.split(' ')[1] ?? '';
+
+      const isDisabled = disabledDate && disabledDate(new Date(`${currDate} ${timeValue}`));
+
+      const index = +(calendarType !== 'main');
       const isRangeSelected = isRangeMode && selectedValue.value.length > index
           && selectedValue.value[index].split(' ')[0].includes(currDate);
+      const isSelected = !isDisabled && (isRangeMode
+        ? monthType === '' && isRangeSelected
+        : selectedValue.value?.includes(currDate));
 
       // mode가 dateRange일 때는 이전, 다음달에 selected 를 하지 않는다.
       calendarTableInfo[i][j] = {
         monthType: `${monthType}${isDisabled || isInvalidDate ? ' disabled' : ''}`,
         isToday: TODAY_YMD === currDate,
-        isSelected: isRangeMode
-          ? monthType === '' && isRangeSelected
-          : selectedValue.value?.includes(currDate),
+        isSelected,
         year,
         month,
         date,
@@ -539,13 +599,17 @@ export const useCalendarDate = (param) => {
    */
   const setHmsTime = () => {
     const timeFormat = props.options?.timeFormat;
+    const disabledDate = props.options?.disabledDate;
     const mainTimeFormat = Array.isArray(timeFormat) ? timeFormat[0] : timeFormat;
     const expandedTimeFormat = Array.isArray(timeFormat) ? timeFormat[1] : '';
     const mainDateTimeValue = props.mode === 'dateTimeRange' ? selectedValue.value[0] : selectedValue.value;
     const expandedDateTimeValue = props.mode === 'dateTimeRange' ? selectedValue.value[1] : '';
+    const mainDisabledDate = Array.isArray(disabledDate) ? disabledDate[0] : disabledDate;
+    const expandedDisabledDate = Array.isArray(disabledDate) ? disabledDate[1] : disabledDate;
 
     const compareDateTimeValue = (calendarType, timeType, value) => {
       const dateTimeValue = calendarType === 'main' ? mainDateTimeValue : expandedDateTimeValue;
+      const disabledDateFunc = calendarType === 'main' ? mainDisabledDate : expandedDisabledDate;
       if (!dateTimeValue) {
         return false;
       }
@@ -564,6 +628,10 @@ export const useCalendarDate = (param) => {
       }
 
       const targetDateTimeValue = `${date} ${lpadToTwoDigits(hour)}:${lpadToTwoDigits(min)}:${lpadToTwoDigits(sec)}`;
+      if (disabledDateFunc && disabledDateFunc(new Date(targetDateTimeValue))) {
+        return true;
+      }
+
       return compareFromAndToDateTime(
           props.mode,
           calendarType,
@@ -584,18 +652,20 @@ export const useCalendarDate = (param) => {
       const expandedTimeValue = expandedDateTimeValue && expandedDateTimeValue.length > 0
           ? getTimeInfoByTimeFormat(expandedTimeFormat, expandedDateTimeValue, v) : -1;
       for (let i = 0; i < cnt; i++) {
-        mainTimeTableInfo[v][i] = {
+        let isDisabled = props.mode === 'dateTimeRange' && compareDateTimeValue('main', v, i);
+          mainTimeTableInfo[v][i] = {
           timeType: v,
           num: i,
-          isSelected: mainTimeValue === i,
-          isDisabled: props.mode === 'dateTimeRange' && compareDateTimeValue('main', v, i),
+          isSelected: !isDisabled && mainTimeValue === i,
+          isDisabled,
         };
         if (props.mode === 'dateTimeRange') {
+          isDisabled = compareDateTimeValue('expanded', v, i);
           expandedTimeTableInfo[v][i] = {
             timeType: v,
             num: i,
-            isSelected: expandedTimeValue === i,
-            isDisabled: compareDateTimeValue('expanded', v, i),
+            isSelected: !isDisabled && expandedTimeValue === i,
+            isDisabled,
           };
         }
       }
@@ -634,12 +704,13 @@ export const useCalendarDate = (param) => {
 
 export const useEvent = (param) => {
   const { props, emit } = getCurrentInstance();
-  const disabledDate = props.options.disabledDate;
   const timeFormat = props.options?.timeFormat;
   const {
     selectedValue,
     mainCalendarPageInfo,
     expandedCalendarPageInfo,
+    mainTimeTableInfo,
+    expandedTimeTableInfo,
     setCalendarDate,
     setHmsTime,
   } = param;
@@ -787,6 +858,11 @@ export const useEvent = (param) => {
         ? props.modelValue?.map(v => v.split(' ')[0])
         : props.modelValue.split(' ')[0])
         .includes(CURR_DATE_STR) : false;
+
+    let disabledDate = props.options.disabledDate;
+    if (disabledDate && Array.isArray(disabledDate)) {
+      disabledDate = calendarType === 'main' ? disabledDate[0] : disabledDate[1];
+    }
     // 제한된 날짜는 선택할 수 없다.
     if (disabledDate && disabledDate(new Date(CURR_DATE_STR)) && !isExistCurrDate) {
       return;
@@ -812,13 +888,12 @@ export const useEvent = (param) => {
 
     const setRangeModeDateByIndex = (currIndex, currDate) => {
       if (compareFromAndToDateTime(props.mode, calendarType, currDate, selectedValue.value)) {
-        return false;
+        return;
       }
 
       selectedValue.value[currIndex] = currDate;
       moveDispCalendarMonth();
       updateCalendarPage(selectedValue.value);
-      return true;
     };
 
     switch (props.mode) {
@@ -997,11 +1072,18 @@ export const useEvent = (param) => {
 
     const calendarPageInfo = calendarType === 'expanded'
         ? expandedCalendarPageInfo : mainCalendarPageInfo;
+    const timeInfo = calendarType === 'main'
+      ? mainTimeTableInfo : expandedTimeTableInfo;
     const currPage = calendarPageInfo[timeType] - 1;
     const currRowIdx = i - 1;
     const currColIdx = j - 1;
     const clickedNum = (currPage * CELL_CNT_IN_ONE_PAGE)
      + (currRowIdx * CELL_CNT_IN_ONE_ROW) + currColIdx;
+
+    if (timeInfo[timeType][clickedNum]?.isDisabled) {
+      return;
+    }
+
     const TODAY = new Date();
     const TODAY_INFO = {
       year: TODAY.getFullYear(),
@@ -1164,31 +1246,22 @@ export const useEvent = (param) => {
     }
   }, 10);
 
-  /**
-   * Calendar Info 전체 업데이트
-   */
-  const resetCalendarInfo = () => {
-    let valueListByUpdatePage = [];
-
-    if (['date', 'dateTime'].includes(props.mode)) {
-      valueListByUpdatePage.push(selectedValue.value);
-    } else {
-      valueListByUpdatePage = selectedValue.value;
-    }
-
-    if (['dateTime', 'dateTimeRange'].includes(props.mode)) {
-      updateCalendarPage(valueListByUpdatePage);
-      setHmsTime();
-    }
-  };
-
   watch(
-      () => props.modelValue,
-      (curr) => {
-        selectedValue.value = curr;
-        resetCalendarInfo();
-      },
-  );
+    () => props.modelValue,
+    (curr) => {
+      selectedValue.value = curr;
+
+      if (props.mode.includes('Time')) {
+        let updateValue = [];
+        if (props.mode === 'dateTime') {
+          updateValue = [selectedValue.value];
+        } else if (props.mode === 'dateTimeRange') {
+          updateValue = selectedValue.value;
+        }
+        updateCalendarPage(updateValue);
+        setHmsTime();
+      }
+  });
 
   return {
     clickPrevNextBtn,
@@ -1197,7 +1270,6 @@ export const useEvent = (param) => {
     clickTime,
     wheelMonth,
     wheelTime,
-    resetCalendarInfo,
     calendarEventName,
     onMousemoveDate,
     preventTimeEventType,

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

@@ -1,6 +1,5 @@
 import throttle from '@/common/utils.throttle';
 import Model from './model';
-import Util from './helpers/helpers.util';
 import TimeScale from './scale/scale.time';
 import LinearScale from './scale/scale.linear';
 import LogarithmicScale from './scale/scale.logarithmic';
@@ -152,7 +151,7 @@ class EvChart {
     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);
     }
@@ -160,7 +159,7 @@ class EvChart {
 
   /**
    * 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}
    */
@@ -198,26 +197,47 @@ class EvChart {
         switch (chartType) {
           case 'line':
           case 'heatMap': {
-            series.draw(opt);
+            const legendHitInfo = hitInfo?.legend;
+
+            series.draw({
+              legendHitInfo,
+              ...opt,
+            });
             break;
           }
           case 'bar': {
+            const legendHitInfo = hitInfo?.legend;
             const { thickness, cPadRatio, borderRadius } = this.options;
-            series.draw({ thickness, cPadRatio, borderRadius, showSeriesCount, showIndex, ...opt });
+
+            series.draw({
+              thickness,
+              cPadRatio,
+              borderRadius,
+              showSeriesCount,
+              showIndex,
+              legendHitInfo,
+              ...opt,
+            });
+
             if (series.show) {
               showIndex++;
             }
             break;
           }
           case 'pie': {
-            const selectInfo = hitInfo
-              ?? this.lastHitInfo
-              ?? { sId: this.defaultSelectItemInfo?.seriesID };
+            const selectInfo = this.lastHitInfo ?? { sId: this.defaultSelectItemInfo?.seriesID };
+            const legendHitInfo = hitInfo?.legend;
 
             if (this.options.sunburst) {
-              this.drawSunburst(selectInfo);
+              this.drawSunburst({
+                selectInfo,
+                legendHitInfo,
+              });
             } else {
-              this.drawPie(selectInfo);
+              this.drawPie({
+                selectInfo,
+                legendHitInfo,
+              });
             }
 
             if (this.options.doughnutHoleSize > 0) {
@@ -226,33 +246,30 @@ class EvChart {
             break;
           }
           case 'scatter': {
+            const legendHitInfo = hitInfo?.legend;
+
+            let selectInfo;
             if (selectItem.use && selectItem.useSeriesOpacity) {
-              if (hitInfo) {
-                if (hitInfo?.maxIndex || hitInfo?.maxIndex === 0) {
-                  opt.selectInfo = {
-                    seriesID: hitInfo.sId,
-                    dataIndex: hitInfo.maxIndex,
-                  };
-                } else {
-                  opt.selectInfo = null;
-                }
-              } else if (this.lastHitInfo?.maxIndex || this.lastHitInfo?.maxIndex === 0) {
-                opt.selectInfo = {
-                  seriesID: this.lastHitInfo.sId,
-                  dataIndex: this.lastHitInfo.maxIndex,
-                };
-              } else if (this.defaultSelectItemInfo?.dataIndex
-                || this.defaultSelectItemInfo?.dataIndex === 0) {
-                opt.selectInfo = {
-                  seriesID: this.defaultSelectItemInfo.seriesID,
-                  dataIndex: this.defaultSelectItemInfo.dataIndex,
+              const lastHitInfo = this.lastHitInfo;
+              const defaultSelectInfo = this.defaultSelectItemInfo;
+
+              if (lastHitInfo?.maxIndex || lastHitInfo?.maxIndex === 0) {
+                selectInfo = {
+                  seriesID: lastHitInfo.sId,
+                  dataIndex: lastHitInfo.maxIndex,
                 };
+              } else if (defaultSelectInfo?.dataIndex || defaultSelectInfo?.dataIndex === 0) {
+                selectInfo = { ...defaultSelectInfo };
               } else {
-                opt.selectInfo = null;
+                selectInfo = null;
               }
             }
 
-            series.draw(opt);
+            series.draw({
+              legendHitInfo,
+              selectInfo,
+              ...opt,
+            });
             break;
           }
           default: {
@@ -265,18 +282,11 @@ class EvChart {
 
   /**
    * Draw Tip with hitInfo and defaultSelectItemInfo
-   * @param hitInfo
    */
-  drawTip(hitInfo) {
-    if (Util.isPieType(hitInfo?.type)) {
-      return;
-    }
-
+  drawTip() {
     let 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);
@@ -381,7 +391,6 @@ class EvChart {
         minSteps: this.labelRange.y[index].min,
         maxSteps: this.labelRange.y[index].max,
       };
-
       return axis.calculateSteps(range);
     });
 

package/src/components/chart/element/element.bar.js

@@ -140,12 +140,16 @@ class Bar {
 
       const barColor = item.dataColor || this.color;
 
-      const selectLabelOption = param.selectLabel.option;
-      const selectedLabel = param.selectLabel.selected ?? { dataIndex: [] };
-
-      const isDownplay = selectLabelOption.use && selectLabelOption.useSeriesOpacity
-          ? selectedLabel.dataIndex.length && !selectedLabel.dataIndex.includes(index)
-          : this.state === 'downplay';
+      const legendHitInfo = param?.legendHitInfo;
+      const selectLabelOption = param?.selectLabel?.option;
+      const selectedLabelList = param?.selectLabel?.selected?.dataIndex ?? [];
+      let isDownplay = false;
+
+      if (legendHitInfo) {
+        isDownplay = legendHitInfo?.sId !== this.sId;
+      } else if (selectLabelOption?.use && selectLabelOption?.useSeriesOpacity) {
+        isDownplay = selectedLabelList.length && !selectedLabelList.includes(index);
+      }
 
       if (typeof barColor !== 'string') {
         ctx.fillStyle = Canvas.createGradient(