@opentiny/vue-renderless 3.12.0 → 3.13.0-alpha.0

package/cascader-select/index.js

@@ -1,179 +1,43 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "../chunk-G2ADBYYC.js";
-const normalRange = (value, min, max) => value < min ? min : value > max ? max : value;
-const sliceValue = (value, min, max, count, cycleRoll) => {
-  value = normalRange(value, min, max);
-  const values = [value];
-  const tmpArr = Array.from({ length: rightShift(count) });
-  const prev = () => cycleRoll ? tVal + max - min + 1 : null;
-  const next = () => cycleRoll ? tVal - max + min - 1 : null;
-  let tVal;
-  tmpArr.map((v, i) => values.unshift((tVal = value - i - 1) < min ? prev() : tVal));
-  tmpArr.map((v, i) => values.push((tVal = value + i + 1) > max ? next() : tVal));
-  return values;
-};
-const validArr = (arr) => Array.isArray(arr) && arr.length;
-const validProps = (props) => {
-  const { modelValue, options } = props;
-  return validArr(modelValue) && validArr(options) && modelValue.length === options.length;
-};
-const rightShift = (count) => count >>> 1;
-const getFont = (pos, count) => Math.abs(rightShift(count) + 1 - pos);
-const parseType = (props) => (values) => {
-  const { valueType } = props;
-  return values.map(valueType === "number" ? Number : valueType === "string" ? String : (i) => i);
-};
-const init = ({ api, props, state }) => (valuesCopy) => {
-  if (!validProps(props))
-    return;
-  const { modelValue, options, cycleRoll, valueField, textField } = props;
-  const { visibleOptionCount } = state;
-  let { disabled } = props;
-  disabled = typeof disabled === "function" ? disabled : () => false;
-  const values = api.parseType(valuesCopy || modelValue.slice(0));
-  const types = Array.from({ length: values.length });
-  const ranges = Array.from({ length: values.length });
-  const indices = Array.from({ length: values.length });
-  const visibleOptions = options.map((opt, i) => {
-    let slicedValues, existOption;
-    if (Array.isArray(opt)) {
-      if (opt.length === 0)
-        return [];
-      let index = opt.findIndex((item) => item[valueField] === values[i]);
-      index = index === -1 ? 0 : index;
-      types[i] = "a";
-      ranges[i] = [0, opt.length - 1];
-      indices[i] = index;
-      slicedValues = sliceValue(index, 0, opt.length - 1, visibleOptionCount, cycleRoll);
-      existOption = (i2) => __spreadProps(__spreadValues({}, opt[i2]), { disabled: disabled(opt[i2][valueField], ...values) });
-    } else if (opt && typeof opt === "object") {
-      let range;
-      if (Array.isArray(opt.range)) {
-        range = opt.range.slice(0, 2);
-      } else if (typeof opt.rangeMethod === "function") {
-        range = opt.rangeMethod(...values);
-      }
-      types[i] = "o";
-      ranges[i] = api.parseType(range);
-      slicedValues = sliceValue(values[i], ranges[i][0], ranges[i][1], visibleOptionCount, cycleRoll);
-      existOption = (i2) => opt.optionMethod(i2, ...values);
-    }
-    if (!slicedValues || !existOption)
-      return [];
-    return slicedValues.map((slicedValue, i2) => {
-      const option = slicedValue === null ? { [valueField]: null, [textField]: "" } : existOption(slicedValue);
-      option._$font = getFont(i2 + 1, visibleOptionCount);
-      option._$status = option.disabled ? "disabled" : option._$font === 0 ? "focus" : "normal";
-      return option;
-    });
-  });
-  state.selectorCount = values.length;
-  values.map((value, i) => {
-    const index = indices[i];
-    const opts = options[i];
-    const vOpts = visibleOptions[i];
-    state[`selector${i}`] = { index, options: opts, ranges, types, value, values, visibleOptions: vOpts };
-  });
-};
-const calcSelector = (api) => (cycleRoll, dy, pos, selector, valueField) => {
-  const { index, options, ranges, types, value, values } = selector;
-  const valuesCopy = values.slice(0);
-  const sRange = ranges[pos];
-  const sType = types[pos];
-  let sVal = sType === "o" ? value : sType === "a" ? index : null;
-  const f = (arr) => arr[0];
-  const l = (arr) => arr[arr.length - 1];
-  const noop = () => sVal;
-  const prev = () => cycleRoll && sVal === f(sRange) ? l(sRange) : sVal - 1;
-  const next = () => cycleRoll && sVal === l(sRange) ? f(sRange) : sVal + 1;
-  sVal = dy > 0 ? prev() : dy < 0 ? next() : noop();
-  sVal = normalRange(sVal, ...sRange);
-  if (sType === "a") {
-    sVal = options[sVal][valueField];
-  }
-  if (sVal !== value) {
-    valuesCopy.splice(pos, 1, sVal);
-    api.init(valuesCopy);
-  }
-};
-const handleTouchstart = (state) => (e) => {
-  const { clientY } = e.changedTouches[0];
-  state.touching = true;
-  state.touchStartPos = state.touchPos = { clientY };
-  state.accrueDy = 0;
-};
-const handleTouchend = (state) => () => {
-  state.touching = false;
-  state.touchStartPos = state.touchPos = {};
-  state.accrueDy = 0;
-};
-const handleTouchmove = ({ api, props, state }) => (e, pos) => {
-  if (!state.touching)
-    return;
-  const { cycleRoll, valueField } = props;
-  const { touchPos, optionHeight } = state;
-  const { clientY } = e.changedTouches[0];
-  const dy = clientY - touchPos.clientY;
-  state.touchPos = { clientY };
-  state.accrueDy += dy;
-  const absDy = Math.abs(state.accrueDy);
-  const threshold = optionHeight / 4;
-  if (absDy > threshold) {
-    const selector = state[`selector${pos}`];
-    api.calcSelector(cycleRoll, state.accrueDy, pos, selector, valueField);
-    state.accrueDy = 0;
-  }
-};
-const watchActionSheetVisible = ({ emit, state, vm }) => (visible) => {
+import "../chunk-G2ADBYYC.js";
+const watchActionSheetVisible = ({ emit, api, props }) => (visible) => {
   emit("update:visible", visible);
   if (!visible)
     return;
-  setTimeout(() => {
-    const optionRef = vm.$el.querySelector('[data-tag="tiny-mobile-cs-option"]');
-    optionRef && (state.optionHeight = optionRef.offsetHeight);
-  });
+  api.setValue(props.modelValue);
 };
 const close = (state) => () => state.actionSheetVisible && (state.actionSheetVisible = false);
-const confirm = ({ api, emit, props, state, vm }) => () => {
-  const { confirmDisabled } = state;
-  if (confirmDisabled)
+const confirm = ({ api, emit, defaultValues, selectedOptions, isDisabled, vm }) => () => {
+  if (isDisabled.value)
     return;
-  const { modelValue } = props;
-  let focusOpts = vm.$el.querySelectorAll('[date-status="focus"]');
-  let values;
-  if (focusOpts && focusOpts.length) {
-    focusOpts = [...focusOpts];
-    values = focusOpts.map((focusOpt) => focusOpt.dataset.option);
-    values = api.parseType(values);
-  }
-  if (validArr(values) && validArr(modelValue) && values.length === modelValue.length && values.join() !== modelValue.join()) {
-    emit("update:modelValue", values);
+  let refs = vm.$refs.swipeRef;
+  let moving = false;
+  if (!Array.isArray(vm.$refs.swipeRef)) {
+    refs = [refs];
   }
-  api.close();
-};
-const styleOpt = (option) => option._$font;
-const statusOpt = (option) => option._$status;
-const computedConfirmDisabled = (state) => () => {
-  const { selectorCount, visibleOptionCount } = state;
-  const interOpts = Array.from({ length: selectorCount }).map((v, i) => {
-    const vOpts = state[`selector${i}`].visibleOptions;
-    return vOpts[rightShift(visibleOptionCount)];
+  defaultValues.value = refs.map((comp) => {
+    if (comp.state.moving) {
+      moving = true;
+    }
+    return comp.state.currentValue;
   });
-  return interOpts.some((opt) => opt.disabled);
+  if (moving)
+    return;
+  emit("confirm", {
+    selectedValue: defaultValues.value.slice(),
+    selectedOptions: selectedOptions.value.slice()
+  });
+  emit("update:modelValue", defaultValues.value.slice());
+  api.close();
 };
+const columnStyle = ({ props, computed }) => computed(() => {
+  return {
+    height: `${+props.visibleOptionNum * +props.optionHeight}px`,
+    "--lineHeight": `${+props.optionHeight}px`
+  };
+});
 export {
-  calcSelector,
   close,
-  computedConfirmDisabled,
+  columnStyle,
   confirm,
-  handleTouchend,
-  handleTouchmove,
-  handleTouchstart,
-  init,
-  parseType,
-  statusOpt,
-  styleOpt,
   watchActionSheetVisible
 };

package/cascader-select/usePicker.js

@@ -0,0 +1,251 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+const DEFAULT_FILED_NAMES = {
+  text: "label",
+  value: "id",
+  children: "children"
+};
+const createSourceData = ({ props, state, api }) => () => {
+  if (!api.validProps())
+    return;
+  const { options, valueField, textField, type } = props;
+  if (type === "cascade")
+    return options;
+  const values = api.parseType(state.defaultValues.slice());
+  const types = Array.from({ length: values.length });
+  const ranges = Array.from({ length: values.length });
+  const indices = Array.from({ length: values.length });
+  const visibleOptions = options.map((opt, i) => {
+    let slicedValues, existOption;
+    if (Array.isArray(opt)) {
+      if (opt.length === 0)
+        return [];
+      let index = opt.findIndex((item) => item[valueField] === values[i]);
+      index = index === -1 ? 0 : index;
+      types[i] = "a";
+      ranges[i] = [0, opt.length - 1];
+      indices[i] = index;
+      slicedValues = api.sliceValue(0, opt.length - 1);
+      existOption = (i2) => opt[i2];
+    } else if (opt && typeof opt === "object") {
+      let range;
+      if (Array.isArray(opt.range)) {
+        range = opt.range.slice(0, 2);
+      } else if (typeof opt.rangeMethod === "function") {
+        range = opt.rangeMethod(...values);
+        state.isOldCascadeType = true;
+      }
+      types[i] = "o";
+      ranges[i] = api.parseType(range);
+      slicedValues = api.sliceValue(ranges[i][0], ranges[i][1]);
+      existOption = (i2) => opt.optionMethod(i2, ...values);
+    }
+    if (!slicedValues || !existOption)
+      return [];
+    return slicedValues.map((slicedValue) => {
+      const option = slicedValue === null ? { [valueField]: null, [textField]: "" } : existOption(slicedValue);
+      return option;
+    });
+  });
+  return visibleOptions;
+};
+const changeHandler = ({ state, columnFieldNames, columnsType, api }) => (columnIndex, option) => {
+  const fields = columnFieldNames.value;
+  if (option && Object.keys(option).length) {
+    state.defaultValues = state.defaultValues ? state.defaultValues : [];
+    if (columnsType.value === "cascade") {
+      state.defaultValues[columnIndex] = option[fields.value] || "";
+      let index = columnIndex;
+      let cursor = option;
+      while (cursor && cursor[fields.children] && cursor[fields.children][0]) {
+        state.defaultValues[index + 1] = cursor[fields.children][0][fields.value];
+        index++;
+        cursor = cursor[fields.children][0];
+      }
+      if (cursor && cursor[fields.children] && cursor[fields.children].length === 0) {
+        state.defaultValues = state.defaultValues.slice(0, index + 1);
+      }
+    } else {
+      state.defaultValues[columnIndex] = Object.prototype.hasOwnProperty.call(option, fields.value) ? option[fields.value] : "";
+    }
+    api.change(columnIndex);
+  }
+};
+const formatCascade = ({ columnFieldNames }) => (columns, defaultValues) => {
+  const formatted = [];
+  const fields = columnFieldNames.value;
+  let cursor = {
+    text: "",
+    value: "",
+    [fields.children]: columns
+  };
+  let columnIndex = 0;
+  while (cursor && cursor[fields.children]) {
+    const options = cursor[fields.children];
+    const value = defaultValues[columnIndex];
+    let index = options.findIndex((columnItem) => columnItem[fields.value] === value);
+    if (index === -1)
+      index = 0;
+    cursor = cursor[fields.children][index];
+    columnIndex++;
+    formatted.push(options);
+  }
+  return formatted.slice();
+};
+const columnFieldNamesComputed = ({ props, computed }) => computed(() => {
+  return __spreadProps(__spreadValues({}, DEFAULT_FILED_NAMES), {
+    text: props.textField,
+    value: props.valueField,
+    children: props.childrenField
+  });
+});
+const defaultIndexes = ({ state, computed, columnFieldNames, columnsList }) => computed(() => {
+  const fields = columnFieldNames.value;
+  return columnsList.value.map((column, index) => {
+    const targetIndex = column.findIndex((item) => item[fields.value] === state.defaultValues[index]);
+    return targetIndex === -1 ? 0 : targetIndex;
+  });
+});
+const confirmDisabled = ({ props, state, columnsList }) => () => {
+  if (typeof props.disabled !== "function") {
+    return false;
+  }
+  state.isDisabled = columnsList.value.some((column, columnIndex) => {
+    return props.disabled(state.defaultValues[columnIndex], ...state.defaultValues);
+  });
+};
+const change = ({ api, state, columnFieldNames, columnsList }) => () => {
+  if (api.isSameValue(state.oldValues, state.defaultValues))
+    return;
+  state.oldValues = state.defaultValues.slice();
+  if (state.isOldCascadeType) {
+    state.formattedColumns = api.createSourceData();
+  }
+  api.getColumnsList();
+  api.confirmDisabled();
+  const fields = columnFieldNames.value;
+  state.selectedOptions = columnsList.value.map((column, index) => {
+    return column.find((item) => item[fields.value] === state.defaultValues[index]) || column[0];
+  });
+};
+const columnsTypeComputed = ({ state, computed, columnFieldNames }) => computed(() => {
+  const firstColumn = state.formattedColumns[0];
+  const fields = columnFieldNames.value;
+  if (firstColumn) {
+    if (Array.isArray(firstColumn)) {
+      return "multiple";
+    }
+    if (fields.children in firstColumn) {
+      return "cascade";
+    }
+  }
+  return "single";
+});
+const getColumnsList = ({ state, api, columnsType, columnsList }) => () => {
+  let result = [];
+  switch (columnsType.value) {
+    case "multiple":
+      result = state.formattedColumns;
+      break;
+    case "cascade":
+      result = api.formatCascade(state.formattedColumns, state.defaultValues ? state.defaultValues : []);
+      break;
+    default:
+      result = [state.formattedColumns];
+      break;
+  }
+  columnsList.value = result;
+};
+const setValue = ({ api, state }) => (value) => {
+  if (!api.isSameValue(value, state.defaultValues)) {
+    state.defaultValues = (value || []).slice();
+    api.change();
+  }
+};
+const isSameValue = (valA, valB) => JSON.stringify(valA) === JSON.stringify(valB);
+const sliceValue = (min, max) => {
+  const values = [min];
+  Array.from({ length: max - min }).map((v, i) => values.push(min + i + 1));
+  return values;
+};
+const validArr = (arr) => Array.isArray(arr) && arr.length;
+const validProps = ({ props }) => () => {
+  const { modelValue, options } = props;
+  return validArr(modelValue) && validArr(options) && modelValue.length === options.length;
+};
+const parseType = ({ props }) => (values) => {
+  const { valueType } = props;
+  return values.map(valueType === "number" ? Number : valueType === "string" ? String : (i) => i);
+};
+const init = ({ api, state }) => () => {
+  state.isInit = true;
+  state.formattedColumns = api.createSourceData();
+  api.getColumnsList();
+};
+const usePicker = (args) => {
+  const { ref, reactive, watch, computed, toRefs, props } = args;
+  const state = reactive({
+    formattedColumns: [],
+    defaultValues: [],
+    selectedOptions: [],
+    oldValues: [],
+    isOldCascadeType: false,
+    isDisabled: false,
+    isInit: false
+  });
+  const api = {};
+  const columnsList = ref([]);
+  const pickerColumn = ref([]);
+  const columnFieldNames = columnFieldNamesComputed({ props, computed });
+  const columnsType = columnsTypeComputed({ state, computed, columnFieldNames });
+  Object.assign(api, {
+    change: change({ api, state, columnFieldNames, columnsList }),
+    changeHandler: changeHandler({ state, columnFieldNames, columnsType, api }),
+    formatCascade: formatCascade({ columnFieldNames }),
+    setValue: setValue({ api, state }),
+    validProps: validProps({ props }),
+    parseType: parseType({ props }),
+    init: init({ api, state }),
+    isSameValue,
+    sliceValue,
+    getColumnsList: getColumnsList({ state, api, columnsType, columnsList }),
+    confirmDisabled: confirmDisabled({ props, state, columnsList }),
+    defaultIndexes: defaultIndexes({ state, computed, columnFieldNames, columnsList }),
+    createSourceData: createSourceData({ props, state, api })
+  });
+  initWatch({ props, api, state, watch });
+  return __spreadProps(__spreadValues({}, toRefs(state)), {
+    columnsType,
+    columnsList,
+    columnFieldNames,
+    changeHandler: api.changeHandler,
+    defaultIndexes: api.defaultIndexes,
+    pickerColumn,
+    isSameValue: api.isSameValue,
+    setValue: api.setValue
+  });
+};
+const initWatch = ({ props, api, state, watch }) => {
+  watch(
+    () => props.modelValue,
+    (newValues) => {
+      api.setValue(newValues);
+    },
+    { deep: true, immediate: true }
+  );
+  watch(
+    () => props.options,
+    () => props.visible && api.init(),
+    { deep: true, immediate: true }
+  );
+  watch(
+    () => props.visible,
+    () => props.visible && !state.isInit && api.init(),
+    { deep: true, immediate: true }
+  );
+};
+export {
+  usePicker
+};

package/cascader-select/useTouch.js

@@ -0,0 +1,65 @@
+import "../chunk-G2ADBYYC.js";
+const MIN_DISTANCE = 10;
+const getDirection = (x, y) => {
+  if (x > y && x > MIN_DISTANCE)
+    return "horizontal";
+  if (y > x && y > MIN_DISTANCE)
+    return "vertical";
+  return "";
+};
+function useTouch({ ref }) {
+  const startX = ref(0);
+  const startY = ref(0);
+  const moveX = ref(0);
+  const moveY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref("");
+  const isVertical = () => direction.value === "vertical";
+  const isHorizontal = () => direction.value === "horizontal";
+  const move = (event) => {
+    const touchEvent = event.touches[0];
+    deltaX.value = touchEvent.clientX - startX.value;
+    deltaY.value = touchEvent.clientY - startY.value;
+    moveY.value = touchEvent.clientY;
+    moveX.value = touchEvent.clientX;
+    offsetY.value = Math.abs(deltaY.value);
+    offsetX.value = Math.abs(deltaX.value);
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+  };
+  const reset = () => {
+    deltaX.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    deltaY.value = 0;
+    direction.value = "";
+  };
+  const start = (event) => {
+    reset();
+    startY.value = event.touches[0].clientY;
+    startX.value = event.touches[0].clientX;
+  };
+  return {
+    start,
+    move,
+    reset,
+    startY,
+    startX,
+    moveY,
+    moveX,
+    deltaY,
+    deltaX,
+    offsetY,
+    offsetX,
+    isVertical,
+    direction,
+    isHorizontal
+  };
+}
+export {
+  useTouch
+};

package/cascader-select/vue.js

@@ -1,67 +1,55 @@
 import "../chunk-G2ADBYYC.js";
-import {
-  init,
-  handleTouchstart,
-  handleTouchend,
-  handleTouchmove,
-  watchActionSheetVisible,
-  calcSelector,
-  close,
-  confirm,
-  styleOpt,
-  statusOpt,
-  computedConfirmDisabled,
-  parseType
-} from "./index";
-import throttle from "../common/deps/throttle";
+import { watchActionSheetVisible, close, confirm, columnStyle } from "./index";
+import { usePicker } from "./usePicker";
 const api = [
   "state",
-  "handleTouchstart",
-  "handleTouchend",
-  "throttledHandleTouchmove",
   "close",
   "confirm",
-  "styleOpt",
-  "statusOpt"
+  "columnsType",
+  "columnsList",
+  "columnFieldNames",
+  "changeHandler",
+  "defaultValues",
+  "isDisabled",
+  "selectedOptions",
+  "columnStyle"
 ];
-const renderless = (props, { reactive, computed, onBeforeMount, watch }, { emit, vm }) => {
+const renderless = (props, { reactive, computed, watch, ref, toRefs }, { emit, vm }) => {
   const state = reactive({
     actionSheetVisible: false,
-    visibleOptionCount: 5,
-    selectorCount: 1,
-    selector0: {},
-    selector1: {},
-    selector2: {},
-    confirmDisabled: computed(() => api2.computedConfirmDisabled())
+    visibleOptionNum: 5
   });
+  const {
+    changeHandler,
+    defaultValues,
+    columnsList,
+    columnsType,
+    columnFieldNames,
+    selectedOptions,
+    setValue,
+    isDisabled
+  } = usePicker({ ref, reactive, watch, computed, toRefs, props, emit });
   const api2 = {
-    state,
-    styleOpt,
-    statusOpt,
-    handleTouchstart: handleTouchstart(state),
-    handleTouchend: handleTouchend(state),
-    watchActionSheetVisible: watchActionSheetVisible({ emit, state, vm }),
-    close: close(state),
-    computedConfirmDisabled: computedConfirmDisabled(state),
-    parseType: parseType(props)
+    state
   };
   Object.assign(api2, {
-    init: init({ api: api2, props, state }),
-    throttledHandleTouchmove: throttle(20, handleTouchmove({ api: api2, props, state })),
-    calcSelector: calcSelector(api2),
-    confirm: confirm({ api: api2, emit, props, state, vm })
-  });
-  onBeforeMount(() => {
-    api2.init();
+    close: close(state),
+    confirm: confirm({ api: api2, emit, props, state, defaultValues, selectedOptions, isDisabled, vm }),
+    watchActionSheetVisible: watchActionSheetVisible({ emit, api: api2, props }),
+    columnsType,
+    columnsList,
+    columnFieldNames,
+    changeHandler,
+    defaultValues,
+    selectedOptions,
+    setValue,
+    isDisabled,
+    columnStyle: columnStyle({ props, computed })
   });
   watch(
     () => props.visible,
     (value) => state.actionSheetVisible = value
   );
-  watch(
-    () => props.modelValue,
-    (value) => api2.init(value)
-  );
   watch(
     () => state.actionSheetVisible,
     (value) => api2.watchActionSheetVisible(value)

package/cascader-view/index.js

@@ -62,7 +62,7 @@ const nodeExpand = ({ emit, state, props, api }) => (option) => {
       state.loading = false;
       option.loading = false;
       option.loaded = true;
-      nodes.map((data) => {
+      nodes.forEach((data) => {
         index = -1;
         state.store.append(data, option.data);
         waitLoadCheckList.some((item, i) => {

package/cell/vue.js

@@ -3,7 +3,8 @@ const api = ["state"];
 const renderless = (props, { reactive, computed, inject }, { parent }) => {
   parent.tinyForm = parent.tinyForm || inject("form", null);
   const state = reactive({
-    isDisplayOnly: computed(() => (parent.tinyForm || {}).displayOnly)
+    isDisplayOnly: computed(() => (parent.tinyForm || {}).displayOnly),
+    isDisabled: computed(() => props.disabled || (parent.tinyForm || {}).disabled)
   });
   const api2 = {
     state

package/chart-bar/index.js

@@ -30,8 +30,7 @@ const getBarDimAxis = (args) => {
     },
     show: axisVisible,
     axisTick: { show: true, alignWithLabel: true, lineStyle: { color: "#191919", opacity: 0.1, width: 2 } },
-    axisLine: { show: true, lineStyle: { color: "#191919", opacity: 0.1, width: 2 } },
-    axisPointer: { type: "shadow", z: 1, shadowStyle: { color: "#f5f5f5" } }
+    axisLine: { show: true, lineStyle: { color: "#191919", opacity: 0.1, width: 2 } }
   }));
 };
 const factoryFmt = ({ meaAxisType, i, digit }) => (val) => getFormated(val, meaAxisType[i], digit);
@@ -74,7 +73,7 @@ const getBarTooltip = (args) => {
     });
     return tplt.join("");
   };
-  return { trigger: "axis", formatter };
+  return { trigger: "axis", formatter, axisPointer: { type: "shadow", z: 1, shadowStyle: { color: "#f5f5f5" } } };
 };
 const getValueData = (seriesTemp, dims) => {
   const max = Math.max(...dims);