@easyv/charts 1.9.8 → 1.9.10

package/lib/components/Band.js

@@ -13,6 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _d3v = require("d3v7");
 var _utils = require("../utils");
+var _lodash = require("lodash");
 var _excluded = ["show", "extent"],
   _excluded2 = ["pattern", "seriesIntervalWidth", "paddingInner", "highlight"],
   _excluded3 = ["bgAttr"];
@@ -154,6 +155,13 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     seriesStart = _getSeriesInfo.seriesStart;
   var _data = showHighlight ? getHighlightData(data, extent) : data;
   var isVertical = direction === "vertical";
+  var handleMouseMove = (0, _react.useCallback)((0, _lodash.throttle)(function (e) {
+    if (triggerEvents) {
+      triggerEvents(e, "setCurrent");
+    }
+  }, 100),
+  // 每 100ms 最多执行一次
+  [triggerEvents]);
   return /*#__PURE__*/_react["default"].createElement("g", {
     className: "__easyv-band"
   }, _data.map(function (_ref4, i) {
@@ -243,10 +251,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       }
     }, bgAttr, {
       onClick: function onClick(e) {
-        return triggerEvents ? triggerEvents(e, "setCurrent") : "";
+        triggerEvents ? triggerEvents(e, "setCurrent") : "";
       },
       onMouseMove: function onMouseMove(e) {
-        return triggerEvents ? triggerEvents(e, "mouseenter") : "";
+        triggerEvents ? handleMouseMove : "";
       },
       onMouseEnter: function onMouseEnter() {
         if (isControlChart) {

package/lib/components/Chart.js

@@ -53,7 +53,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     emit = _ref2.emit,
     emitEvent = _ref2.emitEvent,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  console.log("999");
   var width = props.width,
     height = props.height;
   var isIOS = (0, _react.useRef)(/iPad|iPhone|iPod|iOS/i.test(navigator.userAgent) || /Mac OS X/i.test(navigator.userAgent) && !/Chrome/i.test(navigator.userAgent));

package/lib/formatter/legend.js

@@ -88,6 +88,7 @@ var pieLegendFormatter = exports.pieLegendFormatter = function pieLegendFormatte
     })
   }), showValue && /*#__PURE__*/React.createElement("span", {
     style: _objectSpread(_objectSpread({
+      display: "flex",
       whiteSpace: "nowrap"
     }, (0, _utils.getFontStyle)(valueFont)), {}, {
       marginLeft: valueGap,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.9.8",
+  "version": "1.9.10",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -22,6 +22,7 @@
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^16.2.4",
     "@types/d3": "^7.0.0",
+    "@types/lodash": "^4.17.21",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "babel-plugin-transform-import-styles": "^0.0.11",
@@ -35,6 +36,7 @@
     "@easyv/utils": "^0.0.50",
     "d3v7": "npm:d3@^7.0.0",
     "gitignore": "^0.7.0",
+    "lodash": "^4.17.21",
     "mrm": "^4.0.0",
     "popmotion": "^9.3.6",
     "react": "^17.0.2",
@@ -52,4 +54,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/Band.tsx

@@ -1,10 +1,10 @@
 /**
  * （柱状/条形）图柱子
  */
-import React, { memo, Fragment } from "react";
+import React, { memo, Fragment, useCallback } from "react";
 import { min, max } from "d3v7";
 import { getBandBackground, getMultiColorStr, getSeriesInfo } from "../utils";
-
+import { throttle } from "lodash";
 const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
   switch (extent) {
     case "min":
@@ -40,15 +40,15 @@ const getAttr = ({
   const len = length ? length : 0.1; //柱子长度
   if (isVertical) {
     return {
-      width: Math.max(0,len),
-      height: Math.max(0,seriesWidth),
+      width: Math.max(0, len),
+      height: Math.max(0, seriesWidth),
       x: y,
       y: x,
       bgAttr: {
         x: 0,
         y: x,
-        width: Math.max(0,len + x),
-        height: Math.max(0,seriesWidth),
+        width: Math.max(0, len + x),
+        height: Math.max(0, seriesWidth),
       },
     };
   } else {
@@ -60,8 +60,8 @@ const getAttr = ({
       bgAttr: {
         x,
         y: 0,
-        width: Math.max(0,seriesWidth),
-        height: Math.max(0,y + len),
+        width: Math.max(0, seriesWidth),
+        height: Math.max(0, y + len),
       },
     };
   }
@@ -136,7 +136,14 @@ export default memo(
     });
     const _data = showHighlight ? getHighlightData(data, extent) : data;
     const isVertical = direction === "vertical";
-
+    const handleMouseMove = useCallback(
+      throttle((e) => {
+        if (triggerEvents) {
+          triggerEvents(e, "setCurrent");
+        }
+      }, 100), // 每 100ms 最多执行一次
+      [triggerEvents]
+    );
     return (
       <g className="__easyv-band">
         {_data.map(
@@ -232,8 +239,12 @@ export default memo(
                     cursor: "pointer",
                   }}
                   {...bgAttr}
-                  onClick={(e) => triggerEvents?triggerEvents(e, "setCurrent"):""}
-                  onMouseMove={(e) => triggerEvents?triggerEvents(e, "mouseenter"):""}
+                  onClick={(e) => {
+                    triggerEvents ? triggerEvents(e, "setCurrent") : "";
+                  }}
+                  onMouseMove={(e) => {
+                    triggerEvents ? handleMouseMove : "";
+                  }}
                   onMouseEnter={() => {
                     if (isControlChart) {
                       setCtlTip((pre: any) => ({
@@ -251,7 +262,7 @@ export default memo(
                     }
                   }}
                   onMouseLeave={(e) => {
-                    triggerEvents?triggerEvents(e, "mouseleave"):"";
+                    triggerEvents ? triggerEvents(e, "mouseleave") : "";
                     if (isControlChart && !auto) {
                       setCtlTip((pre: any) => ({
                         show: false,

package/src/components/Chart.js

@@ -44,8 +44,6 @@ const Chart = memo(
     emitEvent,
     ...props
   }) => {
-    console.log("999");
-    
     const { width, height } = props;
     const isIOS = useRef(
       /iPad|iPhone|iPod|iOS/i.test(navigator.userAgent) ||

package/src/formatter/legend.js

@@ -75,6 +75,7 @@ export const pieLegendFormatter = (
         {showValue && (
           <span
             style={{
+              display:"flex",
               whiteSpace:"nowrap",
               ...getFontStyle(valueFont),
               marginLeft: valueGap,