@easyv/charts 1.9.16 → 1.9.18

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,17 +333,71 @@ 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,
     isIOS = _useContext.isIOS;
+  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 * (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;
   var cHeight = controlInfo.cHeight,
     isC = controlInfo.isC,
     cPercent = controlInfo.cPercent;
   var x = orientation == "right" ? width : 0;
   var y = orientation == "bottom" ? height - cHeight : 0;
+  //数据抽取逻辑
+  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);
+
+    // 如果只需要取1个，直接返回第一个
+    if (expectCount === 1) {
+      return [arr[0]];
+    }
+    if (acc) {
+      //严格均分逻辑
+      var result = [arr[0], arr[arr.length - 1]];
+      if (expectCount === 2) {
+        return result;
+      }
+      var needMiddleCount = expectCount - 2;
+      var availableMiddleLength = arr.length - 2;
+      if (needMiddleCount > 0 && availableMiddleLength >= needMiddleCount && (availableMiddleLength + 1) % (needMiddleCount + 1) === 0) {
+        var step = (availableMiddleLength + 1) / (needMiddleCount + 1);
+        result.length = 0;
+        result.push(arr[0]);
+        for (var i = 1; i <= needMiddleCount; i++) {
+          var index = i * step;
+          result.push(arr[index]);
+        }
+        result.push(arr[arr.length - 1]);
+      }
+      return result;
+    } else {
+      var _result = [];
+      var arrLen = arr.length;
+      var _step = Math.max(1, Math.floor(arrLen / expectCount));
+      for (var _i = 0; _i < arrLen; _i += _step) {
+        _result.push(arr[_i]);
+        if (_result.length >= expectCount) break;
+      }
+      if (expectCount === 2 && _result.length >= 2) {
+        _result[1] = arr[arr.length - 1];
+      }
+      return _result;
+    }
+  }
   function drawAxisTickLine() {
     var draw = function draw(ticks, scaler) {
       return ticks.map(function (tick, index) {
@@ -333,7 +461,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

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.16",
+  "version": "1.9.18",
   "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,93 @@ export default memo(
         //控制图相关
         controlInfo,
         rawTicks,
+        paddingOuter,
       }: any,
       ref
     ) => {
-      if (!(on && ticks.length > 0)) return null;
       const { width, height, isIOS } = useContext(chartContext);
+      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 * (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;
+
       const { cHeight, isC, cPercent } = controlInfo;
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height - cHeight : 0;
+      //数据抽取逻辑
+      function getEvenlySpacedElements(
+        arr: any[],
+        expectCount: number,
+        acc: boolean = false
+      ): any[] {
+        if (!arr.length || expectCount <= 0) return [];
+        if (expectCount >= arr.length) return [...arr];
+
+        // 如果只需要取1个，直接返回第一个
+        if (expectCount === 1) {
+          return [arr[0]];
+        }
+
+        if (acc) {
+          //严格均分逻辑
+          const result: any[] = [arr[0], arr[arr.length - 1]];
+          if (expectCount === 2) {
+            return result;
+          }
+          const needMiddleCount = expectCount - 2;
+          const availableMiddleLength = arr.length - 2;
 
+          if (
+            needMiddleCount > 0 &&
+            availableMiddleLength >= needMiddleCount &&
+            (availableMiddleLength + 1) % (needMiddleCount + 1) === 0
+          ) {
+            const step = (availableMiddleLength + 1) / (needMiddleCount + 1);
+            result.length = 0;
+            result.push(arr[0]);
+            for (let i = 1; i <= needMiddleCount; i++) {
+              const index = i * step;
+              result.push(arr[index]);
+            }
+
+            result.push(arr[arr.length - 1]);
+          }
+
+          return result;
+        } else {
+          const result: any[] = [];
+          const arrLen = arr.length;
+          const step = Math.max(1, Math.floor(arrLen / expectCount));
+
+          for (let i = 0; i < arrLen; i += step) {
+            result.push(arr[i]);
+            if (result.length >= expectCount) break;
+          }
+          if (expectCount === 2 && result.length >= 2) {
+            result[1] = arr[arr.length - 1];
+          }
+
+          return result;
+        }
+      }
       function drawAxisTickLine() {
         const draw = (ticks: any, scaler: any) => {
           return ticks.map((tick: string, index: number) => {
@@ -395,6 +564,7 @@ export default memo(
                       formatter={formatter}
                       rotate={rotate}
                       events={triggerEvents}
+                      LabelWidth={LabelWidth}
                     />
                   )}
                   {gridLine && (

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) {