onesight-charts 1.4.2 → 1.4.4

package/lib/components/common-bar/index.js

@@ -55,37 +55,13 @@ function CommonBar(props) {
     }
   } = props;
   const [total, setTotal] = (0, import_react.useState)(0);
-  let chart = (0, import_react.useRef)(null);
+  const chart = (0, import_react.useRef)(null);
   const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
   const chartRef = (0, import_react.useRef)(null);
   const prevDepsRef = (0, import_react.useRef)(null);
   const tooltipClassNameRef = (0, import_react.useRef)(
     `onesight-chart-common-bar-tooltip-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
   );
-  (0, import_react.useEffect)(() => {
-    const currentDeps = JSON.stringify({ currentPage, data });
-    const prevDeps = prevDepsRef.current;
-    if (prevDeps !== null && currentDeps === prevDeps) {
-      return;
-    }
-    prevDepsRef.current = currentDeps;
-    let copyData = JSON.parse(JSON.stringify(data));
-    let splice_data = copyData.slice(
-      (currentPage - 1) * number,
-      currentPage * number
-    );
-    if (data.length) {
-      setTotal(Math.ceil(data.length / number));
-    }
-    init2(splice_data);
-    callbackGetPage(currentPage);
-    setTimeout(() => {
-      bindClickEvents();
-    }, 0);
-    return () => {
-      unbindClickEvents();
-    };
-  }, [currentPage, data, bindClickEvents, unbindClickEvents]);
   const paginationCb = (currData, page) => {
     setCurrentPage(page);
   };
@@ -94,15 +70,13 @@ function CommonBar(props) {
       const tooltipElement = event.target.closest(
         `.${tooltipClassNameRef.current}`
       );
-      if (!tooltipElement) {
+      if (!tooltipElement)
         return;
-      }
       const seriesNameElement = event.target.closest(".item");
       if (seriesNameElement) {
         const seriesItem = seriesNameElement.getAttribute("data-series-item");
-        if (!seriesItem) {
+        if (!seriesItem)
           return;
-        }
         const seriesData = JSON.parse(seriesItem);
         handleClick && handleClick("tooltipType", seriesData);
       }
@@ -121,6 +95,35 @@ function CommonBar(props) {
       chartElement.removeEventListener("click", onChartClick);
     }
   }, [onChartClick]);
+  (0, import_react.useEffect)(() => {
+    const currentDeps = JSON.stringify({ currentPage, data });
+    const prevDeps = prevDepsRef.current;
+    if (prevDeps !== null && currentDeps === prevDeps)
+      return;
+    prevDepsRef.current = currentDeps;
+    const copyData = JSON.parse(JSON.stringify(data));
+    const splice_data = copyData.slice(
+      (currentPage - 1) * number,
+      currentPage * number
+    );
+    if (data.length)
+      setTotal(Math.ceil(data.length / number));
+    init2(splice_data);
+    callbackGetPage(currentPage);
+    setTimeout(() => {
+      bindClickEvents();
+    }, 0);
+    return () => {
+      unbindClickEvents();
+    };
+  }, [
+    currentPage,
+    data,
+    bindClickEvents,
+    unbindClickEvents,
+    number,
+    callbackGetPage
+  ]);
   function toggleAxisPointer(myChart, show) {
     myChart.setOption({
       tooltip: {
@@ -136,35 +139,30 @@ function CommonBar(props) {
     return String(jsonString).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
   const calculateWidth = (len) => {
-    if (len === 1 || len === 2 || len === 3) {
+    if (len === 1 || len === 2 || len === 3)
       return 42;
-    } else if (len === 4) {
+    if (len === 4)
       return 40;
-    } else if (len === 5) {
+    if (len === 5)
       return 32;
-    } else if (len === 6) {
+    if (len === 6)
       return 26;
-    } else if (len === 7) {
+    if (len === 7)
       return 24;
-    } else if (len === 8) {
+    if (len === 8)
       return 20;
-    } else if (len === 9) {
+    if (len === 9)
       return 18;
-    } else if (len === 10) {
+    if (len === 10)
       return 16;
-    }
+    return 16;
   };
   function setBarData(myChart, newData) {
     if (!myChart)
       return;
     myChart.setOption(
       {
-        series: [
-          // 背景柱（seriesIndex 0）保持不变
-          {},
-          // 前景柱（seriesIndex 1）换成新数组
-          { data: newData }
-        ]
+        series: [{}, { data: newData }]
       },
       false
     );
@@ -180,14 +178,10 @@ function CommonBar(props) {
         fontWeight: 500,
         lineHeight: 20,
         align: "right",
-        // 文本宽度 = 总宽 - 图标宽度 - 间距
-        // width: Math.max(0, maxLabelWidth - ICON_SIZE - ICON_GAP),
         overflow: "truncate",
         ellipsis: "...",
-        // 如果没有任何图标，则不需要左边距
         padding: hasAnyIcon ? [0, 0, 0, ICON_GAP] : [0, 0, 0, 0]
       },
-      // 为没有图标的项目创建一个空的样式
       noIcon: {
         width: 0,
         height: 0
@@ -200,15 +194,10 @@ function CommonBar(props) {
           height: ICON_SIZE,
           align: "right",
           borderRadius: 4,
-          // 这里用图片作为文本块的背景
           backgroundColor: { image: row.platformIcon }
-          // 建议传绝对路径或 public 下的路径
         };
       } else {
-        rich[`icon${i}`] = {
-          width: 0,
-          height: 0
-        };
+        rich[`icon${i}`] = { width: 0, height: 0 };
       }
     });
     return rich;
@@ -221,9 +210,8 @@ function CommonBar(props) {
     if (!labelText)
       return "";
     const fullRect = echarts.format.getTextRect(labelText, font);
-    if (fullRect.width <= maxWidthPx) {
+    if (fullRect.width <= maxWidthPx)
       return labelText;
-    }
     const DOT = "...";
     const dotW = echarts.format.getTextRect(DOT, font).width;
     let prefixLen = 1;
@@ -239,17 +227,26 @@ function CommonBar(props) {
         best = candidate;
         bestW = w;
         prefixLen++;
-        if (prefixLen % 2 === 0) {
+        if (prefixLen % 2 === 0)
           suffixLen++;
-        }
       } else {
         break;
       }
     }
     return best;
   }
+  function getGridPlotWidth(myChart) {
+    var _a, _b, _c, _d;
+    try {
+      const grid = (_b = (_a = myChart.getModel()) == null ? void 0 : _a.getComponent) == null ? void 0 : _b.call(_a, "grid");
+      const rect = (_d = (_c = grid == null ? void 0 : grid.coordinateSystem) == null ? void 0 : _c.getRect) == null ? void 0 : _d.call(_c);
+      if (rect == null ? void 0 : rect.width)
+        return rect.width;
+    } catch (e) {
+    }
+    return myChart.getWidth();
+  }
   const init2 = (currentData) => {
-    var _a;
     let myChart = null;
     const myDom = chartRef.current;
     myChart = echarts.getInstanceByDom(myDom);
@@ -257,143 +254,154 @@ function CommonBar(props) {
     if (!myChart) {
       myChart = echarts.init(myDom, null, { renderer: "svg" });
     }
+    myChart.off("showTip");
+    myChart.off("hideTip");
+    myChart.off("finished");
+    myChart.getZr().off("click");
     let fadedData = null;
     let lastIndex = null;
     const axisData = currentData.map((item) => item.format || item.name || "-");
-    let seriesData = currentData.map((item) => {
+    const yIconFlag = currentData == null ? void 0 : currentData.some((d) => d == null ? void 0 : d.platformIcon);
+    const valueAccessor = (item) => showProportion ? (item == null ? void 0 : item.proportion) || 0 : item.value || 0;
+    const rawVals = currentData.map(valueAccessor);
+    const rawMax = Math.max(0, ...rawVals);
+    const rawMin = Math.min(0, ...rawVals);
+    const FONT = "14px sans-serif";
+    const formatLabel = (v) => showProportion ? (0, import_chartUtils.computeFloat)(v) : (0, import_chartUtils.numberFormatNull)(v);
+    const rightLabelText = rawMax > 0 ? formatLabel(rawMax) : "";
+    const rightLabelW = rightLabelText ? echarts.format.getTextRect(rightLabelText, FONT).width : 0;
+    const leftLabelText = rawMin < 0 ? formatLabel(rawMin) : "";
+    const leftLabelW = leftLabelText ? echarts.format.getTextRect(leftLabelText, FONT).width : 0;
+    const LABEL_DISTANCE = 5;
+    const SAFE_PX = 24;
+    const rightSpacePx = rawMax > 0 ? rightLabelW + LABEL_DISTANCE + SAFE_PX : 0;
+    const leftSpacePx = rawMin < 0 ? leftLabelW + LABEL_DISTANCE + SAFE_PX : 0;
+    const baseOption = {
+      tooltip: { show: false },
+      animation: false,
+      legend: { show: false },
+      grid: {
+        top: 0,
+        bottom: 0,
+        left: 12,
+        right: 0,
+        containLabel: true
+      },
+      xAxis: {
+        type: "value",
+        min: rawMin,
+        max: rawMax,
+        show: false,
+        axisLine: { show: false },
+        axisLabel: { show: false },
+        splitLine: { show: false },
+        boundaryGap: false
+      },
+      yAxis: {
+        type: "category",
+        inverse: true,
+        axisLabel: {
+          margin: rawMin < 0 ? 40 : 10,
+          color: "#273333",
+          fontSize: 14,
+          fontWeight: 500,
+          lineHeight: 20,
+          show: true,
+          interval: 0,
+          rotate: 0,
+          overflow: "truncate",
+          ellipsis: "...",
+          formatter: function(value, index) {
+            var _a;
+            const rowHasIcon = !!(yIconFlag && ((_a = currentData[index]) == null ? void 0 : _a.platformIcon));
+            const maxPx = getMaxTextWidthForRow(rowHasIcon);
+            const finalText = middleEllipsis(value, maxPx, FONT);
+            if (yIconFlag)
+              return `{icon${index}|} {label|${finalText}}`;
+            return finalText;
+          }
+        },
+        axisTick: { show: false },
+        axisLine: { show: false },
+        splitLine: { show: false },
+        data: axisData
+      },
+      series: [
+        {
+          type: "bar",
+          data: rawVals
+        }
+      ]
+    };
+    if (yIconFlag) {
+      baseOption.yAxis.axisLabel.rich = makeYAxisRich(currentData);
+    }
+    myChart.setOption(baseOption, true);
+    const plotW = Math.max(1, getGridPlotWidth(myChart));
+    const calcAxisRange = (baseMin2, baseMax2) => {
+      const rL = Math.min(0.45, Math.max(0, leftSpacePx / plotW));
+      const rR = Math.min(0.45, Math.max(0, rightSpacePx / plotW));
+      const denom = Math.max(0.1, 1 - rL - rR);
+      let baseSpan = baseMax2 - baseMin2;
+      if (!isFinite(baseSpan) || baseSpan === 0)
+        baseSpan = 1;
+      const span = baseSpan / denom;
+      const xMin = baseMin2 - rL * span;
+      const xMax = baseMax2 + rR * span;
+      return { xMin, xMax, span };
+    };
+    const MIN_BAR_PX = 4;
+    const minVisibleAbsFloor = showProportion ? 0 : 1;
+    let baseMin = rawMin;
+    let baseMax = rawMax;
+    let axis = calcAxisRange(baseMin, baseMax);
+    let minVisibleValue = axis.span * (MIN_BAR_PX / plotW) || minVisibleAbsFloor;
+    minVisibleValue = Math.max(minVisibleValue, minVisibleAbsFloor);
+    const hasPos = rawMax > 0;
+    const hasNeg = rawMin < 0;
+    const effectiveMax = hasPos ? Math.max(rawMax, minVisibleValue) : 0;
+    const effectiveMin = hasNeg ? Math.min(rawMin, -minVisibleValue) : 0;
+    if (effectiveMax !== baseMax || effectiveMin !== baseMin) {
+      baseMax = effectiveMax;
+      baseMin = effectiveMin;
+      axis = calcAxisRange(baseMin, baseMax);
+      minVisibleValue = axis.span * (MIN_BAR_PX / plotW) || minVisibleAbsFloor;
+      minVisibleValue = Math.max(minVisibleValue, minVisibleAbsFloor);
+    }
+    const xAxisMin = axis.xMin;
+    const xAxisMax = axis.xMax;
+    const seriesData = currentData.map((item) => {
       const itemColor = item.color || barColor;
-      if (showProportion) {
-        return {
-          name: item.name || "-",
-          value: (item == null ? void 0 : item.proportion) || 0,
-          label: {
-            // 负数就把文字放左边，正数/0 放右边
-            position: (item == null ? void 0 : item.proportion) < 0 ? "left" : "right"
-          },
-          itemStyle: (item == null ? void 0 : item.proportion) ? { color: itemColor } : { color: "rgba(29, 169, 160, 0)" }
-        };
-      } else {
-        return {
-          name: item.name || "-",
-          value: item.value || 0,
-          label: {
-            // 负数就把文字放左边，正数/0 放右边
-            position: item.value < 0 ? "left" : "right"
-          },
-          itemStyle: item.value ? { color: itemColor } : { color: "rgba(29, 169, 160, 0)" }
-        };
-      }
+      const raw = valueAccessor(item);
+      const displayValue = raw === 0 ? 0 : Math.sign(raw) * Math.max(Math.abs(raw), minVisibleValue);
+      return {
+        name: item.name || "-",
+        rawValue: raw,
+        value: displayValue,
+        label: { position: raw < 0 ? "left" : "right" },
+        itemStyle: raw ? { color: itemColor } : { color: "rgba(29, 169, 160, 0)" }
+      };
     });
     const originalData = seriesData.map((d) => ({
       ...d,
       itemStyle: { ...d.itemStyle || {}, opacity: 1 }
     }));
-    let maxDataValue = Math.max(
-      ...currentData.map(
-        (item) => showProportion ? item == null ? void 0 : item.proportion : item.value
-      )
-    );
-    const ySample = axisData.reduce(
-      (a, b) => a.length > b.length ? a : b,
-      ""
-    );
-    const yLabelWidth = echarts.format.getTextRect(
-      ySample,
-      "14px sans-serif"
-    ).width;
-    const axisLabelGap = 10;
-    const chartWidth = myChart.getWidth();
-    const leftPadding = 12;
-    const rightPadding = 0;
-    const gridWidth = chartWidth - leftPadding - rightPadding;
-    const dealYLabelWidth = yLabelWidth > 188 ? 188 : yLabelWidth;
-    const barAreaWidth = gridWidth - dealYLabelWidth - axisLabelGap;
-    const sampleText = showProportion ? (0, import_chartUtils.computeFloat)(maxDataValue) : (0, import_chartUtils.numberFormatNull)(maxDataValue);
-    const labelWidth = echarts.format.getTextRect(
-      sampleText,
-      "14px sans-serif"
-    ).width;
-    const extra = 15;
-    const yIconFlag = (_a = data[0]) == null ? void 0 : _a.platformIcon;
-    const valueAccessor = (item) => showProportion ? (item == null ? void 0 : item.proportion) || 0 : item.value || 0;
-    const minDataValue = Math.min(...currentData.map(valueAccessor));
-    const hasNegative = minDataValue < 0;
-    const allNegative = maxDataValue < 0;
-    let bgValue;
-    if (allNegative) {
-      bgValue = 0;
-    } else if (barAreaWidth > labelWidth + extra) {
-      bgValue = maxDataValue * barAreaWidth / (barAreaWidth - labelWidth - extra);
-    } else {
-      const overflowPx = labelWidth + extra - barAreaWidth;
-      const unitPerPx = maxDataValue / barAreaWidth;
-      bgValue = maxDataValue + overflowPx * unitPerPx;
-    }
-    let minBgValue = 0;
-    if (hasNegative) {
-      const absMinDataValue = Math.abs(minDataValue);
-      const absMaxDataValue = Math.abs(maxDataValue);
-      const minLabelSample = showProportion ? (0, import_chartUtils.computeFloat)(absMinDataValue) : (0, import_chartUtils.numberFormatNull)(absMinDataValue);
-      const minLabelWidth = echarts.format.getTextRect(
-        minLabelSample,
-        "14px sans-serif"
-      ).width;
-      const minExtra = 15;
-      const totalDataRange = absMinDataValue + absMaxDataValue;
-      let negativeBarAreaWidth;
-      if (allNegative) {
-        negativeBarAreaWidth = barAreaWidth;
-      } else if (totalDataRange > 0) {
-        if (absMinDataValue < absMaxDataValue * 0.3) {
-          negativeBarAreaWidth = Math.min(
-            minLabelWidth + minExtra + 30,
-            barAreaWidth * 0.25
-          );
-        } else {
-          const ratio = absMinDataValue / totalDataRange;
-          negativeBarAreaWidth = barAreaWidth * ratio;
-          negativeBarAreaWidth = Math.max(
-            negativeBarAreaWidth,
-            minLabelWidth + minExtra + 20
-          );
-        }
-      } else {
-        negativeBarAreaWidth = barAreaWidth * 0.5;
-      }
-      const availableBarWidth = Math.max(
-        1,
-        negativeBarAreaWidth - minLabelWidth - minExtra
-      );
-      const dataPerPixel = absMinDataValue / availableBarWidth;
-      const labelSpaceInData = (minLabelWidth + minExtra) * dataPerPixel;
-      minBgValue = -(absMinDataValue + labelSpaceInData);
-      if (maxDataValue > 0 && !allNegative) {
-        const positiveBarAreaWidth = barAreaWidth - negativeBarAreaWidth;
-        if (positiveBarAreaWidth > labelWidth + extra) {
-          bgValue = maxDataValue * positiveBarAreaWidth / (positiveBarAreaWidth - labelWidth - extra);
-        } else {
-          const overflowPx = labelWidth + extra - positiveBarAreaWidth;
-          const unitPerPx = maxDataValue / Math.max(positiveBarAreaWidth, 1);
-          bgValue = maxDataValue + overflowPx * unitPerPx;
-        }
-      }
-    }
-    let option = {
+    const option = {
       tooltip: {
         className: `onesight-chart-common-bar-tooltip ${tooltipClassNameRef.current}`,
         trigger: "axis",
         enterable: true,
+        padding: 0,
         // showContent: true,
         // alwaysShowContent: true,
         // hideDelay: 1000000000,
-        padding: 0,
         position: (point, params, dom) => {
           const tooltipHeight = (dom == null ? void 0 : dom.offsetHeight) || 0;
           const currentHeight = myDom.offsetHeight;
-          let len = axisData.length > 10 ? 10 : axisData.length;
+          const len = axisData.length > 10 ? 10 : axisData.length;
           let yValue = 0;
           if (tooltipHeight) {
-            let dataIndex = params[0].dataIndex;
+            const dataIndex = params[0].dataIndex;
             yValue = currentHeight / len * dataIndex - tooltipHeight - 12;
           }
           return [290 - (278 + 2) / 2, yValue];
@@ -401,89 +409,76 @@ function CommonBar(props) {
         axisPointer: {
           type: "shadow",
           z: 1,
-          shadowStyle: {
-            color: "rgba(243,244,244,1)"
-          },
+          shadowStyle: { color: "rgba(243,244,244,1)" },
           clickable: true
         },
         formatter: (res) => {
-          var _a2, _b;
-          if (!res.some((i) => i.value !== void 0 && i.value !== null)) {
+          var _a, _b;
+          if (!res.some((i) => i.value !== void 0 && i.value !== null))
             return "";
-          }
-          let dataArr = [res[1]];
-          let currentColor = ((_a2 = res[1]) == null ? void 0 : _a2.color) || "#1DA9A0";
-          let triangleWidth = 280;
+          const dataArr = [res[1]];
+          const currentColor = ((_a = res[1]) == null ? void 0 : _a.color) || "#1DA9A0";
+          const triangleWidth = 280;
           const dataIndex = (_b = res[1]) == null ? void 0 : _b.dataIndex;
           const originalItem = currentData[dataIndex];
           return `<div class='onesight-chart-common-bar-tooltip-box' style="width:278px;position: relative;">
-                        ${isTooltipTitleShow ? `<div class="tooltip-head">
-                              ${res[0].format || res[0].name}
-                            </div>` : ""}
-                        <div class='tooltip-body'>
-                        ${dataArr.map((item) => {
+                    ${isTooltipTitleShow ? `<div class="tooltip-head">${res[0].format || res[0].name}</div>` : ""}
+                    ${(originalItem == null ? void 0 : originalItem.currentTime) ? `<div class="tooltip-time">${originalItem == null ? void 0 : originalItem.currentTime}</div>` : ""}
+                    <div class='tooltip-body'>
+                    ${dataArr.map((item) => {
+            var _a2;
+            const raw = ((_a2 = item == null ? void 0 : item.data) == null ? void 0 : _a2.rawValue) !== void 0 ? item.data.rawValue : item.value;
             const itemWithAlias = {
               ...item,
               alias: originalItem == null ? void 0 : originalItem.alias,
               alias2: originalItem == null ? void 0 : originalItem.alias2,
-              aliasArray: originalItem == null ? void 0 : originalItem.aliasArray
+              aliasArray: originalItem == null ? void 0 : originalItem.aliasArray,
+              rawValue: raw
             };
             const escapedJson = escapeHtmlAttribute(
               JSON.stringify(itemWithAlias)
             );
             return `<div class='item' data-series-item="${escapedJson}" key='${item.seriesName}'>
-                                <div class='l'>
-                                        <span style="display:inline-block;width: 14px;vertical-align: middle;height: 14px;background-color:${currentColor};border-radius: 4px;margin-bottom: 2px;margin-right:6px"></span>
-                                        <span>${tooltipItemName ? res[0].format || res[0].name : tipName}
-                                        </span>
-                                </div>
-                                <div class='r' style="padding-left:6px;">
-                                <span class='num'>
-                                    ${showProportion ? (0, import_chartUtils.computeFloat)(item.value) : (0, import_chartUtils.changeDataTypeEn)(item.value)}
-                                </span>
-                                </div>
-                            </div>`;
+                                  <div class='l'>
+                                    <span style="display:inline-block;width: 14px;vertical-align: middle;height: 14px;background-color:${currentColor};border-radius: 4px;margin-bottom: 2px;margin-right:6px"></span>
+                                    <span>${tooltipItemName ? res[0].format || res[0].name : tipName}</span>
+                                  </div>
+                                  <div class='r' style="padding-left:6px;">
+                                    <span class='num'>${showProportion ? (0, import_chartUtils.computeFloat)(raw) : (0, import_chartUtils.changeDataTypeEn)(raw)}</span>
+                                  </div>
+                                </div>`;
           }).join("")}
-                        </div>
-                        <div class='triangle-down' style='width:${triangleWidth}px'></div>
-                    </div>`;
+                    </div>
+                    <div class='triangle-down' style='width:${triangleWidth}px'></div>
+                  </div>`;
         }
       },
       animation: true,
       animationEasing: "cubicInOut",
       animationEasingUpdate: "cubicInOut",
-      legend: {
-        show: false
-      },
+      legend: { show: false },
       grid: {
         top: 0,
-        // bottom: 30,
         bottom: 0,
         left: 12,
-        right: hasNegative ? 30 : 0,
+        right: 0,
         containLabel: true
       },
       xAxis: {
         type: "value",
-        max: bgValue,
-        min: hasNegative ? minBgValue : void 0,
+        min: xAxisMin,
+        max: xAxisMax,
         show: false,
-        axisLine: {
-          show: false
-        },
-        axisLabel: {
-          show: false
-        },
-        splitLine: {
-          show: false
-        },
+        axisLine: { show: false },
+        axisLabel: { show: false },
+        splitLine: { show: false },
         boundaryGap: false
       },
       yAxis: {
         type: "category",
         inverse: true,
         axisLabel: {
-          margin: hasNegative ? 40 : 10,
+          margin: rawMin < 0 ? 40 : 10,
           color: "#273333",
           fontSize: 14,
           fontWeight: 500,
@@ -491,110 +486,69 @@ function CommonBar(props) {
           show: true,
           interval: 0,
           rotate: 0,
-          // width: 188,
           overflow: "truncate",
           ellipsis: "...",
-          // formatter: function (value, index) {
-          //   // 检查当前项是否有 platformIcon
-          //   if (yIconFlag) {
-          //     return `{icon${index}|} {label|${value}}`;
-          //   } else {
-          //     return value;
-          //   }
-          // },
           formatter: function(value, index) {
-            var _a2;
-            const rowHasIcon = !!(yIconFlag && ((_a2 = currentData[index]) == null ? void 0 : _a2.platformIcon));
+            var _a;
+            const rowHasIcon = !!(yIconFlag && ((_a = currentData[index]) == null ? void 0 : _a.platformIcon));
             const maxPx = getMaxTextWidthForRow(rowHasIcon);
-            const finalText = middleEllipsis(
-              value,
-              maxPx,
-              "14px sans-serif"
-              // 跟 axisLabel 字体保持一致
-            );
-            if (yIconFlag) {
+            const finalText = middleEllipsis(value, maxPx, FONT);
+            if (yIconFlag)
               return `{icon${index}|} {label|${finalText}}`;
-            } else {
-              return finalText;
-            }
+            return finalText;
           }
         },
-        axisTick: {
-          show: false
-        },
-        axisLine: {
-          show: false
-        },
-        splitLine: {
-          show: false
-        },
+        axisTick: { show: false },
+        axisLine: { show: false },
+        splitLine: { show: false },
         data: axisData
       },
       series: [
         {
-          // === 背景柱系列 ===
-          // 需要背景柱的原因是让柱状条加上后面的数字标签的和不超过悬浮上去的阴影的长度
           name: "背景条",
           type: "bar",
-          // 让它在最底层
           z: 1,
-          // 不需要点击/hover 交互
           silent: true,
-          // 让柱子和后面的柱子重叠在同一个类目位置
           barGap: "-100%",
-          emphasis: {
-            disabled: true
-          },
-          // 柱子的样式
-          itemStyle: {
-            color: "rgba(0, 0, 0, 0)"
-            // 背景色可自定义
-          },
-          // 这里的 data 根据正负数使用不同的背景值
+          emphasis: { disabled: true },
+          itemStyle: { color: "rgba(0, 0, 0, 0)" },
           data: currentData.map((item) => {
-            const value = valueAccessor(item);
-            return value < 0 ? minBgValue : bgValue;
+            const v = valueAccessor(item);
+            return v < 0 ? xAxisMin : xAxisMax;
           }),
-          // 根据你需要的柱宽
-          // barMaxWidth: 42,
-          // barMinWidth: 16,
           barWidth: calculateWidth(seriesData.length),
           barMinHeight: 4,
+          barMinWidth: 4,
           cursor: "pointer",
           animation: false,
-          showBackground: false
-          // 这层本身不再需要 showBackground
+          showBackground: false,
+          clip: true
         },
         {
           type: "bar",
-          // showBackground: true,
+          clip: false,
+          // ✅ 关键：label 即使贴边也不要被裁剪
           label: {
             show: true,
-            // position: 'right',
             fontWeight: 400,
             fontSize: 14,
             color: "#515E5F",
-            distance: 5,
+            distance: LABEL_DISTANCE,
             formatter: (params) => {
-              if (showProportion) {
-                return (0, import_chartUtils.computeFloat)(params.value);
-              } else {
-                return (0, import_chartUtils.numberFormatNull)(params.value);
-              }
+              var _a;
+              const raw = ((_a = params == null ? void 0 : params.data) == null ? void 0 : _a.rawValue) ?? params.value;
+              return showProportion ? (0, import_chartUtils.computeFloat)(raw) : (0, import_chartUtils.numberFormatNull)(raw);
             }
           },
-          emphasis: {
-            disabled: true
-          },
+          emphasis: { disabled: true },
           itemStyle: {
             borderColor: "rgba(0,0,0,0)",
             borderWidth: 0,
             borderType: "solid"
           },
-          // barMaxWidth: 42,
-          // barMinWidth: 16,
           barWidth: calculateWidth(seriesData.length),
           barMinHeight: 4,
+          barMinWidth: 4,
           cursor: "pointer",
           animation: false,
           data: seriesData
@@ -605,8 +559,8 @@ function CommonBar(props) {
       option.yAxis.axisLabel.rich = makeYAxisRich(currentData);
     }
     myChart.getZr().on("click", function(params) {
-      let pointInPixel = [params.offsetX, params.offsetY];
-      let dataCoord = myChart.convertFromPixel(
+      const pointInPixel = [params.offsetX, params.offsetY];
+      const dataCoord = myChart.convertFromPixel(
         { seriesIndex: 0 },
         pointInPixel
       );
@@ -658,14 +612,11 @@ function CommonBar(props) {
       toggleAxisPointer(myChart, false);
       lastIndex = null;
     });
-    myChart.off("finished");
     myChart.on("finished", () => {
       (0, import_chartUtils.dealBarPath)(myDom, true);
     });
     myChart.setOption(option, true);
-    const element = document.querySelector(
-      `.${tooltipClassNameRef.current}`
-    );
+    const element = document.querySelector(`.${tooltipClassNameRef.current}`);
     if (element) {
       element.addEventListener("mouseleave", function(event) {
         if (event && element.offsetHeight && event.offsetY < element.offsetHeight - 2) {