@easyv/charts 1.9.17 → 1.9.19

package/lib/components/Axis.js

@@ -5,10 +5,11 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.calculateTextWidth = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
 var _context = require("../context");
@@ -20,6 +21,43 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { (0, _defineProperty2["default"])(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; } /**
  * x, y, z轴
  */
+var canvasContext = null;
+var getCanvasContext = function getCanvasContext() {
+  if (!canvasContext) {
+    // 创建离线Canvas（不挂载到DOM，仅用于计算）
+    var canvas = document.createElement("canvas");
+    canvasContext = canvas.getContext("2d");
+    if (!canvasContext) {
+      throw new Error("浏览器不支持Canvas");
+    }
+  }
+  return canvasContext;
+};
+
+//计算文本宽度的函数
+var calculateTextWidth = exports.calculateTextWidth = function calculateTextWidth(text, fontConfig) {
+  if (!text) return 0;
+  var ctx = getCanvasContext();
+  ctx.save();
+  var fontStyle = fontConfig.italic ? "italic" : "normal";
+  var fontWeight = fontConfig.bold ? "bold" : "normal";
+  var fontSize = typeof fontConfig.fontSize === "number" ? "".concat(fontConfig.fontSize, "px") : fontConfig.fontSize || "12px";
+  var fontFamily = fontConfig.fontFamily || "Microsoft Yahei";
+  var letterSpacing = Number(fontConfig.letterSpacing) || 0;
+  var letterSpacingWithUnit = "".concat(letterSpacing, "px");
+  ctx.font = "".concat(fontWeight, " ").concat(fontStyle, " ").concat(fontSize, " ").concat(fontFamily);
+  ctx.letterSpacing = letterSpacingWithUnit;
+  var totalWidth;
+  if (typeof ctx.letterSpacing !== "undefined") {
+    totalWidth = ctx.measureText(text).width;
+  } else {
+    var baseWidth = ctx.measureText(text).width;
+    var spacingWidth = text.length * letterSpacing;
+    totalWidth = baseWidth + spacingWidth;
+  }
+  ctx.restore();
+  return totalWidth;
+};
 var defaultEvent = function defaultEvent() {};
 var defaultAppearance = {
   angle: 0,
@@ -152,6 +190,23 @@ var Unit = function Unit(_ref4) {
     textAnchor: textAnchor
   }, dataUnit || text);
 };
+function maxLabelFT(data, config, formatter, font) {
+  var max = 0;
+  data.length ? data.forEach(function (item) {
+    if (calculateTextWidth(formatter(item, _objectSpread(_objectSpread({}, config), {}, {
+      format: {
+        type: config.format,
+        showType: config.showType
+      }
+    })), font) > max) max = calculateTextWidth(formatter(item, _objectSpread(_objectSpread({}, config), {}, {
+      format: {
+        type: config.format,
+        showType: config.showType
+      }
+    })), font);
+  }) : "";
+  return max;
+}
 var Label = function Label(_ref5) {
   var className = _ref5.className,
     _ref5$orientation = _ref5.orientation,
@@ -172,6 +227,7 @@ var Label = function Label(_ref5) {
     events = _ref5$events === void 0 ? defaultEvent : _ref5$events,
     _ref5$config = _ref5.config,
     show = _ref5$config.show,
+    labelNum = _ref5$config.labelNum,
     style = _ref5$config.style,
     _ref5$config$translat = _ref5$config.translate,
     translateX = _ref5$config$translat.x,
@@ -183,9 +239,15 @@ var Label = function Label(_ref5) {
     _ref5$config$appearan2 = _ref5$config$appearan === void 0 ? defaultAppearance : _ref5$config$appearan,
     width = _ref5$config$appearan2.width,
     speed = _ref5$config$appearan2.speed,
-    textOverflow = _ref5$config$appearan2.textOverflow;
+    textOverflow = _ref5$config$appearan2.textOverflow,
+    LabelWidth = _ref5.LabelWidth;
   if (!show) return null;
-  var _label = formatter(label, config);
+  var _label = formatter(label, _objectSpread(_objectSpread({}, config), {}, {
+    format: {
+      type: config.format,
+      showType: config.showType
+    }
+  }));
   var _getLayout = getLayout(orientation, rotate),
     transform = _getLayout.transform,
     directionX = _getLayout.directionX,
@@ -194,6 +256,7 @@ var Label = function Label(_ref5) {
   var x = (isVertical ? tickSize * directionX : coordinate) + translateX * directionX;
   var y = (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
   var _style = style && ((0, _typeof2["default"])(style) == "object" ? style : style(_label));
+  //x轴显示
   return /*#__PURE__*/_react["default"].createElement("foreignObject", {
     width: "100%",
     height: "100%"
@@ -217,7 +280,7 @@ var Label = function Label(_ref5) {
       cursor: "pointer",
       transform: "translate(".concat(x + (isIOS ? iosX : 0), "px, ").concat(y + (isIOS ? iosY : 0), "px)") // 用 transform 定位
     })
-  }, /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+  }, labelNum == "Fixed" ? /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
     ShowType: "normal",
     type: textOverflow,
     speed: speed,
@@ -228,17 +291,28 @@ var Label = function Label(_ref5) {
       textAlign: textAlign,
       justifyContent: textAlign == "left" ? "flex-start" : textAlign == "right" ? "flex-end" : "center"
     }
-  })));
+  }) : /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      width: LabelWidth,
+      transform: transform,
+      justifyContent: "flex-start",
+      display: "block",
+      top: translateY,
+      left: translateX
+    }
+  }, _label)));
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
-  var orientation = _ref6.orientation,
+  var allTicks = _ref6.allTicks,
+    orientation = _ref6.orientation,
     scaler = _ref6.scaler,
     _ref6$tickSize = _ref6.tickSize,
     tickSize = _ref6$tickSize === void 0 ? defaultTickSize : _ref6$tickSize,
-    ticks = _ref6.ticks,
+    tickss = _ref6.ticks,
     formatter = _ref6.formatter,
     rotate = _ref6.rotate,
     triggerEvents = _ref6.triggerEvents,
+    config = _ref6.config,
     _ref6$config = _ref6.config,
     on = _ref6$config.on,
     label = _ref6$config.label,
@@ -259,8 +333,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     yLineRange = _ref6.yLineRange,
     clipAxisRange = _ref6.clipAxisRange,
     controlInfo = _ref6.controlInfo,
-    rawTicks = _ref6.rawTicks;
-  if (!(on && ticks.length > 0)) return null;
+    rawTicks = _ref6.rawTicks,
+    paddingOuter = _ref6.paddingOuter;
   var _useContext = (0, _react.useContext)(_context.chartContext),
     width = _useContext.width,
     height = _useContext.height,
@@ -270,6 +344,71 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     cPercent = controlInfo.cPercent;
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
+  var LabelWidth = 1;
+  if (label.labelNum == "Fixed") {
+    LabelWidth = label.appearance.width;
+  } else {
+    if (allTicks.length && typeof allTicks[0] == "string") {
+      LabelWidth = maxLabelFT(allTicks, label, formatter, label.font);
+    }
+  }
+  var LabelNum = Math.floor(width / (isC ? cPercent : 1) * (1 - paddingOuter) / LabelWidth);
+  var ticks = label.labelNum == "Fixed" ? tickss : getEvenlySpacedElements(allTicks, LabelNum < allTicks.length ? LabelNum > allTicks.length / 2 ? Math.ceil(allTicks.length / 2) : LabelNum : allTicks.length, label.showLast);
+  if (!(on && ticks.length > 0)) return null;
+
+  //数据抽取逻辑
+  function getEvenlySpacedElements(arr, expectCount) {
+    var acc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (!arr.length || expectCount <= 0) return [];
+    if (expectCount >= arr.length) return (0, _toConsumableArray2["default"])(arr);
+    if (expectCount === 1) return [arr[0]];
+    if (acc) {
+      var totalLength = arr.length;
+      var result = [];
+      var bestCount = 2;
+      for (var k = expectCount; k >= 2; k--) {
+        var denominator = k - 1;
+        var numerator = totalLength - 1;
+        if (denominator > 0 && numerator % denominator === 0) {
+          bestCount = k;
+          break;
+        }
+      }
+      var step = (totalLength - 1) / (bestCount - 1);
+      for (var i = 0; i < bestCount; i++) {
+        var rawIndex = i * step;
+        var index = Math.ceil(rawIndex);
+        var safeIndex = Math.max(0, Math.min(totalLength - 1, index));
+        result.push(arr[safeIndex]);
+      }
+      if (result.length > 0) result[0] = arr[0];
+      if (result.length >= 2) result[result.length - 1] = arr[totalLength - 1];
+      return result;
+    } else {
+      // 重构acc=false逻辑：优先均匀分布，不强制首尾
+      var _result = [];
+      var arrLen = arr.length;
+      if (expectCount === 2) {
+        _result.push(arr[0]);
+        _result.push(arr[arrLen - 1]);
+        return _result;
+      }
+      var idealStep = (arrLen - 1) / (expectCount - 1);
+      var isIdealStepInteger = Math.abs(idealStep - Math.round(idealStep)) < 1e-10;
+      if (isIdealStepInteger) {
+        for (var _i = 0; _i < expectCount; _i++) {
+          var _index = _i * idealStep;
+          _result.push(arr[_index]);
+        }
+      } else {
+        var _step = Math.max(1, Math.floor(arrLen / expectCount));
+        for (var _i2 = 0; _i2 < arrLen && _result.length < expectCount; _i2 += _step) {
+          _result.push(arr[_i2]);
+        }
+      }
+      return _result;
+    }
+  }
   function drawAxisTickLine() {
     var draw = function draw(ticks, scaler) {
       return ticks.map(function (tick, index) {
@@ -333,7 +472,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
           tickSize: _tickSize,
           formatter: formatter,
           rotate: rotate,
-          events: triggerEvents
+          events: triggerEvents,
+          LabelWidth: LabelWidth
         }), gridLine && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
           className: "__easyv-gridLine",
           config: gridLine
@@ -345,7 +485,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
         return draw(ticks, scaler[index]);
       }));
     } else if (isC && orientation == "bottom") {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(rawTicks, scaler));
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
+      // return <>{draw(rawTicks, scaler)}</>;
     } else {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, draw(ticks, scaler));
     }

package/lib/hooks/useExtentData.js

@@ -91,7 +91,7 @@ var _default = exports["default"] = function _default(_ref) {
   if (xAxis) {
     var _xAxis$config$label = xAxis.config.label,
       autoSort = _xAxis$config$label.autoSort,
-      type = _xAxis$config$label.format.type;
+      type = _xAxis$config$label.format;
     if (type == "date" && autoSort) {
       x.sort(function (a, b) {
         return new Date(a).getTime() - new Date(b).getTime();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.17",
+  "version": "1.9.19",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Axis.tsx

@@ -15,6 +15,47 @@ import { chartContext } from "../context";
 import { Line } from "../element";
 import TextOverflow from "./TextOverflow";
 import { path } from "d3";
+let canvasContext: CanvasRenderingContext2D | null = null;
+const getCanvasContext = (): CanvasRenderingContext2D => {
+  if (!canvasContext) {
+    // 创建离线Canvas（不挂载到DOM，仅用于计算）
+    const canvas = document.createElement("canvas");
+    canvasContext = canvas.getContext("2d");
+    if (!canvasContext) {
+      throw new Error("浏览器不支持Canvas");
+    }
+  }
+  return canvasContext;
+};
+
+//计算文本宽度的函数
+export const calculateTextWidth = (text: string, fontConfig: any): number => {
+  if (!text) return 0;
+  const ctx = getCanvasContext();
+  ctx.save();
+
+  const fontStyle = fontConfig.italic ? "italic" : "normal";
+  const fontWeight = fontConfig.bold ? "bold" : "normal";
+  const fontSize =
+    typeof fontConfig.fontSize === "number"
+      ? `${fontConfig.fontSize}px`
+      : fontConfig.fontSize || "12px";
+  const fontFamily = fontConfig.fontFamily || "Microsoft Yahei";
+  const letterSpacing = Number(fontConfig.letterSpacing) || 0;
+  const letterSpacingWithUnit = `${letterSpacing}px`;
+  ctx.font = `${fontWeight} ${fontStyle} ${fontSize} ${fontFamily}`;
+  ctx.letterSpacing = letterSpacingWithUnit;
+  let totalWidth;
+  if (typeof ctx.letterSpacing !== "undefined") {
+    totalWidth = ctx.measureText(text).width;
+  } else {
+    const baseWidth = ctx.measureText(text).width;
+    const spacingWidth = text.length * letterSpacing;
+    totalWidth = baseWidth + spacingWidth;
+  }
+  ctx.restore();
+  return totalWidth;
+};
 const defaultEvent = () => {};
 const defaultAppearance = {
   angle: 0,
@@ -185,14 +226,42 @@ type LabelType = {
   events?: Function;
   config: {
     show: boolean;
+    labelNum: string;
     translate: Translate;
     font: Font;
     textAlign: TextAlign;
     style: CSSProperties | Function;
     appearance?: appearance;
+    format: string;
+    showType: string;
   };
+  LabelWidth: any;
 };
 
+function maxLabelFT(data: any, config: any, formatter: any, font: any) {
+  let max = 0;
+  data.length
+    ? data.forEach((item: any) => {
+        if (
+          calculateTextWidth(
+            formatter(item, {
+              ...config,
+              format: { type: config.format, showType: config.showType },
+            }),
+            font
+          ) > max
+        )
+          max = calculateTextWidth(
+            formatter(item, {
+              ...config,
+              format: { type: config.format, showType: config.showType },
+            }),
+            font
+          );
+      })
+    : "";
+  return max;
+}
 const Label: (
   props: LabelType
 ) => ReactComponentElement<ComponentType> | null = ({
@@ -208,15 +277,20 @@ const Label: (
   events = defaultEvent,
   config: {
     show,
+    labelNum,
     style,
     translate: { x: translateX, y: translateY },
     font,
     textAlign = "center",
     appearance: { width, speed, textOverflow } = defaultAppearance,
   },
+  LabelWidth,
 }) => {
   if (!show) return null;
-  const _label = formatter(label, config);
+  const _label = formatter(label, {
+    ...config,
+    format: { type: config.format, showType: config.showType },
+  });
   const { transform, directionX, directionY } = getLayout(orientation, rotate);
   const isVertical = orientation == "left" || orientation == "right";
 
@@ -226,7 +300,7 @@ const Label: (
     (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
 
   const _style = style && (typeof style == "object" ? style : style(_label));
-
+  //x轴显示
   return (
     <foreignObject
       width="100%"
@@ -249,23 +323,38 @@ const Label: (
           }px)`, // 用 transform 定位
         }}
       >
-        <TextOverflow
-          ShowType="normal"
-          type={textOverflow}
-          speed={speed}
-          value={_label}
-          style={{
-            width,
-            transform,
-            textAlign,
-            justifyContent:
-              textAlign == "left"
-                ? "flex-start"
-                : textAlign == "right"
-                ? "flex-end"
-                : "center",
-          }}
-        ></TextOverflow>
+        {labelNum == "Fixed" ? (
+          <TextOverflow
+            ShowType="normal"
+            type={textOverflow}
+            speed={speed}
+            value={_label}
+            style={{
+              width,
+              transform,
+              textAlign,
+              justifyContent:
+                textAlign == "left"
+                  ? "flex-start"
+                  : textAlign == "right"
+                  ? "flex-end"
+                  : "center",
+            }}
+          ></TextOverflow>
+        ) : (
+          <span
+            style={{
+              width: LabelWidth,
+              transform,
+              justifyContent: "flex-start",
+              display: "block",
+              top: translateY,
+              left: translateX,
+            }}
+          >
+            {_label}
+          </span>
+        )}
       </div>
     </foreignObject>
   );
@@ -275,13 +364,15 @@ export default memo(
   forwardRef(
     (
       {
+        allTicks,
         orientation,
         scaler,
         tickSize = defaultTickSize,
-        ticks,
+        ticks: tickss,
         formatter,
         rotate,
         triggerEvents,
+        config,
         config: { on, label, axisLine, tickLine, gridLine, unit },
         margin: { marginLeft, marginTop },
         positions,
@@ -296,15 +387,107 @@ export default memo(
         //控制图相关
         controlInfo,
         rawTicks,
+        paddingOuter,
       }: any,
       ref
     ) => {
-      if (!(on && ticks.length > 0)) return null;
       const { width, height, isIOS } = useContext(chartContext);
       const { cHeight, isC, cPercent } = controlInfo;
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height - cHeight : 0;
+      let LabelWidth = 1;
+      if (label.labelNum == "Fixed") {
+        LabelWidth = label.appearance.width;
+      } else {
+        if (allTicks.length && typeof allTicks[0] == "string") {
+          LabelWidth = maxLabelFT(allTicks, label, formatter, label.font);
+        }
+      }
+      const LabelNum = Math.floor(
+        ((width / (isC ? cPercent : 1)) * (1 - paddingOuter)) / LabelWidth
+      );
+      const ticks: any =
+        label.labelNum == "Fixed"
+          ? tickss
+          : getEvenlySpacedElements(
+              allTicks,
+              LabelNum < allTicks.length
+                ? LabelNum > allTicks.length / 2
+                  ? Math.ceil(allTicks.length / 2)
+                  : LabelNum
+                : allTicks.length,
+              label.showLast
+            );
+      if (!(on && ticks.length > 0)) return null;
+
+      //数据抽取逻辑
+      function getEvenlySpacedElements(
+        arr: any[],
+        expectCount: number,
+        acc: boolean = false
+      ): any[] {
+        if (!arr.length || expectCount <= 0) return [];
+        if (expectCount >= arr.length) return [...arr];
+        if (expectCount === 1) return [arr[0]];
+
+        if (acc) {
+          const totalLength = arr.length;
+          const result: any[] = [];
+
+          let bestCount = 2;
+          for (let k = expectCount; k >= 2; k--) {
+            const denominator = k - 1;
+            const numerator = totalLength - 1;
+            if (denominator > 0 && numerator % denominator === 0) {
+              bestCount = k;
+              break;
+            }
+          }
 
+          const step = (totalLength - 1) / (bestCount - 1);
+          for (let i = 0; i < bestCount; i++) {
+            const rawIndex = i * step;
+            const index = Math.ceil(rawIndex);
+            const safeIndex = Math.max(0, Math.min(totalLength - 1, index));
+            result.push(arr[safeIndex]);
+          }
+
+          if (result.length > 0) result[0] = arr[0];
+          if (result.length >= 2)
+            result[result.length - 1] = arr[totalLength - 1];
+
+          return result;
+        } else {
+          // 重构acc=false逻辑：优先均匀分布，不强制首尾
+          const result: any[] = [];
+          const arrLen = arr.length;
+          if (expectCount === 2) {
+            result.push(arr[0]);
+            result.push(arr[arrLen - 1]);
+            return result;
+          }
+          const idealStep = (arrLen - 1) / (expectCount - 1);
+          const isIdealStepInteger =
+            Math.abs(idealStep - Math.round(idealStep)) < 1e-10;
+
+          if (isIdealStepInteger) {
+            for (let i = 0; i < expectCount; i++) {
+              const index = i * idealStep;
+              result.push(arr[index]);
+            }
+          } else {
+            const step = Math.max(1, Math.floor(arrLen / expectCount));
+            for (
+              let i = 0;
+              i < arrLen && result.length < expectCount;
+              i += step
+            ) {
+              result.push(arr[i]);
+            }
+          }
+          return result;
+        }
+      }
       function drawAxisTickLine() {
         const draw = (ticks: any, scaler: any) => {
           return ticks.map((tick: string, index: number) => {
@@ -395,6 +578,7 @@ export default memo(
                       formatter={formatter}
                       rotate={rotate}
                       events={triggerEvents}
+                      LabelWidth={LabelWidth}
                     />
                   )}
                   {gridLine && (
@@ -418,7 +602,8 @@ export default memo(
             </>
           );
         } else if (isC && orientation == "bottom") {
-          return <>{draw(rawTicks, scaler)}</>;
+          return <>{draw(ticks, scaler)}</>;
+          // return <>{draw(rawTicks, scaler)}</>;
         } else {
           return <>{draw(ticks, scaler)}</>;
         }

package/src/components/Label.js

@@ -45,10 +45,16 @@ export default memo(
     selectStyle,
     bandLength = 0,
     data,
-    xAxis: { scaler: normalScaler, step:normalStep, direction,controlStep,controlDragScaler },
+    xAxis: {
+      scaler: normalScaler,
+      step: normalStep,
+      direction,
+      controlStep,
+      controlDragScaler,
+    },
     yAxis: { scaler: yScaler, isClipAxis, clipValue },
     triggerEvents,
-    isControlChart
+    isControlChart,
   }) => {
     const step = isControlChart ? controlStep : normalStep;
     const xScaler = isControlChart ? controlDragScaler : normalScaler;
@@ -120,7 +126,8 @@ export default memo(
             }
 
             // const y2 =  yScaler(isVertical ? start : end);
-            const positionX =xScaler(x)- step / 2+seriesStart+ index * seriesStep;
+            const positionX =
+              xScaler(x) - step / 2 + seriesStart + index * seriesStep;
 
             if (isNaN(positionX)) return null;
             const position = isXRepeat

package/src/hooks/useExtentData.js

@@ -79,10 +79,7 @@ export default ({ axes, series, data }) => {
   if (xAxis) {
     const {
       config: {
-        label: {
-          autoSort,
-          format: { type },
-        },
+        label: { autoSort, format: type },
       },
     } = xAxis;
     if (type == "date" && autoSort) {