@easyv/charts 1.8.23 → 1.8.25

package/lib/components/Axis.js

@@ -168,8 +168,8 @@ var Label = function Label(_ref5) {
     _ref5$rotate = _ref5.rotate,
     rotate = _ref5$rotate === void 0 ? 0 : _ref5$rotate,
     config = _ref5.config,
-    _ref5$onClick = _ref5.onClick,
-    onClick = _ref5$onClick === void 0 ? defaultEvent : _ref5$onClick,
+    _ref5$events = _ref5.events,
+    events = _ref5$events === void 0 ? defaultEvent : _ref5$events,
     _ref5$config = _ref5.config,
     show = _ref5$config.show,
     style = _ref5$config.style,
@@ -205,7 +205,9 @@ var Label = function Label(_ref5) {
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: className,
-    onClick: onClick,
+    onClick: function onClick(e) {
+      return events(e, "click");
+    },
     "data-data": JSON.stringify({
       x: label
     }),
@@ -217,6 +219,7 @@ var Label = function Label(_ref5) {
       top: y + (isIOS ? iosY : 0)
     })
   }, /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+    ShowType: "normal",
     type: textOverflow,
     speed: speed,
     value: _label,
@@ -236,7 +239,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     ticks = _ref6.ticks,
     formatter = _ref6.formatter,
     rotate = _ref6.rotate,
-    triggerClick = _ref6.triggerClick,
+    triggerEvents = _ref6.triggerEvents,
     _ref6$config = _ref6.config,
     on = _ref6$config.on,
     label = _ref6$config.label,
@@ -331,7 +334,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
           tickSize: _tickSize,
           formatter: formatter,
           rotate: rotate,
-          onClick: triggerClick
+          events: triggerEvents
         }), gridLine && /*#__PURE__*/_react["default"].createElement(_element.Line, (0, _extends2["default"])({
           className: "__easyv-gridLine",
           config: gridLine

package/lib/components/Band.js

@@ -88,7 +88,7 @@ var getBorderRadius = function getBorderRadius(_ref2) {
   return isVertical ? positive ? "0px " + seriesWidth + "px " + seriesWidth + "px 0" : seriesWidth + "px 0 0 " + seriesWidth + "px" : positive ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0" : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
-  var triggerClick = _ref3.triggerClick,
+  var triggerEvents = _ref3.triggerEvents,
     indicatorWidth = _ref3.indicatorWidth,
     _ref3$isControlChart = _ref3.isControlChart,
     isControlChart = _ref3$isControlChart === void 0 ? false : _ref3$isControlChart,
@@ -243,7 +243,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       }
     }, bgAttr, {
       onClick: function onClick(e) {
-        return triggerClick(e, "setCurrent");
+        return triggerEvents(e, "setCurrent");
+      },
+      onMouseMove: function onMouseMove(e) {
+        return triggerEvents(e, "mouseenter");
       },
       onMouseEnter: function onMouseEnter() {
         if (isControlChart) {
@@ -265,7 +268,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           });
         }
       },
-      onMouseLeave: function onMouseLeave() {
+      onMouseLeave: function onMouseLeave(e) {
+        triggerEvents(e, "mouseleave");
         if (isControlChart && !auto) {
           setCtlTip(function (pre) {
             return {

package/lib/components/CartesianChart.js

@@ -81,6 +81,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     curXLabel = _useState4[0],
     setCurXLabel = _useState4[1];
   var isIOS = context.isIOS,
+    scale = context.scale,
+    screenPos = context.screenPos,
     chartWidth = context.width,
     chartHeight = context.height,
     triggerOnRelative = context.triggerOnRelative,
@@ -265,16 +267,32 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   };
   var onInteraction = (0, _react.useCallback)(function (e, type) {
     e.stopPropagation();
+    var _e$nativeEvent = e.nativeEvent,
+      pageX = _e$nativeEvent.pageX,
+      pageY = _e$nativeEvent.pageY;
     var data = e.currentTarget.dataset.data;
     var _data = JSON.parse(data);
+    var _scale$current = (0, _slicedToArray2["default"])(scale.current, 2),
+      scaleX = _scale$current[0],
+      scaleY = _scale$current[1];
+    var _screenPos$current = screenPos.current,
+      left = _screenPos$current.left,
+      top = _screenPos$current.top;
+    var eventData = _objectSpread(_objectSpread({}, _data), {}, {
+      xPos: (pageX - left) * scaleX,
+      yPos: (pageY - top) * scaleY
+    });
     if (type == "setCurrent") {
       setCurXLabel(function (pre) {
         return pre == _data.x ? "" : _data.x;
       });
+      triggerOnRelative("click", eventData);
+      onEmit("click", eventData);
+    } else {
+      triggerOnRelative(type, eventData);
+      onEmit(type, eventData);
     }
-    triggerOnRelative('click', _data);
-    onEmit("click", _data);
-  }, [triggerOnRelative, onEmit]);
+  }, [triggerOnRelative, onEmit, scale]);
 
   /**
    * 控制图相关
@@ -538,7 +556,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       ref: function ref(d) {
         axisElList.current[index] = d;
       },
-      triggerClick: onInteraction,
+      triggerEvents: onInteraction,
       xLineRange: xLineRange,
       yLineRange: yLineRange,
       controlInfo: controlInfo,
@@ -601,7 +619,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       ,
       isControlChart: !!control,
       indicatorWidth: indicatorWidth,
-      triggerClick: onInteraction,
+      triggerEvents: onInteraction,
       setCtlTip: setCtlTip,
       isXRepeat: isXRepeat
     }));
@@ -620,7 +638,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       bandLength: bandLength,
       xAxis: axisX,
       yAxis: yAxis,
-      triggerClick: onInteraction
+      triggerEvents: onInteraction
     }));
   }), /*#__PURE__*/_react["default"].createElement("g", null, control && zIndex != "bottom" && ctlIndicatorList.map(function (item, index) {
     var x = axisX.scaler(item.tick);

package/lib/components/Chart.js

@@ -30,7 +30,7 @@ var getCallbackData = function getCallbackData(action, callbacks, data) {
         target = _ref.target,
         _action = _ref.actions;
       if (action === _action) {
-        callbackData[target] = data[origin];
+        callbackData[target] = origin ? data[origin] : data;
       }
     });
   }
@@ -64,19 +64,23 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     active = _useState2[0],
     setActive = _useState2[1];
   var scaleRef = (0, _react.useRef)([1, 1]);
+  var screenPosRef = (0, _react.useRef)({
+    left: 0,
+    top: 0
+  });
   var triggerOnRelative = (0, _react.useCallback)(function (action, data) {
     if (!interaction) return;
     var callbacks = interaction.callbacks,
       remoteControls = interaction.remoteControls;
     var callbackData = getCallbackData(action, callbacks, data);
-    if (JSON.stringify(callbackData) != "{}") {
+    if (Object.keys(callbackData).length > 0) {
       onRelative && onRelative(id, callbackData);
       remoteControls && emitEvent && remoteControls.forEach(function (o) {
         var control = JSON.parse(o.control);
-        if (control.screen && control.type && control.type === 'callback') {
+        if (control.screen && control.type && control.type === "callback") {
           emitEvent({
             screen: control.screen,
-            type: 'callback',
+            type: "callback",
             callbackData: callbackData
           });
         }
@@ -84,7 +88,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     }
   }, [JSON.stringify(interaction)]);
   var onEmit = (0, _react.useCallback)(function () {
-    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'click';
+    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "click";
     var data = arguments.length > 1 ? arguments[1] : undefined;
     return emit && emit(type, data);
   }, [emit]);
@@ -95,6 +99,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       //是否为IOS设备
       scale: scaleRef,
       //大屏的缩放比
+      screenPos: screenPosRef,
+      //大屏的偏移位置
       width: chartWidth,
       height: chartHeight,
       triggerOnRelative: triggerOnRelative,
@@ -121,7 +127,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var data = checkData(originData);
   return /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, {
     value: context
-  }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
+  }, type == "pie" ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
     id: id,
     config: config,
     data: data,
@@ -142,8 +148,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
         var scale = transform ? transform.match(/^scale\((.+)\)$/)[1] : "1,1";
         var arr = scale.split(",");
         scaleRef.current = [1 / arr[0], 1 / (arr.length === 1 ? arr[0] : arr[1])]; //这里做一次除法，后面就可以用乘法计算值了
+        screenPosRef.current = {
+          left: parseFloat(dom.style.left),
+          top: parseFloat(dom.style.top)
+        };
       }
-    }, 50);
+    }, 100);
   }
   //预检数据格式是否规范
   function checkData(data) {

package/lib/components/Label.js

@@ -51,7 +51,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _ref$config$paddingIn = _ref$config.paddingInner,
     paddingOuter = _ref$config$paddingIn === void 0 ? 0 : _ref$config$paddingIn,
     _ref$config$showType = _ref$config.showType,
-    seriesType = _ref$config$showType === void 0 ? 'bar' : _ref$config$showType,
+    seriesType = _ref$config$showType === void 0 ? "bar" : _ref$config$showType,
     _ref$config$highlight = _ref$config.highlight,
     _ref$config$highlight2 = _ref$config$highlight === void 0 ? {} : _ref$config$highlight,
     showHighlight = _ref$config$highlight2.show,
@@ -72,7 +72,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     yScaler = _ref$yAxis.scaler,
     isClipAxis = _ref$yAxis.isClipAxis,
     clipValue = _ref$yAxis.clipValue,
-    triggerClick = _ref.triggerClick;
+    triggerEvents = _ref.triggerEvents;
   var selectConfig = other;
   if (selectStyle) {
     var show = selectStyle.show,
@@ -183,7 +183,15 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     return /*#__PURE__*/React.createElement("g", {
       key: i,
       onClick: function onClick(e) {
-        return triggerClick(e, "setCurrent");
+        return triggerEvents(e, "setCurrent");
+      },
+      onMouseMove: function onMouseMove(e) {
+        console.log("mousemove", data, e);
+        triggerEvents(e, "mouseenter");
+      },
+      onMouseLeave: function onMouseLeave(e) {
+        console.log("mouseleave", e);
+        triggerEvents(e, "mouseleave");
       },
       style: {
         cursor: "pointer"

package/lib/components/Legend.js

@@ -22,8 +22,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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) { (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; }
 var defaultFont = {
-  fontStyle: 'normal',
-  fontWeight: 'normal'
+  fontStyle: "normal",
+  fontWeight: "normal"
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var _config$value, _config$percent, _config$value2, _config$value3, _config$name;
@@ -33,7 +33,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     _ref$config = _ref.config,
     show = _ref$config.show,
     _ref$config$order = _ref$config.order,
-    order = _ref$config$order === void 0 ? '' : _ref$config$order,
+    order = _ref$config$order === void 0 ? "" : _ref$config$order,
     interactive = _ref$config.interactive,
     LegendType = _ref$config.LegendType,
     maxWidth = _ref$config.maxWidth,
@@ -41,7 +41,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     speed = _ref$config.speed,
     _ref$config$layout = _ref$config.layout,
     _ref$config$layout$al = _ref$config$layout.alignment,
-    alignment = _ref$config$layout$al === void 0 ? 'right center' : _ref$config$layout$al,
+    alignment = _ref$config$layout$al === void 0 ? "right center" : _ref$config$layout$al,
     gridTemplateColumns = _ref$config$layout.gridTemplateColumns,
     _ref$config$layout$gr = _ref$config$layout.gridGap,
     gridColumnGap = _ref$config$layout$gr.gridColumnGap,
@@ -62,7 +62,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     opacity = _ref$config$unselect3 === void 0 ? 1 : _ref$config$unselect3,
     filterData = _ref.filterData,
     formatter = _ref.formatter,
-    judge = _ref.judge;
+    judge = _ref.judge,
+    pieClick = _ref.pieClick;
   if (!show) return null;
   var ref_container = (0, _react.useRef)(null); // 滚动容器
   var ref_scrollTop = (0, _react.useRef)(0); // 当前滚动距离
@@ -75,7 +76,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   // 初始化行高
   (0, _react.useEffect)(function () {
     if (ref_container.current) {
-      var rowHeight = ref_container.current.querySelector('li').clientHeight + gridRowGap;
+      var rowHeight = ref_container.current.querySelector("li").clientHeight + gridRowGap;
       setScrollStep(rowHeight);
     }
   }, [gridRowGap]);
@@ -106,11 +107,11 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     }
     table.scrollTo({
       top: ref_scrollTop.current,
-      behavior: 'smooth'
+      behavior: "smooth"
     });
   };
   var _series = (0, _utils.sortPie)(series, order);
-  var _alignment$split = alignment.split(' '),
+  var _alignment$split = alignment.split(" "),
     _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
     _alignment = _alignment$split2[0],
     position = _alignment$split2[1];
@@ -119,7 +120,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     var dataset = e.currentTarget.dataset;
     var name = dataset.name;
     filterData && interactive && filterData(name);
-  }, [interactive, filterData]);
+    pieClick && pieClick(e);
+  }, [interactive, filterData, pieClick]);
   if (judge == 0) {
     _series.forEach(function (d) {
       d.percent = 0;
@@ -129,75 +131,77 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   // 计算最大宽度
   var valueFont = ((_config$value = config.value) === null || _config$value === void 0 ? void 0 : _config$value.font) || {};
   var percentFont = ((_config$percent = config.percent) === null || _config$percent === void 0 ? void 0 : _config$percent.font) || {};
-  var valueSuffix = ((_config$value2 = config.value) === null || _config$value2 === void 0 || (_config$value2 = _config$value2.suffix) === null || _config$value2 === void 0 ? void 0 : _config$value2.text) || '';
+  var valueSuffix = ((_config$value2 = config.value) === null || _config$value2 === void 0 || (_config$value2 = _config$value2.suffix) === null || _config$value2 === void 0 ? void 0 : _config$value2.text) || "";
   var valueSplitConfig = ((_config$value3 = config.value) === null || _config$value3 === void 0 ? void 0 : _config$value3.splitConfig) || {};
   var getValueStr = function getValueStr(item) {
     var _ref2, _item$data$y, _item$data;
-    var valueStr = ((_ref2 = (_item$data$y = (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.y) !== null && _item$data$y !== void 0 ? _item$data$y : item.value) !== null && _ref2 !== void 0 ? _ref2 : '') + (valueSuffix || '');
+    var valueStr = ((_ref2 = (_item$data$y = (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.y) !== null && _item$data$y !== void 0 ? _item$data$y : item.value) !== null && _ref2 !== void 0 ? _ref2 : "") + (valueSuffix || "");
     if (valueSplitConfig.show && valueSplitConfig.separator) {
       valueStr = valueStr.toString().replace(/\B(?=(\d{3})+(?!\d))/g, valueSplitConfig.separator);
     }
     return valueStr;
   };
   var valueMaxWidth = Math.max.apply(Math, (0, _toConsumableArray2["default"])(_series.map(function (item) {
-    return parseFloat(getCanvasTextWidth(getValueStr(item), valueFont.letterSpacing || 0, "".concat(valueFont.fontSize || 12, "px ").concat(valueFont.fontFamily || 'Arial')));
+    return parseFloat(getCanvasTextWidth(getValueStr(item), valueFont.letterSpacing || 0, "".concat(valueFont.fontSize || 12, "px ").concat(valueFont.fontFamily || "Arial")));
   })));
   var percentMaxWidth = Math.max.apply(Math, (0, _toConsumableArray2["default"])(_series.map(function (item) {
     var _item$data2;
-    var percentStr = (item.percent !== undefined ? item.percent : (_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2.percent) + '%';
-    return parseFloat(getCanvasTextWidth(percentStr, percentFont.letterSpacing || 0, "".concat(percentFont.fontSize || 12, "px ").concat(percentFont.fontFamily || 'Arial')));
+    var percentStr = (item.percent !== undefined ? item.percent : (_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2.percent) + "%";
+    return parseFloat(getCanvasTextWidth(percentStr, percentFont.letterSpacing || 0, "".concat(percentFont.fontSize || 12, "px ").concat(percentFont.fontFamily || "Arial")));
   })));
   var nameMaxWidth = ((_config$name = config.name) === null || _config$name === void 0 ? void 0 : _config$name.maxWidth) || 80;
   var stylePieOrAxis = formatter ? _objectSpread(_objectSpread({
-    display: 'flex',
+    display: "flex",
     alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
     flexDirection: "column",
-    position: 'absolute'
+    position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
-    height: loop.show ? height : 'auto',
-    overflowY: loop.show ? 'scroll' : 'auto'
+    height: loop.show ? height : "auto",
+    overflowY: loop.show ? "scroll" : "auto"
   }) : _objectSpread(_objectSpread({
-    display: 'flex',
+    display: "flex",
     flexWrap: "wrap",
     alignContent: alignment.split(" ")[0] == "center" && (alignment.split(" ")[1] == "left" || alignment.split(" ")[1] == "right") ? alignment.split(" ")[1] == "left" ? "flex-start" : "flex-end" : alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
     flexDirection: "column",
-    position: 'absolute'
+    position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
-    height: loop.show ? height : 'auto',
-    overflowY: loop.show ? 'scroll' : 'auto'
+    height: loop.show ? height : "auto",
+    overflowY: loop.show ? "scroll" : "auto"
   });
   return LegendType == "FixedWidth" ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
     style: _objectSpread(_objectSpread({
-      position: 'absolute',
-      display: 'flex'
+      position: "absolute",
+      display: "flex"
     }, getPosition(position, _alignment, x, y)), {}, {
-      height: loop.show ? height : 'auto',
-      overflowY: loop.show ? 'scroll' : 'auto'
+      height: loop.show ? height : "auto",
+      overflowY: loop.show ? "scroll" : "auto"
     }),
     ref: ref_container
   }, /*#__PURE__*/_react["default"].createElement("ul", {
     style: {
-      display: 'grid',
-      gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
-      gridTemplateColumns: formatter ? "".concat(nameMaxWidth, "px ").concat(valueMaxWidth, "px ").concat(percentMaxWidth, "px") : 'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)' //饼图或者柱状图配合不同的图例显示格式
+      display: "grid",
+      gridGap: gridRowGap + "px " + gridColumnGap + "px",
+      gridTemplateColumns: formatter ? "".concat(nameMaxWidth, "px ").concat(valueMaxWidth, "px ").concat(percentMaxWidth, "px") : "repeat(" + Math.min(gridTemplateColumns, length) + ", 1fr)" //饼图或者柱状图配合不同的图例显示格式
     }
-  }, _series.map(function (series, index) {
+  }, _series.map(function (series, i) {
     var _series$config;
     var type = series.type,
       name = series.name,
       displayName = series.displayName,
       icon = series.icon,
-      selected = series.selected;
+      selected = series.selected,
+      index = series.index;
     var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config = series.config) === null || _series$config === void 0 || (_series$config = _series$config.line) === null || _series$config === void 0 ? void 0 : _series$config.type);
     return /*#__PURE__*/_react["default"].createElement("li", {
-      key: index,
+      key: i,
       onClick: onClick,
-      "data-name": name,
+      "data-name": displayName || name,
+      "data-index": index,
       style: {
-        display: 'flex',
+        display: "flex",
         opacity: selected === false ? opacity / 100 : 1,
-        alignItems: 'center',
+        alignItems: "center",
         cursor: "pointer",
         gap: _icon.gap
       }
@@ -212,8 +216,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       value: displayName || name,
       style: _objectSpread(_objectSpread({}, font), {}, {
         width: maxWidth,
-        fontStyle: italic ? 'italic' : 'normal',
-        fontWeight: bold ? 'bold' : 'normal'
+        fontStyle: italic ? "italic" : "normal",
+        fontWeight: bold ? "bold" : "normal"
       }),
       speed: speed
     })));
@@ -225,29 +229,31 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     return /*#__PURE__*/_react["default"].createElement("ul", {
       key: indexs,
       style: (0, _defineProperty2["default"])({
-        display: 'flex',
-        width: 'fit-content',
+        display: "flex",
+        width: "fit-content",
         justifyContent: alignment.split(" ")[0] == "left" ? "flex-start" : alignment.split(" ")[0] == "center" ? "center" : "flex-end",
         marginBottom: "0px",
         gap: "".concat(gridRowGap, "px  ").concat(gridColumnGap, "px")
       }, "marginBottom", gridRowGap + "px")
-    }, _series.map(function (series, index) {
-      if (Math.floor(index / gridTemplateColumns) == indexs) {
+    }, _series.map(function (series, i) {
+      if (Math.floor(i / gridTemplateColumns) == indexs) {
         var _series$config2;
         var type = series.type,
           name = series.name,
           displayName = series.displayName,
           icon = series.icon,
-          selected = series.selected;
+          selected = series.selected,
+          index = series.index;
         var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config2 = series.config) === null || _series$config2 === void 0 || (_series$config2 = _series$config2.line) === null || _series$config2 === void 0 ? void 0 : _series$config2.type);
         return /*#__PURE__*/_react["default"].createElement("li", {
-          key: index,
+          key: i,
           onClick: onClick,
-          "data-name": name,
+          "data-name": displayName || name,
+          "data-index": index,
           style: {
-            display: 'flex',
+            display: "flex",
             opacity: selected === false ? opacity / 100 : 1,
-            alignItems: 'center',
+            alignItems: "center",
             cursor: "pointer",
             gap: _icon.gap
           }
@@ -262,8 +268,8 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           type: "ellipsis",
           value: displayName || name,
           style: _objectSpread(_objectSpread({}, font), {}, {
-            fontStyle: italic ? 'italic' : 'normal',
-            fontWeight: bold ? 'bold' : 'normal',
+            fontStyle: italic ? "italic" : "normal",
+            fontWeight: bold ? "bold" : "normal",
             minWidth: getCanvasTextWidth(displayName ? displayName.substring(0, 5) || name.substring(0, 5) : "", font.letterSpacing, "".concat(font.fontSize, "px ").concat(font.fontFamily))
           }),
           speed: speed
@@ -276,39 +282,39 @@ var getPosition = function getPosition(position, alignment) {
   var x = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var y = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   switch (position) {
-    case 'top':
+    case "top":
       return {
-        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
-        right: alignment == 'right' ? 10 : '',
+        left: alignment == "left" ? 5 : alignment == "center" ? "50%" : "",
+        right: alignment == "right" ? 10 : "",
         top: 5,
-        transform: "translate3d(calc(".concat(alignment == 'center' ? '-50%' : '0px', " + ").concat(x, "px), ").concat(y, "px, 0px)")
+        transform: "translate3d(calc(".concat(alignment == "center" ? "-50%" : "0px", " + ").concat(x, "px), ").concat(y, "px, 0px)")
       };
-    case 'right':
+    case "right":
       return {
-        top: '50%',
+        top: "50%",
         right: 10,
         transform: "translate3d(".concat(x, "px, calc(-50% + ").concat(y, "px), 0px)")
       };
-    case 'left':
+    case "left":
       return {
-        top: '50%',
+        top: "50%",
         left: 5,
         transform: "translate3d(".concat(x, "px, calc(-50% + ").concat(y, "px), 0px)")
       };
     default:
       // bottom
       return {
-        left: alignment == 'left' ? 5 : alignment == 'center' ? '50%' : '',
-        right: alignment == 'right' ? 10 : '',
+        left: alignment == "left" ? 5 : alignment == "center" ? "50%" : "",
+        right: alignment == "right" ? 10 : "",
         bottom: 5,
-        transform: "translate3d(calc(".concat(alignment == 'center' ? '-50%' : '0px', " + ").concat(x, "px), ").concat(y, "px, 0px)")
+        transform: "translate3d(calc(".concat(alignment == "center" ? "-50%" : "0px", " + ").concat(x, "px), ").concat(y, "px, 0px)")
       };
   }
 };
 var getCanvasTextWidth = function getCanvasTextWidth(text, letterSpacing) {
-  var font = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '16px Arial';
-  var canvas = document.createElement('canvas');
-  var ctx = canvas.getContext('2d');
+  var font = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "16px Arial";
+  var canvas = document.createElement("canvas");
+  var ctx = canvas.getContext("2d");
   ctx.font = font;
   return ctx.measureText(text).width + text.length * letterSpacing + "px";
   // return ctx.measureText(text).width+(text.length-1)*letterSpacing+"px";//-1有bug

package/lib/components/PieChart.js

@@ -627,6 +627,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
         percent: arc.percent.toFixed(legendPrecision)
       });
     }),
+    pieClick: onClick,
     formatter: formatter,
     judge: judgeData
   }))) : /*#__PURE__*/_react["default"].createElement("div", {
@@ -795,6 +796,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
         percent: arc.percent.toFixed(legendPrecision)
       });
     }),
+    pieClick: onClick,
     formatter: formatter,
     judge: judgeData
   })));