@easyv/charts 1.10.13 → 1.10.15

package/change.md

@@ -0,0 +1,26 @@
+### 1.饼图图例的类目配置项下有一个布局类型配置项，当布局类型=固定宽度时，沿用当前的逻辑，当布局类型=自适应时，需要进行如下调整：
+
+- 当图例位置在左侧时或右侧时，调用updateConfig函数修改组件的边距配置项，图例在右侧时，上下左右边距分别为：24,24,0,200，图例在左侧时，上下左右边距分别为，24,24,200,0。图例将纵向排成一列展示，每一行图例总宽度不能超过200px，避免和饼图区域产生重叠，如果文字太长，则默认按溢出省略号展示，文本不得换行。
+- 当图例位置在正上方或正下方时，调用updateConfig函数修改组件的边距配置项，图例在正上方时，上下左右边距分别为：150,24,24,24，图例在正下方时，上下左右边距分别为，24,150,24,24。图例将是横向排列的流式布局，一行满时，图例会自动换行，但是图例文本不换行，最多就是省略号显示。
+- 当图例不显示时，调用updateConfig函数修改组件的边距配置项，上下左右边距分别为：24,24,24,24。
+
+### 2.如果饼图需要显示中间的当前值，当前值的类目名称需要水平居中显示。
+
+### updateConfig函数说明：
+
+updateConfig({id？, type, payload}) （需要平台 v3.13.0版本及以上才支持）
+● id：可不传，默认为当前组件的id，如果是子组件的更新，则必须穿子组件的id，不然会更新失败。
+● type: 'config' | 'data' | ’actions' | 'camera' | 'triggers'(v5.14.0及以上支持)
+○ config: 更新组件的configuration属性。
+■ 在v4.13.0之前，用于更新config，只能是组件进入编辑模式，即edit为true的时候才支持
+■ v4.13.0及以上，支持组件在非编辑模式下，也可以支持更新config配置，但只在编辑页面才生效。
+○ data: 更新组件的data静态数据
+○ actions: 用于动态更新组件的actions配置。使用场景为：自定义动作中可能存在一些动态的数据，需要在其他配置项发生变化的时候，需要动态更新，比如场景的镜头数据等。
+○ camera: 该类型是在镜头数据保存的时候才需要用到，一般不是三维的镜头数据使用不上。
+● payload:
+○ 当type === 'data'时，payload为静态数据数组，
+○ 当type === 'triggers'时，payload为 { name: string; value: string;}[]
+○ 否则为{path, field, value} | {path, field, value}[]， carema 则为镜头的数据。
+○ path: string 需要更新的config属性路径 如['chart', 'component', 'color']
+○ field: string 需要更新的控件属性 默认为value
+○ value: any 控件属性对应的值

package/config.json

@@ -0,0 +1,119 @@
+{
+    "dimension": {
+        "chartPosition": {
+            "left": 100,
+            "top": 100
+        },
+        "chartDimension": {
+            "width": 420,
+            "height": 210
+        }
+    },
+    "margin": {
+        "marginTop": 30,
+        "marginBottom": 30,
+        "marginLeft": 0,
+        "marginRight": 120
+    },
+    "legend": {
+        "show": true,
+        "order": "",
+        "iconSize": {
+            "width": 10,
+            "height": 10
+        },
+        "iconGap": 5,
+        "layout": {
+            "alignment": "center right",
+            "gridTemplateColumns": 1,
+            "gridGap": {
+                "gridRowGap": 20,
+                "gridColumnGap": 10
+            },
+            "translate": {
+                "x": 0,
+                "y": 0
+            }
+        },
+        "name": {
+            "show": true,
+            "font": {
+                "fontFamily": "SourceHanSansCN-Medium",
+                "fontSize": 12,
+                "color": "rgba(230, 247, 255, 1)",
+                "bold": false,
+                "italic": false,
+                "letterSpacing": 0
+            },
+            "layoutMode": "Adaptive",
+            "maxWidth": 80,
+            "textOverflow": "ellipsis",
+            "speed": 5,
+            "translate": {
+                "x": 0,
+                "y": 0
+            }
+        },
+        "percent": {
+            "show": true,
+            "precision": 0,
+            "gap": 15,
+            "sameColor": true,
+            "align": "left",
+            "font": {
+                "fontFamily": "SourceHanSansCN-Medium",
+                "fontSize": 12,
+                "color": "rgba(230, 247, 255, 1)",
+                "bold": false,
+                "italic": false,
+                "letterSpacing": 0
+            },
+            "translate": {
+                "x": 0,
+                "y": 0
+            }
+        },
+        "value": {
+            "show": false,
+            "splitConfig": {
+                "show": false,
+                "splitCount": 3,
+                "style": "default",
+                "separator": ",",
+                "fontFamily": "SourceHanSansCN-Medium",
+                "margin": {
+                    "left": 0,
+                    "right": 0
+                }
+            },
+            "suffix": {
+                "show": true,
+                "text": "",
+                "fontSize": 12,
+                "translate": {
+                    "x": 0,
+                    "y": 0
+                }
+            },
+            "gap": 0,
+            "sameColor": false,
+            "align": "left",
+            "font": {
+                "fontFamily": "SourceHanSansCN-Medium",
+                "fontSize": 12,
+                "color": "rgba(230, 247, 255, 1)",
+                "bold": false,
+                "italic": false,
+                "letterSpacing": 0
+            },
+            "translate": {
+                "x": 0,
+                "y": 0
+            }
+        },
+        "loop": {
+            "show": false,
+            "interval": 3
+        }
+    }
+}

package/lib/components/Chart.js

@@ -13,8 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _context = require("../context");
 var _ = require(".");
-var _d3v = require("d3v7");
-var _excluded = ["id", "type", "config", "config", "data", "onRelative", "emit", "emitEvent"];
+var _excluded = ["id", "type", "config", "config", "data", "onRelative", "emit", "emitEvent", "updateConfig"];
 /**
  * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
  */
@@ -41,7 +40,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     type = _ref2.type,
     config = _ref2.config,
     _ref2$config = _ref2.config,
-    axes = _ref2$config.axes,
     _ref2$config$chart$ma = _ref2$config.chart.margin,
     marginRight = _ref2$config$chart$ma.marginRight,
     marginLeft = _ref2$config$chart$ma.marginLeft,
@@ -52,6 +50,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     onRelative = _ref2.onRelative,
     emit = _ref2.emit,
     emitEvent = _ref2.emitEvent,
+    updateConfig = _ref2.updateConfig,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   var width = props.width,
     height = props.height;
@@ -105,9 +104,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       height: chartHeight,
       triggerOnRelative: triggerOnRelative,
       svg: svg,
-      onEmit: onEmit
+      onEmit: onEmit,
+      updateConfig: updateConfig
     };
-  }, [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]);
+  }, [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit, updateConfig]);
   (0, _react.useEffect)(function () {
     var isAnimation = window.screenConfig ? window.screenConfig.isAnimation : true; //大屏的全局设置是否允许开启动画，false为不允许
     if (!isAnimation) setActive(false);

package/lib/components/Legend.js

@@ -12,6 +12,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("../utils");
+var _legendPlacement = require("../utils/legendPlacement");
 var _TextOverflow = _interopRequireDefault(require("./TextOverflow"));
 var _excluded = ["italic", "bold"];
 /**
@@ -26,7 +27,7 @@ var defaultFont = {
   fontWeight: "normal"
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _config$value, _config$percent, _config$value2, _config$value3, _config$name;
+  var _config$value, _config$percent, _config$value2, _config$value3, _config$name, _ref3;
   var series = _ref.series,
     height = _ref.height,
     data = _ref.data,
@@ -53,6 +54,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     y = _ref$config$layout$tr.y,
     _ref$config$loop = _ref$config.loop,
     loop = _ref$config$loop === void 0 ? {} : _ref$config$loop,
+    _ref$config$name = _ref$config.name,
+    _ref$config$name2 = _ref$config$name === void 0 ? {} : _ref$config$name,
+    layoutMode = _ref$config$name2.layoutMode,
     _ref$config$font = _ref$config.font,
     _ref$config$font2 = _ref$config$font === void 0 ? defaultFont : _ref$config$font,
     italic = _ref$config$font2.italic,
@@ -65,7 +69,15 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     filterData = _ref.filterData,
     formatter = _ref.formatter,
     judge = _ref.judge,
-    pieClick = _ref.pieClick;
+    pieClick = _ref.pieClick,
+    _ref$isPieChart = _ref.isPieChart,
+    isPieChart = _ref$isPieChart === void 0 ? false : _ref$isPieChart,
+    chartWidth = _ref.chartWidth,
+    componentWidth = _ref.componentWidth,
+    _ref$marginLeft = _ref.marginLeft,
+    marginLeft = _ref$marginLeft === void 0 ? 0 : _ref$marginLeft,
+    _ref$marginRight = _ref.marginRight,
+    marginRight = _ref$marginRight === void 0 ? 0 : _ref$marginRight;
   if (!show) return null;
   var ref_container = (0, _react.useRef)(null); // 滚动容器
   var ref_scrollTop = (0, _react.useRef)(0); // 当前滚动距离
@@ -113,10 +125,12 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     });
   };
   var _series = (0, _utils.sortPie)(series, order, columnsSeries);
-  var _alignment$split = alignment.split(" "),
-    _alignment$split2 = (0, _slicedToArray2["default"])(_alignment$split, 2),
-    _alignment = _alignment$split2[0],
-    position = _alignment$split2[1];
+  var _parseLegendAlignment = (0, _legendPlacement.parseLegendAlignment)(alignment),
+    _alignment = _parseLegendAlignment.alignment,
+    position = _parseLegendAlignment.position,
+    isCenterTopOrBottom = _parseLegendAlignment.isCenterTopOrBottom,
+    isSidePlacement = _parseLegendAlignment.isSidePlacement;
+  var legendMainAlign = _alignment == "left" ? "flex-start" : _alignment == "center" ? "center" : "flex-end";
   var length = _series.length;
   var onClick = (0, _react.useCallback)(function (fieldName) {
     return function (e) {
@@ -188,6 +202,76 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     });
     return Math.max(maxMeasured, maxCfg);
   });
+  var isPieAdaptive = isPieChart && layoutMode === "Adaptive";
+  var isPieFixedWidthGrid = isPieChart && (layoutMode === "FixedWidth" || (layoutMode == null || layoutMode === "") && LegendType == "FixedWidth");
+  var isFixedWidth = isPieChart ? isPieFixedWidthGrid : LegendType == "FixedWidth";
+  var isSideLegend = isPieAdaptive && isSidePlacement;
+  var isTopBottomAdaptive = isPieAdaptive && isCenterTopOrBottom;
+  var fullWidth = (_ref3 = componentWidth !== null && componentWidth !== void 0 ? componentWidth : chartWidth) !== null && _ref3 !== void 0 ? _ref3 : 0;
+  var legendAreaWidth = Math.max(0, fullWidth - marginLeft - marginRight);
+  var sideLegendMaxWidth = isSideLegend ? Math.max(0, position === "left" || _alignment === "left" ? marginLeft : marginRight) : 0;
+  var isSideLegendOnRight = isSideLegend && (position === "right" || _alignment === "right" && position !== "left");
+  var fixedColumnsPerRow = Math.min(Math.max(1, Number(gridTemplateColumns) || 1), length);
+  var isPieTopBottomFixedMultiCol = isPieChart && isFixedWidth && isCenterTopOrBottom && fixedColumnsPerRow > 1;
+  var formatterExtra = _objectSpread(_objectSpread(_objectSpread({}, config), {}, {
+    valueMaxWidth: valueMaxWidth,
+    percentMaxWidth: percentMaxWidth,
+    nameMaxWidth: nameMaxWidth,
+    otherData: data,
+    columnsSeries: columnsSeries,
+    fieldColumnKeys: fieldColumnKeys,
+    fieldsColumnWidths: fieldsColumnWidths,
+    legendPosition: position,
+    isPieAdaptive: true
+  }, isSideLegend && sideLegendMaxWidth > 0 ? {
+    adaptiveMaxWidth: sideLegendMaxWidth
+  } : {}), isTopBottomAdaptive ? {
+    chartWidth: legendAreaWidth
+  } : {});
+  var renderPieSideItem = function renderPieSideItem(series, i) {
+    var _series$config;
+    var type = series.type,
+      name = series.name,
+      displayName = series.displayName,
+      fieldName = series.fieldName,
+      icon = series.icon,
+      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: i,
+      onClick: onClick(fieldName),
+      "data-name": displayName || name,
+      "data-index": index,
+      style: {
+        display: "flex",
+        width: "max-content",
+        maxWidth: sideLegendMaxWidth || undefined,
+        opacity: selected === false ? opacity / 100 : 1,
+        alignItems: "center",
+        cursor: "pointer",
+        gap: _icon.gap,
+        minWidth: 0,
+        overflow: "hidden",
+        boxSizing: "border-box"
+      }
+    }, formatter ? formatter(series, formatterExtra) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+      style: _objectSpread(_objectSpread({}, _icon), {}, {
+        flexShrink: 0
+      })
+    }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+      type: "ellipsis",
+      value: displayName || name,
+      style: _objectSpread(_objectSpread({}, font), {}, {
+        fontStyle: italic ? "italic" : "normal",
+        fontWeight: bold ? "bold" : "normal",
+        minWidth: 0,
+        flex: "1 1 0%",
+        maxWidth: "100%"
+      }),
+      speed: speed
+    })));
+  };
   var stylePieOrAxis = formatter ? _objectSpread(_objectSpread({
     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",
@@ -198,16 +282,120 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     overflowY: loop.show ? "scroll" : "auto"
   }) : _objectSpread(_objectSpread({
     width: "100%",
-    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",
+    maxWidth: "100%",
+    boxSizing: "border-box",
     position: "absolute"
   }, getPosition(position, _alignment, x, y)), {}, {
     height: loop.show ? height : "auto",
     overflowY: loop.show ? "scroll" : "auto"
   });
-  return LegendType == "FixedWidth" ? /*#__PURE__*/_react["default"].createElement("div", {
+  if (isPieAdaptive && isSideLegend) {
+    var pieAdaptiveWrapperStyle = _objectSpread(_objectSpread({
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      width: "max-content",
+      maxWidth: sideLegendMaxWidth || undefined,
+      alignItems: isSideLegendOnRight ? "flex-end" : "flex-start"
+    }, getPosition(position, _alignment, x, y)), {}, {
+      height: loop.show ? height : "auto",
+      overflowY: loop.show ? "scroll" : "auto"
+    });
+    var pieAdaptiveListStyle = {
+      display: "flex",
+      flexDirection: "column",
+      width: "max-content",
+      maxWidth: "100%",
+      alignItems: isSideLegendOnRight ? "flex-end" : "flex-start",
+      margin: 0,
+      padding: 0,
+      listStyle: "none",
+      gap: "".concat(gridRowGap, "px")
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "__easyv-legend-wrapper",
+      style: pieAdaptiveWrapperStyle,
+      ref: ref_container
+    }, /*#__PURE__*/_react["default"].createElement("ul", {
+      style: pieAdaptiveListStyle
+    }, _series.map(function (series, i) {
+      return renderPieSideItem(series, i);
+    })));
+  }
+  if (isTopBottomAdaptive) {
+    var topBottomWrapperStyle = _objectSpread(_objectSpread({
+      position: "absolute",
+      width: legendAreaWidth || "100%",
+      maxWidth: legendAreaWidth || "100%",
+      boxSizing: "border-box"
+    }, getPosition(position, _alignment, x, y)), {}, {
+      height: loop.show ? height : "auto",
+      overflowY: loop.show ? "scroll" : "auto"
+    });
+    var topBottomListStyle = {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      width: "100%",
+      maxWidth: "100%",
+      boxSizing: "border-box",
+      margin: 0,
+      padding: 0,
+      listStyle: "none",
+      justifyContent: legendMainAlign,
+      gap: "".concat(gridRowGap, "px ").concat(gridColumnGap, "px")
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "__easyv-legend-wrapper",
+      style: topBottomWrapperStyle,
+      ref: ref_container
+    }, /*#__PURE__*/_react["default"].createElement("ul", {
+      style: topBottomListStyle
+    }, _series.map(function (series, i) {
+      var _series$config2;
+      var type = series.type,
+        name = series.name,
+        displayName = series.displayName,
+        fieldName = series.fieldName,
+        icon = series.icon,
+        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: i,
+        onClick: onClick(fieldName),
+        "data-name": displayName || name,
+        "data-index": index,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          width: "max-content",
+          maxWidth: "100%",
+          minWidth: 0,
+          overflow: "hidden",
+          boxSizing: "border-box",
+          opacity: selected === false ? opacity / 100 : 1,
+          cursor: "pointer",
+          gap: _icon.gap,
+          flexShrink: 0
+        }
+      }, formatter ? formatter(series, formatterExtra) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
+        style: _objectSpread(_objectSpread({}, _icon), {}, {
+          flexShrink: 0
+        })
+      }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+        type: "ellipsis",
+        value: displayName || name,
+        style: _objectSpread(_objectSpread({}, font), {}, {
+          fontStyle: italic ? "italic" : "normal",
+          fontWeight: bold ? "bold" : "normal",
+          minWidth: 0
+        }),
+        speed: speed
+      })));
+    })));
+  }
+  return isFixedWidth ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "__easyv-legend-wrapper",
     style: _objectSpread(_objectSpread({
       position: "absolute",
@@ -220,11 +408,13 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
   }, /*#__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)" //饼图或者柱状图配合不同的图例显示格式
+      rowGap: gridRowGap + "px",
+      columnGap: (isPieTopBottomFixedMultiCol ? Math.max(gridColumnGap, 40) : gridColumnGap) + "px",
+      justifyContent: isPieTopBottomFixedMultiCol ? legendMainAlign : undefined,
+      gridTemplateColumns: isPieTopBottomFixedMultiCol ? "repeat(".concat(fixedColumnsPerRow, ", max-content)") : "repeat(".concat(fixedColumnsPerRow, ", minmax(0, 1fr))")
     }
   }, _series.map(function (series, i) {
-    var _series$config;
+    var _series$config3;
     var type = series.type,
       name = series.name,
       displayName = series.displayName,
@@ -232,7 +422,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
       icon = series.icon,
       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);
+    var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config3 = series.config) === null || _series$config3 === void 0 || (_series$config3 = _series$config3.line) === null || _series$config3 === void 0 ? void 0 : _series$config3.type);
     return /*#__PURE__*/_react["default"].createElement("li", {
       key: i,
       onClick: onClick(fieldName),
@@ -270,19 +460,19 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
     className: "__easyv-legend-wrapper",
     style: stylePieOrAxis,
     ref: ref_container
-  }, (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
+  }, formatter ? (0, _toConsumableArray2["default"])(Array(Math.ceil(series.length / gridTemplateColumns))).map(function (_, indexs) {
     return /*#__PURE__*/_react["default"].createElement("ul", {
       key: indexs,
-      style: (0, _defineProperty2["default"])({
+      style: {
         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")
+        justifyContent: legendMainAlign,
+        gap: "".concat(gridRowGap, "px  ").concat(gridColumnGap, "px"),
+        marginBottom: gridRowGap + "px"
+      }
     }, _series.map(function (series, i) {
       if (Math.floor(i / gridTemplateColumns) == indexs) {
-        var _series$config2;
+        var _series$config4;
         var type = series.type,
           name = series.name,
           displayName = series.displayName,
@@ -290,7 +480,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           icon = series.icon,
           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);
+        var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config4 = series.config) === null || _series$config4 === void 0 || (_series$config4 = _series$config4.line) === null || _series$config4 === void 0 ? void 0 : _series$config4.type);
         return /*#__PURE__*/_react["default"].createElement("li", {
           key: i,
           onClick: onClick(fieldName),
@@ -302,9 +492,9 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
             alignItems: "center",
             cursor: "pointer",
             gap: _icon.gap,
-            overflow: formatter ? "visible" : undefined
+            overflow: "visible"
           }
-        }, formatter ? formatter(series, _objectSpread(_objectSpread({}, config), {}, {
+        }, formatter(series, _objectSpread(_objectSpread({}, config), {}, {
           valueMaxWidth: valueMaxWidth,
           percentMaxWidth: percentMaxWidth,
           nameMaxWidth: nameMaxWidth,
@@ -312,22 +502,66 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           columnsSeries: columnsSeries,
           fieldColumnKeys: fieldColumnKeys,
           fieldsColumnWidths: fieldsColumnWidths
-        })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
-          style: _icon
-        }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
-          ShowType: LegendType,
-          type: "ellipsis",
-          value: displayName || name,
-          style: _objectSpread(_objectSpread({}, font), {}, {
-            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
         })));
       }
     }));
-  }));
+  }) : /*#__PURE__*/_react["default"].createElement("ul", {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      width: "100%",
+      maxWidth: "100%",
+      boxSizing: "border-box",
+      margin: 0,
+      padding: 0,
+      listStyle: "none",
+      justifyContent: legendMainAlign,
+      gap: "".concat(gridRowGap, "px ").concat(gridColumnGap, "px")
+    }
+  }, _series.map(function (series, i) {
+    var _series$config5;
+    var type = series.type,
+      name = series.name,
+      displayName = series.displayName,
+      fieldName = series.fieldName,
+      icon = series.icon,
+      selected = series.selected,
+      index = series.index;
+    var _icon = (0, _utils.getIcon)(type, icon, series === null || series === void 0 || (_series$config5 = series.config) === null || _series$config5 === void 0 || (_series$config5 = _series$config5.line) === null || _series$config5 === void 0 ? void 0 : _series$config5.type);
+    return /*#__PURE__*/_react["default"].createElement("li", {
+      key: i,
+      onClick: onClick(fieldName),
+      "data-name": displayName || name,
+      "data-index": index,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        maxWidth: "100%",
+        minWidth: 0,
+        boxSizing: "border-box",
+        verticalAlign: "middle",
+        opacity: selected === false ? opacity / 100 : 1,
+        cursor: "pointer",
+        gap: _icon.gap
+      }
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      style: _objectSpread(_objectSpread({}, _icon), {}, {
+        flexShrink: 0
+      })
+    }), /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
+      type: "ellipsis",
+      value: displayName || name,
+      style: _objectSpread(_objectSpread({}, font), {}, {
+        fontStyle: italic ? "italic" : "normal",
+        fontWeight: bold ? "bold" : "normal",
+        minWidth: 0,
+        flex: "1 1 0%",
+        maxWidth: "100%"
+      }),
+      speed: speed
+    }));
+  })));
 });
 var getPosition = function getPosition(position, alignment) {
   var x = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;

package/lib/components/Marquee.js

@@ -53,7 +53,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     var textWidth = target.current.scrollWidth;
     var containerWidth = rootRef.current.clientWidth;
     if (textWidth <= containerWidth) {
-      console.log("文字全部可视");
+      // console.log("文字全部可视");
       //表示文字全部可视
       cancelAnimationFrame(timer.current || 0);
       target.current.style.transform = "translate(0px,0px)"; //重置偏移