onesight-charts 1.4.2 → 1.4.4

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

@@ -1,13 +1,13 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -15,7 +15,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import * as echarts from 'echarts';
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { changeDataTypeEn, computeFloat, dealBarPath, numberFormatNull } from "../../utils/chartUtils";
 import Pagination from "../pagination";
 import "./style.scss";
@@ -43,67 +43,28 @@ function CommonBar(props) {
     callbackGetPage = _props$callbackGetPag === void 0 ? function () {} : _props$callbackGetPag,
     _props$handleClick = props.handleClick,
     handleClick = _props$handleClick === void 0 ? function () {} : _props$handleClick;
-  // 总数页码数
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     total = _useState2[0],
     setTotal = _useState2[1];
   var chart = useRef(null);
-  // 当前页下标
   var _useState3 = useState(1),
     _useState4 = _slicedToArray(_useState3, 2),
     currentPage = _useState4[0],
     setCurrentPage = _useState4[1];
   var chartRef = useRef(null);
-  // 存储上一次的依赖项值，用于深度比较
   var prevDepsRef = useRef(null);
-  // 为每个组件实例生成唯一的 tooltip 类名，避免多实例冲突
   var tooltipClassNameRef = useRef("onesight-chart-common-bar-tooltip-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9)));
-  useEffect(function () {
-    // 深度比较依赖项，只有当内容真正改变时才执行
-    var currentDeps = JSON.stringify({
-      currentPage: currentPage,
-      data: data
-    });
-    var prevDeps = prevDepsRef.current;
-
-    // 如果内容没有改变，不执行
-    if (prevDeps !== null && currentDeps === prevDeps) {
-      return;
-    }
-
-    // 更新存储的值
-    prevDepsRef.current = currentDeps;
-    var copyData = JSON.parse(JSON.stringify(data));
-    var splice_data = copyData.slice((currentPage - 1) * number, currentPage * number);
-    if (data.length) {
-      setTotal(Math.ceil(data.length / number));
-    }
-    init(splice_data);
-    callbackGetPage(currentPage);
-    // 使用 setTimeout 确保 DOM 已经更新后再绑定事件
-    setTimeout(function () {
-      bindClickEvents();
-    }, 0);
-    return function () {
-      unbindClickEvents();
-    };
-  }, [currentPage, data, bindClickEvents, unbindClickEvents]);
   var paginationCb = function paginationCb(currData, page) {
     setCurrentPage(page);
   };
   var onChartClick = useCallback(function (event) {
-    // 确保只处理当前组件实例的 tooltip
     var tooltipElement = event.target.closest(".".concat(tooltipClassNameRef.current));
-    if (!tooltipElement) {
-      return;
-    }
+    if (!tooltipElement) return;
     var seriesNameElement = event.target.closest('.item');
     if (seriesNameElement) {
       var seriesItem = seriesNameElement.getAttribute('data-series-item');
-      if (!seriesItem) {
-        return;
-      }
+      if (!seriesItem) return;
       var seriesData = JSON.parse(seriesItem);
       handleClick && handleClick('tooltipType', seriesData);
     }
@@ -120,6 +81,26 @@ function CommonBar(props) {
       chartElement.removeEventListener('click', onChartClick);
     }
   }, [onChartClick]);
+  useEffect(function () {
+    var currentDeps = JSON.stringify({
+      currentPage: currentPage,
+      data: data
+    });
+    var prevDeps = prevDepsRef.current;
+    if (prevDeps !== null && currentDeps === prevDeps) return;
+    prevDepsRef.current = currentDeps;
+    var copyData = JSON.parse(JSON.stringify(data));
+    var splice_data = copyData.slice((currentPage - 1) * number, currentPage * number);
+    if (data.length) setTotal(Math.ceil(data.length / number));
+    init(splice_data);
+    callbackGetPage(currentPage);
+    setTimeout(function () {
+      bindClickEvents();
+    }, 0);
+    return function () {
+      unbindClickEvents();
+    };
+  }, [currentPage, data, bindClickEvents, unbindClickEvents, number, callbackGetPage]);
   function toggleAxisPointer(myChart, show) {
     myChart.setOption({
       tooltip: {
@@ -131,49 +112,32 @@ function CommonBar(props) {
       }
     });
   }
-
-  // 将 JSON 字符串转义为安全的 HTML 属性值
   function escapeHtmlAttribute(jsonString) {
     return String(jsonString).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   }
   var calculateWidth = function calculateWidth(len) {
-    if (len === 1 || len === 2 || len === 3) {
-      return 42;
-    } else if (len === 4) {
-      return 40;
-    } else if (len === 5) {
-      return 32;
-    } else if (len === 6) {
-      return 26;
-    } else if (len === 7) {
-      return 24;
-    } else if (len === 8) {
-      return 20;
-    } else if (len === 9) {
-      return 18;
-    } else if (len === 10) {
-      return 16;
-    }
+    if (len === 1 || len === 2 || len === 3) return 42;
+    if (len === 4) return 40;
+    if (len === 5) return 32;
+    if (len === 6) return 26;
+    if (len === 7) return 24;
+    if (len === 8) return 20;
+    if (len === 9) return 18;
+    if (len === 10) return 16;
+    return 16;
   };
   function setBarData(myChart, newData) {
     if (!myChart) return;
     myChart.setOption({
-      series: [
-      // 背景柱（seriesIndex 0）保持不变
-      {},
-      // 前景柱（seriesIndex 1）换成新数组
-      {
+      series: [{}, {
         data: newData
       }]
-    }, false); // 第二个参数 false → 不合并全量 option
+    }, false);
   }
   var ICON_SIZE = 18;
   var ICON_GAP = 0;
-
-  // 生成 y 轴富文本样式：为每一行创建 iconN，并且给 label 做截断
   function makeYAxisRich(rows) {
     var maxLabelWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 188;
-    // 检查是否有任何行包含 platformIcon
     var hasAnyIcon = rows.some(function (row) {
       return row.platformIcon;
     });
@@ -184,14 +148,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
@@ -204,13 +164,11 @@ function CommonBar(props) {
           height: ICON_SIZE,
           align: 'right',
           borderRadius: 4,
-          // 这里用图片作为文本块的背景
           backgroundColor: {
             image: row.platformIcon
-          } // 建议传绝对路径或 public 下的路径
+          }
         };
       } else {
-        // 为没有图标的项目创建空样式
         rich["icon".concat(i)] = {
           width: 0,
           height: 0
@@ -219,36 +177,20 @@ function CommonBar(props) {
     });
     return rich;
   }
-
-  // 单行 label 的最大显示区域（和 axisLabel.width 一致）
   var MAX_LABEL_WIDTH = 188;
-
-  // 如果该条有平台 icon，就要扣掉 icon 宽度+间距；否则直接用全部
   function getMaxTextWidthForRow(hasIcon) {
     return hasIcon ? MAX_LABEL_WIDTH - ICON_SIZE - ICON_GAP : MAX_LABEL_WIDTH;
   }
-
-  // 返回一个“中间省略”的文本，尽量贴近 maxWidthPx 宽度
   function middleEllipsis(labelText, maxWidthPx) {
     var font = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '14px sans-serif';
     if (!labelText) return '';
-
-    // 先测整段的宽度
     var fullRect = echarts.format.getTextRect(labelText, font);
-    if (fullRect.width <= maxWidthPx) {
-      // 不超宽，直接用原文
-      return labelText;
-    }
-
-    // 需要省略 -> 我们要找到前半段+后半段的长度
-    // 方案：从头和尾慢慢加字符，直到超过 maxWidthPx
+    if (fullRect.width <= maxWidthPx) return labelText;
     var DOT = '...';
     var dotW = echarts.format.getTextRect(DOT, font).width;
-
-    // 我们会不断尝试 prefixLen / suffixLen 的组合
     var prefixLen = 1;
     var suffixLen = 1;
-    var best = DOT; // 兜底
+    var best = DOT;
     var bestW = dotW;
     while (prefixLen < labelText.length && suffixLen < labelText.length) {
       var head = labelText.slice(0, prefixLen);
@@ -256,23 +198,28 @@ function CommonBar(props) {
       var candidate = head + DOT + tail;
       var w = echarts.format.getTextRect(candidate, font).width;
       if (w <= maxWidthPx) {
-        // 还能放得下 => 记录成当前最佳，然后再尝试加长
         best = candidate;
         bestW = w;
-        // 优先多给前缀，视觉更贴设计稿（你可以反过来）
         prefixLen++;
-        if (prefixLen % 2 === 0) {
-          suffixLen++;
-        }
+        if (prefixLen % 2 === 0) suffixLen++;
       } else {
-        // 超了，就停。这个 best 就是我们要的
         break;
       }
     }
     return best;
   }
+
+  // 取真实 grid 宽度（包含 containLabel 的最终结果）
+  function getGridPlotWidth(myChart) {
+    try {
+      var _myChart$getModel, _myChart$getModel$get, _grid$coordinateSyste, _grid$coordinateSyste2;
+      var grid = (_myChart$getModel = myChart.getModel()) === null || _myChart$getModel === void 0 || (_myChart$getModel$get = _myChart$getModel.getComponent) === null || _myChart$getModel$get === void 0 ? void 0 : _myChart$getModel$get.call(_myChart$getModel, 'grid');
+      var rect = grid === null || grid === void 0 || (_grid$coordinateSyste = grid.coordinateSystem) === null || _grid$coordinateSyste === void 0 || (_grid$coordinateSyste2 = _grid$coordinateSyste.getRect) === null || _grid$coordinateSyste2 === void 0 ? void 0 : _grid$coordinateSyste2.call(_grid$coordinateSyste);
+      if (rect !== null && rect !== void 0 && rect.width) return rect.width;
+    } catch (e) {}
+    return myChart.getWidth();
+  }
   var init = function init(currentData) {
-    var _data$;
     var myChart = null;
     var myDom = chartRef.current;
     myChart = echarts.getInstanceByDom(myDom);
@@ -282,153 +229,200 @@ function CommonBar(props) {
         renderer: 'svg'
       });
     }
-    var fadedData = null; // 缓存上一帧，避免重复 setOption
+
+    // 清理旧事件（避免分页/重绘叠加）
+    myChart.off('showTip');
+    myChart.off('hideTip');
+    myChart.off('finished');
+    myChart.getZr().off('click');
+    var fadedData = null;
     var lastIndex = null;
     var axisData = currentData.map(function (item) {
       return item.format || item.name || '-';
     });
-    var seriesData = currentData.map(function (item) {
-      // 优先使用每项自己的颜色，如果没有则使用默认的 barColor
-      var itemColor = item.color || barColor;
-      if (showProportion) {
-        return {
-          name: item.name || '-',
-          value: (item === null || item === void 0 ? void 0 : item.proportion) || 0,
-          label: {
-            // 负数就把文字放左边，正数/0 放右边
-            position: (item === null || item === void 0 ? void 0 : item.proportion) < 0 ? 'left' : 'right'
-          },
-          itemStyle: item !== null && item !== 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)'
-          }
-        };
-      }
-    });
-    var originalData = seriesData.map(function (d) {
-      return _objectSpread(_objectSpread({}, d), {}, {
-        itemStyle: _objectSpread(_objectSpread({}, d.itemStyle || {}), {}, {
-          opacity: 1
-        })
-      });
+
+    // 是否启用 yAxis icon（建议用当前页判断）
+    var yIconFlag = currentData === null || currentData === void 0 ? void 0 : currentData.some(function (d) {
+      return d === null || d === void 0 ? void 0 : d.platformIcon;
     });
-    var maxDataValue = Math.max.apply(Math, _toConsumableArray(currentData.map(function (item) {
-      return showProportion ? item === null || item === void 0 ? void 0 : item.proportion : item.value;
-    })));
-    // ① 先测出 Y 轴中最长的类目文本宽度
-    var ySample = axisData.reduce(function (a, b) {
-      return a.length > b.length ? a : b;
-    }, '');
-    var yLabelWidth = echarts.format.getTextRect(ySample, '14px sans-serif').width;
-    // 你在 axisLabel 里写了 margin: 10
-    var axisLabelGap = 10;
-    var chartWidth = myChart.getWidth();
-    var leftPadding = 12;
-    var rightPadding = 0;
-    var gridWidth = chartWidth - leftPadding - rightPadding;
-    var dealYLabelWidth = yLabelWidth > 188 ? 188 : yLabelWidth;
-    // ③ 真正柱子可用的像素宽度
-    var barAreaWidth = gridWidth - dealYLabelWidth - axisLabelGap;
-    var sampleText = showProportion ? computeFloat(maxDataValue) : numberFormatNull(maxDataValue);
-    var labelWidth = echarts.format.getTextRect(sampleText, '14px sans-serif').width;
-    var extra = 15;
-    var yIconFlag = (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.platformIcon;
     var valueAccessor = function valueAccessor(item) {
       return showProportion ? (item === null || item === void 0 ? void 0 : item.proportion) || 0 : item.value || 0;
     };
-    var minDataValue = Math.min.apply(Math, _toConsumableArray(currentData.map(valueAccessor)));
-    var hasNegative = minDataValue < 0;
-    var allNegative = maxDataValue < 0; // 检查是否所有数据都是负数
+    var rawVals = currentData.map(valueAccessor);
+    var rawMax = Math.max.apply(Math, [0].concat(_toConsumableArray(rawVals)));
+    var rawMin = Math.min.apply(Math, [0].concat(_toConsumableArray(rawVals)));
+    var FONT = '14px sans-serif';
+    var formatLabel = function formatLabel(v) {
+      return showProportion ? computeFloat(v) : numberFormatNull(v);
+    };
 
-    var bgValue;
-    // 如果所有数据都是负数，bgValue 应该设置为 0，让 xAxis.max 至少是 0
-    if (allNegative) {
-      bgValue = 0;
-    } else if (barAreaWidth > labelWidth + extra) {
-      bgValue = maxDataValue * barAreaWidth / (barAreaWidth - labelWidth - extra);
-    } else {
-      var overflowPx = labelWidth + extra - barAreaWidth; // 还差多少像素
-      var unitPerPx = maxDataValue / barAreaWidth; // 1 像素 ≈ 多少数据值
-      bgValue = maxDataValue + overflowPx * unitPerPx; // 把缺的像素折算到数据值
+    // 右侧（正数）最长 label
+    var rightLabelText = rawMax > 0 ? formatLabel(rawMax) : '';
+    var rightLabelW = rightLabelText ? echarts.format.getTextRect(rightLabelText, FONT).width : 0;
+
+    // 左侧（负数）最长 label（带负号）
+    var leftLabelText = rawMin < 0 ? formatLabel(rawMin) : '';
+    var leftLabelW = leftLabelText ? echarts.format.getTextRect(leftLabelText, FONT).width : 0;
+    var LABEL_DISTANCE = 5; // 要和 series.label.distance 保持一致
+    var SAFE_PX = 24; // 建议稍大一点，避免字体/渲染误差
+    var rightSpacePx = rawMax > 0 ? rightLabelW + LABEL_DISTANCE + SAFE_PX : 0;
+    var leftSpacePx = rawMin < 0 ? leftLabelW + LABEL_DISTANCE + SAFE_PX : 0;
+
+    // 先用一个“基础 option”把 grid 跑出来，拿到真实 plotWidth
+    var 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 formatter(value, index) {
+            var _currentData$index;
+            var rowHasIcon = !!(yIconFlag && (_currentData$index = currentData[index]) !== null && _currentData$index !== void 0 && _currentData$index.platformIcon);
+            var maxPx = getMaxTextWidthForRow(rowHasIcon);
+            var finalText = middleEllipsis(value, maxPx, FONT);
+            if (yIconFlag) return "{icon".concat(index, "|} {label|").concat(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);
+    var plotW = Math.max(1, getGridPlotWidth(myChart));
 
-    // 计算负数的最小背景值（类似正数的 bgValue）
-    var minBgValue = 0;
-    if (hasNegative) {
-      var absMinDataValue = Math.abs(minDataValue);
-      var absMaxDataValue = Math.abs(maxDataValue);
-      var minLabelSample = showProportion ? computeFloat(absMinDataValue) : numberFormatNull(absMinDataValue);
-      var minLabelWidth = echarts.format.getTextRect(minLabelSample, '14px sans-serif').width;
-      var minExtra = 15;
+    // === 用真实 plotW 计算 xAxis min/max（保证左右 label 都在 grid 里）===
+    var calcAxisRange = function calcAxisRange(baseMin, baseMax) {
+      var rL = Math.min(0.45, Math.max(0, leftSpacePx / plotW));
+      var rR = Math.min(0.45, Math.max(0, rightSpacePx / plotW));
+      var denom = Math.max(0.1, 1 - rL - rR);
+      var baseSpan = baseMax - baseMin;
+      if (!isFinite(baseSpan) || baseSpan === 0) baseSpan = 1;
+      var span = baseSpan / denom;
+      var xMin = baseMin - rL * span;
+      var xMax = baseMax + rR * span;
+      return {
+        xMin: xMin,
+        xMax: xMax,
+        span: span
+      };
+    };
 
-      // 计算整个x轴的数据范围（从最小负数到最大正数）
-      var totalDataRange = absMinDataValue + absMaxDataValue;
+    // 方案B：最小可见像素 4px
+    var MIN_BAR_PX = 4;
+    var minVisibleAbsFloor = showProportion ? 0 : 1;
 
-      // 计算负数部分应该占用的像素宽度
-      var negativeBarAreaWidth;
-      // 如果所有数据都是负数，使用整个 barAreaWidth 来显示负数
-      if (allNegative) {
-        negativeBarAreaWidth = barAreaWidth;
-      } else if (totalDataRange > 0) {
-        if (absMinDataValue < absMaxDataValue * 0.3) {
-          // 负数很小，只给必要的空间（标签宽度 + 一些余量）
-          negativeBarAreaWidth = Math.min(minLabelWidth + minExtra + 30, barAreaWidth * 0.25);
-        } else {
-          // 按比例分配，但确保至少能显示标签
-          var ratio = absMinDataValue / totalDataRange;
-          negativeBarAreaWidth = barAreaWidth * ratio;
-          negativeBarAreaWidth = Math.max(negativeBarAreaWidth, minLabelWidth + minExtra + 20);
-        }
-      } else {
-        negativeBarAreaWidth = barAreaWidth * 0.5;
-      }
+    // 迭代两次：先算 axis，再算 minVisible，再确保 axis 能包含 minVisible
+    var baseMin = rawMin;
+    var baseMax = rawMax;
+    var axis = calcAxisRange(baseMin, baseMax);
+    var minVisibleValue = axis.span * (MIN_BAR_PX / plotW) || minVisibleAbsFloor;
+    minVisibleValue = Math.max(minVisibleValue, minVisibleAbsFloor);
+    var hasPos = rawMax > 0;
+    var hasNeg = rawMin < 0;
 
-      // 计算 minBgValue：让负数柱子尽可能紧凑，只留出标签空间
-      // 负数柱子占用的像素 = negativeBarAreaWidth - minLabelWidth - minExtra
-      var availableBarWidth = Math.max(1, negativeBarAreaWidth - minLabelWidth - minExtra);
-      // 计算每像素对应的数据值
-      var dataPerPixel = absMinDataValue / availableBarWidth;
-      // minBgValue 需要比 minDataValue 更小，以容纳左边的标签
-      var labelSpaceInData = (minLabelWidth + minExtra) * dataPerPixel;
-      minBgValue = -(absMinDataValue + labelSpaceInData);
+    // 如果 clamp 后的可见值会超过 rawMax/rawMin，则把 baseMin/baseMax 扩一下再算一次 axis
+    var effectiveMax = hasPos ? Math.max(rawMax, minVisibleValue) : 0;
+    var 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);
+    }
+    var xAxisMin = axis.xMin;
+    var xAxisMax = axis.xMax;
 
-      // 如果同时有正数，重新计算正数的 bgValue，使用剩余空间
-      // 如果所有数据都是负数，bgValue 保持为 0
-      if (maxDataValue > 0 && !allNegative) {
-        var positiveBarAreaWidth = barAreaWidth - negativeBarAreaWidth;
-        if (positiveBarAreaWidth > labelWidth + extra) {
-          bgValue = maxDataValue * positiveBarAreaWidth / (positiveBarAreaWidth - labelWidth - extra);
-        } else {
-          var _overflowPx = labelWidth + extra - positiveBarAreaWidth;
-          var _unitPerPx = maxDataValue / Math.max(positiveBarAreaWidth, 1);
-          bgValue = maxDataValue + _overflowPx * _unitPerPx;
+    // 前景 seriesData：rawValue 用于展示，value 用于绘制（钳制最小 4px）
+    var seriesData = currentData.map(function (item) {
+      var itemColor = item.color || barColor;
+      var raw = valueAccessor(item);
+      var 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)'
         }
-      }
-    }
+      };
+    });
+    var originalData = seriesData.map(function (d) {
+      return _objectSpread(_objectSpread({}, d), {}, {
+        itemStyle: _objectSpread(_objectSpread({}, d.itemStyle || {}), {}, {
+          opacity: 1
+        })
+      });
+    });
     var option = {
       tooltip: {
         className: "onesight-chart-common-bar-tooltip ".concat(tooltipClassNameRef.current),
         trigger: 'axis',
         enterable: true,
+        padding: 0,
         // showContent: true,
         // alwaysShowContent: true,
         // hideDelay: 1000000000,
-        padding: 0,
         position: function position(point, params, dom) {
           var tooltipHeight = (dom === null || dom === void 0 ? void 0 : dom.offsetHeight) || 0;
           var currentHeight = myDom.offsetHeight;
@@ -452,26 +446,24 @@ function CommonBar(props) {
           var _res$, _res$2;
           if (!res.some(function (i) {
             return i.value !== undefined && i.value !== null;
-          })) {
-            return '';
-          }
+          })) return '';
           var dataArr = [res[1]];
           var currentColor = ((_res$ = res[1]) === null || _res$ === void 0 ? void 0 : _res$.color) || '#1DA9A0';
           var triangleWidth = 280;
-          // 获取当前数据项的索引，以便从 currentData 中获取 alias
           var dataIndex = (_res$2 = res[1]) === null || _res$2 === void 0 ? void 0 : _res$2.dataIndex;
           var originalItem = currentData[dataIndex];
-          return "<div class='onesight-chart-common-bar-tooltip-box' style=\"width:278px;position: relative;\">\n                        ".concat(isTooltipTitleShow ? "<div class=\"tooltip-head\">\n                              ".concat(res[0].format || res[0].name, "\n                            </div>") : '', "\n                        <div class='tooltip-body'>\n                        ").concat(dataArr.map(function (item) {
-            // 合并原始数据的 alias、alias2 和 aliasArray 字段到 item 中
+          return "<div class='onesight-chart-common-bar-tooltip-box' style=\"width:278px;position: relative;\">\n                    ".concat(isTooltipTitleShow ? "<div class=\"tooltip-head\">".concat(res[0].format || res[0].name, "</div>") : '', "\n                    ").concat(originalItem !== null && originalItem !== void 0 && originalItem.currentTime ? "<div class=\"tooltip-time\">".concat(originalItem === null || originalItem === void 0 ? void 0 : originalItem.currentTime, "</div>") : '', "\n                    <div class='tooltip-body'>\n                    ").concat(dataArr.map(function (item) {
+            var _item$data;
+            var raw = (item === null || item === void 0 || (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.rawValue) !== undefined ? item.data.rawValue : item.value;
             var itemWithAlias = _objectSpread(_objectSpread({}, item), {}, {
               alias: originalItem === null || originalItem === void 0 ? void 0 : originalItem.alias,
               alias2: originalItem === null || originalItem === void 0 ? void 0 : originalItem.alias2,
-              aliasArray: originalItem === null || originalItem === void 0 ? void 0 : originalItem.aliasArray
+              aliasArray: originalItem === null || originalItem === void 0 ? void 0 : originalItem.aliasArray,
+              rawValue: raw
             });
-            // 将 JSON 字符串转义为安全的 HTML 属性值
             var escapedJson = escapeHtmlAttribute(JSON.stringify(itemWithAlias));
-            return "<div class='item' data-series-item=\"".concat(escapedJson, "\" key='").concat(item.seriesName, "'>\n                                <div class='l'>\n                                        <span style=\"display:inline-block;width: 14px;vertical-align: middle;height: 14px;background-color:").concat(currentColor, ";border-radius: 4px;margin-bottom: 2px;margin-right:6px\"></span>\n                                        <span>").concat(tooltipItemName ? res[0].format || res[0].name : tipName, "\n                                        </span>\n                                </div>\n                                <div class='r' style=\"padding-left:6px;\">\n                                <span class='num'>\n                                    ").concat(showProportion ? computeFloat(item.value) : changeDataTypeEn(item.value), "\n                                </span>\n                                </div>\n                            </div>");
-          }).join(''), "\n                        </div>\n                        <div class='triangle-down' style='width:").concat(triangleWidth, "px'></div>\n                    </div>");
+            return "<div class='item' data-series-item=\"".concat(escapedJson, "\" key='").concat(item.seriesName, "'>\n                                  <div class='l'>\n                                    <span style=\"display:inline-block;width: 14px;vertical-align: middle;height: 14px;background-color:").concat(currentColor, ";border-radius: 4px;margin-bottom: 2px;margin-right:6px\"></span>\n                                    <span>").concat(tooltipItemName ? res[0].format || res[0].name : tipName, "</span>\n                                  </div>\n                                  <div class='r' style=\"padding-left:6px;\">\n                                    <span class='num'>").concat(showProportion ? computeFloat(raw) : changeDataTypeEn(raw), "</span>\n                                  </div>\n                                </div>");
+          }).join(''), "\n                    </div>\n                    <div class='triangle-down' style='width:").concat(triangleWidth, "px'></div>\n                  </div>");
         }
       },
       animation: true,
@@ -482,16 +474,15 @@ function CommonBar(props) {
       },
       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 : undefined,
+        min: xAxisMin,
+        max: xAxisMax,
         show: false,
         axisLine: {
           show: false
@@ -508,7 +499,7 @@ function CommonBar(props) {
         type: 'category',
         inverse: true,
         axisLabel: {
-          margin: hasNegative ? 40 : 10,
+          margin: rawMin < 0 ? 40 : 10,
           color: '#273333',
           fontSize: 14,
           fontWeight: 500,
@@ -516,35 +507,15 @@ 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 formatter(value, index) {
-            var _currentData$index;
-            // 这一行有没有图标？
-            var rowHasIcon = !!(yIconFlag && (_currentData$index = currentData[index]) !== null && _currentData$index !== void 0 && _currentData$index.platformIcon);
-
-            // 这一行文本可用的最大宽度（扣除图标）
+            var _currentData$index2;
+            var rowHasIcon = !!(yIconFlag && (_currentData$index2 = currentData[index]) !== null && _currentData$index2 !== void 0 && _currentData$index2.platformIcon);
             var maxPx = getMaxTextWidthForRow(rowHasIcon);
-
-            // 得到“中间省略版”文本
-            var finalText = middleEllipsis(value, maxPx, '14px sans-serif' // 跟 axisLabel 字体保持一致
-            );
-
-            // 按是否有 icon，返回富文本还是普通文本
-            if (yIconFlag) {
-              return "{icon".concat(index, "|} {label|").concat(finalText, "}");
-            } else {
-              return finalText;
-            }
+            var finalText = middleEllipsis(value, maxPx, FONT);
+            if (yIconFlag) return "{icon".concat(index, "|} {label|").concat(finalText, "}");
+            return finalText;
           }
         },
         axisTick: {
@@ -559,52 +530,42 @@ function CommonBar(props) {
         data: axisData
       },
       series: [{
-        // === 背景柱系列 ===
-        // 需要背景柱的原因是让柱状条加上后面的数字标签的和不超过悬浮上去的阴影的长度
         name: '背景条',
         type: 'bar',
-        // 让它在最底层
         z: 1,
-        // 不需要点击/hover 交互
         silent: true,
-        // 让柱子和后面的柱子重叠在同一个类目位置
         barGap: '-100%',
         emphasis: {
           disabled: true
         },
-        // 柱子的样式
         itemStyle: {
-          color: 'rgba(0, 0, 0, 0)' // 背景色可自定义
+          color: 'rgba(0, 0, 0, 0)'
         },
-        // 这里的 data 根据正负数使用不同的背景值
         data: currentData.map(function (item) {
-          var value = valueAccessor(item);
-          return value < 0 ? minBgValue : bgValue;
+          var 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: function formatter(params) {
-            if (showProportion) {
-              return computeFloat(params.value);
-            } else {
-              return numberFormatNull(params.value);
-            }
+            var _params$data$rawValue, _params$data;
+            var raw = (_params$data$rawValue = params === null || params === void 0 || (_params$data = params.data) === null || _params$data === void 0 ? void 0 : _params$data.rawValue) !== null && _params$data$rawValue !== void 0 ? _params$data$rawValue : params.value;
+            return showProportion ? computeFloat(raw) : numberFormatNull(raw);
           }
         },
         emphasis: {
@@ -615,10 +576,9 @@ function CommonBar(props) {
           borderWidth: 0,
           borderType: 'solid'
         },
-        // barMaxWidth: 42,
-        // barMinWidth: 16,
         barWidth: calculateWidth(seriesData.length),
         barMinHeight: 4,
+        barMinWidth: 4,
         cursor: 'pointer',
         animation: false,
         data: seriesData
@@ -661,9 +621,7 @@ function CommonBar(props) {
     });
     myChart.on('showTip', function (_ref) {
       var dataIndex = _ref.dataIndex;
-      // 鼠标微移时不重复更新
       if (dataIndex === lastIndex) return;
-      // 生成淡化后的数组（只改非当前柱）
       fadedData = originalData.map(function (d, i) {
         return _objectSpread(_objectSpread({}, d), {}, {
           itemStyle: _objectSpread(_objectSpread({}, d.itemStyle || {}), {}, {
@@ -677,12 +635,10 @@ function CommonBar(props) {
     });
     myChart.on('hideTip', function () {
       if (lastIndex === null) return;
-      // 恢复全部不透明
       setBarData(myChart, originalData);
       toggleAxisPointer(myChart, false);
       lastIndex = null;
     });
-    myChart.off('finished');
     myChart.on('finished', function () {
       dealBarPath(myDom, true);
     });
@@ -692,7 +648,6 @@ function CommonBar(props) {
       element.addEventListener('mouseleave', function (event) {
         if (event && element.offsetHeight && event.offsetY < element.offsetHeight - 2) {
           if (lastIndex === null) return;
-          // 恢复全部不透明
           setBarData(myChart, originalData);
           myChart.dispatchAction({
             type: 'hideTip'