@hsu-react/ui 0.0.12 → 0.0.14

package/lib/components/Chart/Bar/Bar3DOpt.d.ts

@@ -1,21 +1,21 @@
 import * as echarts from "echarts";
 import { ChartOptionType } from "..";
 export interface Bar3DSeriesOptions {
-    /** 同组 3D 柱系列总数（图例隐藏的不计入），用于整组相对类目刻度居中，默认 1 */
+    /** Total number of 3D bar series in the group (legend-hidden ones excluded), used to center the whole group relative to the category tick, default 1 */
     seriesCount?: number;
-    /** 当前系列在同组内的序号（图例隐藏的不占位），默认取 params.seriesIndex */
+    /** Order of the current series within the group (legend-hidden ones take no slot), defaults to params.seriesIndex */
     seriesOrder?: number;
-    /** 堆叠模式：同一类目上各系列纵向叠放（共用同一根柱） */
+    /** Stack mode: series on the same category are stacked vertically (sharing a single bar) */
     stack?: boolean;
-    /** 堆叠基底：每个数据点下方已累计的值，由调用方按可见系列累加 */
+    /** Stack base: accumulated value below each data point, summed by the caller over visible series */
     stackBase?: number[];
 }
 /**
- * 3D柱状图series生成
- * @param _colors 颜色
- * @param barGap 柱间距，必须大于等于柱宽
- * @param barWidth 柱宽
- * @param options 分组居中 / 堆叠配置
+ * Generates the series for a 3D bar chart
+ * @param _colors Colors
+ * @param barGap Gap between bars, must be greater than or equal to the bar width
+ * @param barWidth Bar width
+ * @param options Group centering / stacking config
  * @returns
  */
 declare const bar3DSeries: (_colors: echarts.Color, barGap?: number, barWidth?: number, options?: Bar3DSeriesOptions) => echarts.SeriesOption & ChartOptionType;

package/lib/components/Chart/Bar/Bar3DOpt.js

@@ -9,9 +9,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const colors = ["rgba(29, 230, 235,1)", "rgba(7, 235, 251,1)"];
 
-// buildPath 内 ctx 的可链式调用类型（等价于 zrender 的 PathProxy）
+// Chainable type of ctx inside buildPath (equivalent to zrender's PathProxy)
 
-// 绘制正面
+// Draw the front face
 const CubeFront = echarts.graphic.extendShape({
   shape: {
     x: 0,
@@ -24,18 +24,18 @@ const CubeFront = echarts.graphic.extendShape({
       barWidth = 20
     } = shape;
 
-    // 右上点
+    // Top-right point
     const c0 = [shape.x + 0 + xAxisTranslation, shape.y];
-    // 左上点
+    // Top-left point
     const c1 = [shape.x - barWidth + xAxisTranslation, shape.y];
-    // 左下点
+    // Bottom-left point
     const c2 = [xAxisPoint[0] - barWidth + xAxisTranslation, xAxisPoint[1]];
-    // 右下点
+    // Bottom-right point
     const c3 = [xAxisPoint[0] + 0 + xAxisTranslation, xAxisPoint[1]];
     ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
   }
 });
-// 绘制右侧面
+// Draw the right face
 const CubeRight = echarts.graphic.extendShape({
   shape: {
     x: 0,
@@ -47,21 +47,21 @@ const CubeRight = echarts.graphic.extendShape({
       xAxisTranslation = 0,
       barWidth = 20
     } = shape;
-    // 根据 barWidth 计算深度偏移，保持原有比例
+    // Compute the depth offset from barWidth, keeping the original ratio
     const depthOffset = barWidth * 8 / 20;
 
-    // 左上点
+    // Top-left point
     const c1 = [shape.x + 0 + xAxisTranslation, shape.y];
-    // 左下点
+    // Bottom-left point
     const c2 = [xAxisPoint[0] + 0 + xAxisTranslation, xAxisPoint[1]];
-    // 右下点
+    // Bottom-right point
     const c3 = [xAxisPoint[0] + depthOffset + xAxisTranslation, xAxisPoint[1] - 5];
-    // 右上点
+    // Top-right point
     const c4 = [shape.x + depthOffset + xAxisTranslation, shape.y - 5];
     ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
   }
 });
-// 绘制顶面
+// Draw the top face
 const CubeTop = echarts.graphic.extendShape({
   shape: {
     x: 0,
@@ -72,31 +72,31 @@ const CubeTop = echarts.graphic.extendShape({
       xAxisTranslation = 0,
       barWidth = 20
     } = shape;
-    // 根据 barWidth 计算偏移量，保持原有比例
-    const rightOffset = barWidth * 8 / 20; // 右侧偏移
-    const leftOffset = barWidth * 12 / 20; // 左侧偏移
+    // Compute offsets from barWidth, keeping the original ratio
+    const rightOffset = barWidth * 8 / 20; // Right offset
+    const leftOffset = barWidth * 12 / 20; // Left offset
 
-    // 右上点
+    // Top-right point
     const c1 = [shape.x + 0 + xAxisTranslation, shape.y];
-    // 右上点
+    // Top-right point
     const c2 = [shape.x + rightOffset + xAxisTranslation, shape.y - 5];
-    // 左上点
+    // Top-left point
     const c3 = [shape.x - leftOffset + xAxisTranslation, shape.y - 5];
-    // 左下点
+    // Bottom-left point
     const c4 = [shape.x - barWidth + xAxisTranslation, shape.y];
     ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
   }
 });
-// 注册三个面图形
+// Register the three face shapes
 echarts.graphic.registerShape("CubeFront", CubeFront);
 echarts.graphic.registerShape("CubeRight", CubeRight);
 echarts.graphic.registerShape("CubeTop", CubeTop);
 /**
- * 3D柱状图series生成
- * @param _colors 颜色
- * @param barGap 柱间距，必须大于等于柱宽
- * @param barWidth 柱宽
- * @param options 分组居中 / 堆叠配置
+ * Generates the series for a 3D bar chart
+ * @param _colors Colors
+ * @param barGap Gap between bars, must be greater than or equal to the bar width
+ * @param barWidth Bar width
+ * @param options Group centering / stacking config
  * @returns
  */
 const bar3DSeries = (_colors, barGap = 25, barWidth = 20, options = {}) => {
@@ -106,9 +106,9 @@ const bar3DSeries = (_colors, barGap = 25, barWidth = 20, options = {}) => {
     stack = false,
     stackBase
   } = options;
-  // 单根柱的视觉足迹为 [x - barWidth, x + depthOffset]（depthOffset 为 3D 深度）
+  // The visual footprint of a single bar is [x - barWidth, x + depthOffset] (depthOffset is the 3D depth)
   const depthOffset = barWidth * 8 / 20;
-  // 整组（堆叠时只有一根柱）相对类目刻度的居中补偿
+  // Centering compensation of the whole group (a single bar when stacked) relative to the category tick
   const groupSpan = stack ? 0 : Math.max(0, seriesCount - 1) * barGap;
   const centerOffset = (barWidth - depthOffset - groupSpan) / 2;
   const series = {
@@ -147,7 +147,7 @@ const bar3DSeries = (_colors, barGap = 25, barWidth = 20, options = {}) => {
         };
       }
 
-      // 堆叠时从基底（下方各系列累计值）画到基底+自身值；非堆叠从 0 画起
+      // When stacked, draw from the base (accumulated value of the series below) to base + own value; otherwise draw from 0
       const stackBottom = stack ? stackBase?.[dataIndex] ?? 0 : 0;
       const location = api.coord([value0, stackBottom + Number(value1)]);
       const bottomPoint = api.coord([value0, stackBottom]);

package/lib/components/Chart/Bar/index.d.ts

@@ -9,15 +9,15 @@ export interface ChartBarProps extends ChartCommonProps {
     legendData?: string[];
     scrollConfig?: ChartScrollConfig;
     onClick?: (event: echarts.ECElementEvent) => void;
-    /** 图例点选变化回调，参数为当前各系列选中状态（配合 legend.selected 可实现坐标轴重算） */
+    /** Legend selection change callback; the argument is the current selected state of each series (combined with legend.selected, enables axis recalculation) */
     onLegendSelectChanged?: (selected: Record<string, boolean>) => void;
-    /** dataZoom 可见窗口变化回调（滑块/滚轮/自动滚动/初始同步均触发），参数为当前可见的 x 轴索引区间（配合 useDataZoomWindow 可按展示部分重算坐标轴） */
+    /** dataZoom visible-window change callback (fired by slider/wheel/auto-scroll/initial sync); the argument is the currently visible x-axis index range (combined with useDataZoomWindow, enables recalculating axes based on the displayed portion) */
     onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
-    /** 是否启用图例自动滚动，默认 false */
+    /** Whether to enable legend auto-scroll, default false */
     enableLegendAutoScroll?: boolean;
-    /** 图例每页可见数量，默认 8 */
+    /** Number of legend items visible per page, default 8 */
     legendVisibleCount?: number;
-    /** 图例滚动间隔时间(ms)，默认 1500 */
+    /** Legend scroll interval (ms), default 1500 */
     legendScrollInterval?: number;
 }
 declare const ChartBar: React.FC<ChartBarProps>;

package/lib/components/Chart/Bar/index.js

@@ -48,12 +48,12 @@ const ChartBar = props => {
   const legendScrollRef = (0, _react.useRef)(null);
   const normalizedScroll = (0, _react.useMemo)(() => (0, _cartesian.resolveScrollConfig)(scrollConfig), [scrollConfig]);
 
-  // 使用 useMemo 缓存 chart 配置
+  // Cache the chart option with useMemo
   const chartOption = (0, _react.useMemo)(() => {
     const def_xAxis = (0, _cartesian.createDefaultCategoryXAxis)(xAxisData);
     const def_yAxis = (0, _cartesian.createDefaultValueYAxis)("bar");
 
-    // 处理 xAxis 配置
+    // Process xAxis config
     const processedXAxis = Array.isArray(xAxis) ? xAxis?.map(item => ({
       ...def_xAxis,
       data: item?.type === "value" ? undefined : xAxisData,
@@ -64,7 +64,7 @@ const ChartBar = props => {
       ...xAxis
     };
 
-    // 处理 yAxis 配置
+    // Process yAxis config
     const processedYAxis = Array.isArray(yAxis) ? yAxis?.map(item => ({
       ...def_yAxis,
       data: item?.type === "category" ? xAxisData : undefined,
@@ -75,7 +75,7 @@ const ChartBar = props => {
       ...yAxis
     };
 
-    // 计算 grid 配置
+    // Compute grid config
     let gridTop = "5%";
     if (yAxis?.name) {
       gridTop = "15%";
@@ -92,7 +92,7 @@ const ChartBar = props => {
       delete gridConfig.top;
     }
 
-    // 处理 dataZoom 配置
+    // Process dataZoom config
     const totalLen = xAxisData?.length ?? 1;
     const {
       zoomEnabled,
@@ -185,24 +185,24 @@ const ChartBar = props => {
     return option;
   }, [xAxisData, xAxis, yAxis, grid, chartTitle, dataZoom, normalizedScroll, insideDataZoom, sliderDataZoom, title, tooltip, legendData, legend, seriesData, series, enableLegendAutoScroll, coreOption]);
 
-  // 处理图表 resize 的回调
+  // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
     chartInstanceRef.current?.resize();
   }, []);
 
-  // 初始化图表
+  // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current) return;
 
-    // 初始化或获取已存在的实例
+    // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
     }
 
-    // 设置配置：notMerge 会把 dataZoom 窗口重置回初始位置，
-    // x 轴数据未变化时（如坐标轴重算/图例点选触发的重渲染）先记录当前窗口，设置后恢复
+    // Set the option: notMerge resets the dataZoom window to its initial position,
+    // so when x-axis data is unchanged (e.g. re-render triggered by axis recalculation / legend selection), record the current window first and restore it afterwards
     const xAxisKey = xAxisData?.join("\u0001") ?? "";
     const prevZoomRanges = prevXAxisKeyRef.current === xAxisKey ? chart.getOption()?.dataZoom : undefined;
     prevXAxisKeyRef.current = xAxisKey;
@@ -217,7 +217,7 @@ const ChartBar = props => {
       });
     }
 
-    // 向调用方同步当前可见窗口（初始渲染与恢复后），用于按展示部分重算坐标轴
+    // Sync the current visible window to the caller (on initial render and after restore), used to recalculate axes based on the displayed portion
     if (onDataZoomWindowChanged) {
       const zooms = chart.getOption()?.dataZoom;
       const zoom = zooms?.[0];
@@ -225,7 +225,7 @@ const ChartBar = props => {
       if (typeof zoom?.start === "number" && typeof zoom?.end === "number") {
         onDataZoomWindowChanged((0, _cartesian.percentWindowToIndexWindow)(zoom.start, zoom.end, totalLen));
       } else {
-        // 无 dataZoom（如数据量不足未启用滚动）时窗口即全量，同步一次避免残留旧窗口
+        // Without dataZoom (e.g. scrolling not enabled due to insufficient data) the window is the full range; sync once to avoid a stale old window
         onDataZoomWindowChanged({
           startIndex: 0,
           endIndex: Math.max(0, totalLen - 1)
@@ -233,21 +233,21 @@ const ChartBar = props => {
       }
     }
 
-    // 添加 resize 监听
+    // Add resize listener
     window.addEventListener("resize", handleResize);
 
-    // 添加 ResizeObserver
+    // Add ResizeObserver
     if (chartRef.current && !resizeObserverRef.current) {
       resizeObserverRef.current = new ResizeObserver(handleResize);
       resizeObserverRef.current.observe(chartRef.current);
     }
 
-    // 添加点击事件
+    // Add click event
     if (onClick) {
       chartInstanceRef.current?.on("click", onClick);
     }
 
-    // 图例点选事件
+    // Legend selection event
     const handleLegendSelectChanged = params => {
       onLegendSelectChanged?.(params.selected);
     };
@@ -255,7 +255,7 @@ const ChartBar = props => {
       chartInstanceRef.current?.on("legendselectchanged", handleLegendSelectChanged);
     }
 
-    // dataZoom 原生交互（slider 拖动 / inside 缩放）→ 同步可见窗口
+    // Native dataZoom interaction (slider drag / inside zoom) → sync the visible window
     const handleDataZoom = params => {
       const raw = params;
       const info = raw?.batch?.[0] ?? raw;
@@ -272,7 +272,7 @@ const ChartBar = props => {
       chartInstanceRef.current?.on("datazoom", handleDataZoom);
     }
 
-    // 图例自动滚动（参考 Pie 组件）
+    // Legend auto-scroll (modeled on the Pie component)
     const opt = chartOption;
     const legendDataLen = Array.isArray(opt.legend) ? opt.legend[0]?.data?.length : opt.legend?.data?.length;
     const seriesLen = Array.isArray(opt.series) ? opt.series.length : opt.series ? 1 : 0;
@@ -290,7 +290,7 @@ const ChartBar = props => {
       });
     }
 
-    // 清理函数
+    // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
       if (onClick) {
@@ -309,7 +309,7 @@ const ChartBar = props => {
     };
   }, [chartOption, handleResize, onClick, onLegendSelectChanged, onDataZoomWindowChanged, xAxisData, enableLegendAutoScroll, legendVisibleCount, legendScrollInterval]);
 
-  // 处理自动播放
+  // Handle auto play
   (0, _react.useEffect)(() => {
     if (!normalizedScroll.zoomEnabled || !chartInstanceRef.current || !xAxisData?.length) return;
     const sliderVisible = normalizedScroll.sliderVisible ?? (0, _cartesian.getSliderShow)(sliderDataZoom) ?? (Array.isArray(dataZoom) ? (0, _cartesian.getSliderShow)(dataZoom.find(item => item.type === "slider")) : (0, _cartesian.getSliderShow)(dataZoom)) ?? false;
@@ -329,15 +329,15 @@ const ChartBar = props => {
     return dispose;
   }, [dataZoom, normalizedScroll, sliderDataZoom, xAxisData, onDataZoomWindowChanged]);
 
-  // 组件卸载时清理资源
+  // Clean up resources when the component unmounts
   (0, _react.useEffect)(() => {
     return () => {
-      // 清理 ResizeObserver
+      // Clean up ResizeObserver
       if (resizeObserverRef.current) {
         resizeObserverRef.current.disconnect();
         resizeObserverRef.current = null;
       }
-      // 销毁图表实例
+      // Dispose the chart instance
       if (chartInstanceRef.current) {
         chartInstanceRef.current.dispose();
         chartInstanceRef.current = null;

package/lib/components/Chart/Bubble/index.d.ts

@@ -7,17 +7,17 @@ export interface BubbleDataItem {
     [key: string]: unknown;
 }
 export interface ChartBubbleProps extends ChartCommonProps {
-    /** 气泡图数据 */
+    /** Bubble chart data */
     data: BubbleDataItem[];
-    /** 自定义颜色列表 */
+    /** Custom color list */
     colorList?: echarts.Color[];
-    /** 图表标题 */
+    /** Chart title */
     chartTitle?: string;
-    /** 气泡标签字体大小 */
+    /** Bubble label font size */
     fontSize?: number;
-    /** 图表实例回调 */
+    /** Chart instance callback */
     onChart?: (chart: echarts.EChartsType) => void;
-    /** 点击事件 */
+    /** Click event */
     onClick?: (event: echarts.ECElementEvent) => void;
 }
 declare const Bubble: React.FC<ChartBubbleProps>;

package/lib/components/Chart/Bubble/index.js

@@ -12,7 +12,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// 扩展的数据项类型，包含图表需要的所有属性
+// Extended data item type containing all properties the chart needs
 
 const Bubble = props => {
   const {
@@ -38,17 +38,17 @@ const Bubble = props => {
     height: 0
   });
 
-  // 缓存位置计算结果
+  // Cache the position calculation results
   const positionCacheRef = (0, _react.useRef)(null);
 
-  // 生成缓存key，基于数据内容和容器尺寸
+  // Generate a cache key based on data content and container size
   const generateCacheKey = (0, _react.useCallback)((data, width, height) => {
-    // 基于数据的name和value生成key，确保数据变化时能检测到
+    // Build the key from each item's name and value so data changes are detected
     const dataKey = data?.map(item => `${item.name}:${item.value}`).join("|");
     return `${layoutVersion}_${dataKey}_${width}_${height}`;
   }, [layoutVersion]);
 
-  // 仅用于布局的半径补偿：当大小差异过大时，给小球增加额外布局半径，避免被大球挤压
+  // Radius compensation used only for layout: when size differences are too large, give small bubbles extra layout radius to avoid being squeezed by big ones
   const getLayoutRadiusList = (0, _react.useCallback)(rawRadiusList => {
     if (!rawRadiusList.length) return rawRadiusList;
     const validRadiusList = rawRadiusList.filter(radius => Number.isFinite(radius) && radius > 0);
@@ -68,9 +68,9 @@ const Bubble = props => {
     });
   }, []);
 
-  // 处理数据并生成图表配置
+  // Process the data and generate the chart option
   const chartOption = (0, _react.useMemo)(() => {
-    // 容器尺寸未获取或数据为空时，返回空配置
+    // Return an empty option when the container size is not yet available or the data is empty
     if (!data || data.length === 0 || containerSize.width === 0 || containerSize.height === 0) {
       return {};
     }
@@ -80,36 +80,36 @@ const Bubble = props => {
       id: index
     }));
 
-    // 计算最大值
+    // Compute the maximum value
     let max = 0;
     countList?.forEach(e => {
       if (e.value >= max) max = e.value;
     });
 
-    // 获取容器尺寸
+    // Get the container size
     const graphCanvas = containerSize;
 
-    // 基础气泡大小，根据容器尺寸和数据数量动态调整
+    // Base bubble size, dynamically adjusted by container size and data count
     const containerMin = Math.min(graphCanvas.width, graphCanvas.height);
     const containerArea = graphCanvas.width * graphCanvas.height;
     const dataCount = countList.length;
 
-    // 根据数据数量和容器面积动态调整基础尺寸
-    // 目标：尽量把气泡做大，让一层层外扩时紧贴容器边界；同时为环间隙留出必要空间。
+    // Dynamically adjust the base size by data count and container area
+    // Goal: make bubbles as large as possible so the outward-expanding rings hug the container edge, while leaving necessary space for ring gaps.
     const areaPerBubble = containerArea / dataCount;
-    const estimatedMaxRadius = Math.sqrt(areaPerBubble / Math.PI) * 0.82; // 提高密度系数，气泡更大
+    const estimatedMaxRadius = Math.sqrt(areaPerBubble / Math.PI) * 0.82; // Higher density factor, larger bubbles
 
-    // 数量越多，基础尺寸越小，避免重叠
+    // The more items there are, the smaller the base size, to avoid overlap
     const sizeFactor = Math.max(0.55, 1.35 - dataCount * 0.07);
-    const baseSize = Math.min(170 * sizeFactor, containerMin / (1.9 + dataCount * 0.08), estimatedMaxRadius * 2 // 确保不超过估算的最大半径
+    const baseSize = Math.min(170 * sizeFactor, containerMin / (1.9 + dataCount * 0.08), estimatedMaxRadius * 2 // Ensure it does not exceed the estimated max radius
     );
 
-    // 自适应非线性映射：压缩大值、抬升小值，数据差距仍可读但视觉更饱满
+    // Adaptive non-linear mapping: compress large values and lift small ones, keeping the data gap readable while looking visually fuller
     const minPositiveValue = countList.map(item => item.value).filter(value => value > 0).reduce((min, value) => Math.min(min, value), Number.POSITIVE_INFINITY);
     const safeMinValue = Number.isFinite(minPositiveValue) ? minPositiveValue : 1;
     const valueRatio = max > 0 ? max / safeMinValue : 1;
     const compressPower = valueRatio > 20 ? 0.38 : valueRatio > 10 ? 0.46 : valueRatio > 4 ? 0.56 : 0.7;
-    // 最小气泡的底线提高，避免最小那颗过小难以识别；仍保留与最大值的可见差距
+    // Raise the floor for the smallest bubble so it is not too small to recognize, while keeping a visible gap from the largest value
     const minScale = valueRatio > 20 ? 0.74 : valueRatio > 10 ? 0.68 : valueRatio > 4 ? 0.62 : 0.56;
     const maxScale = 1.1;
     const symbolSizeList = countList.map(item => {
@@ -122,30 +122,30 @@ const Bubble = props => {
     const rawRadiusList = symbolSizeList.map(symbolSize => symbolSize / 2);
     const layoutRadiusList = getLayoutRadiusList(rawRadiusList);
 
-    // 生成缓存key
+    // Generate the cache key
     const cacheKey = generateCacheKey(data, graphCanvas.width, graphCanvas.height);
 
-    // 检查缓存，如果数据或容器尺寸没有变化，使用缓存的位置
+    // Check the cache; if neither data nor container size changed, use the cached positions
     let randomCircleArr;
     if (positionCacheRef.current && positionCacheRef.current.cacheKey === cacheKey && positionCacheRef.current.positions.length === layoutRadiusList.length) {
-      // 使用缓存的位置
+      // Use the cached positions
       randomCircleArr = positionCacheRef.current.positions;
     } else {
-      // 重新计算位置
+      // Recalculate positions
       randomCircleArr = (0, _bubble.drawCircles)(layoutRadiusList, graphCanvas.width, graphCanvas.height);
-      // 更新缓存
+      // Update the cache
       positionCacheRef.current = {
         cacheKey,
         positions: randomCircleArr
       };
     }
 
-    // 处理每个数据项
+    // Process each data item
     countList?.forEach((e, i) => {
       const symbolSize = symbolSizeList[i] ?? baseSize * 0.5;
       const fontSize = propFontSize ?? Math.max(12, Math.min(20, symbolSize * 0.28));
 
-      // 先计算 symbolSize，因为 label 的 width 需要用到它
+      // Compute symbolSize first, since the label's width depends on it
       let finalSymbolSize = symbolSize;
       if (randomCircleArr[i]) {
         e.x = randomCircleArr[i].x;
@@ -153,7 +153,7 @@ const Bubble = props => {
         e.symbolSize = symbolSize;
         finalSymbolSize = symbolSize;
       } else {
-        // 兜底：放在容器中心
+        // Fallback: place it at the container center
         e.symbolSize = symbolSize;
         e.x = graphCanvas.width / 2;
         e.y = graphCanvas.height / 2;
@@ -165,10 +165,10 @@ const Bubble = props => {
           color: "#fff",
           fontSize,
           width: finalSymbolSize,
-          // 设置宽度为气泡直径
+          // Set the width to the bubble diameter
           overflow: "truncate",
-          // 超出部分截断
-          ellipsis: "..." // 省略号
+          // Truncate overflowing text
+          ellipsis: "..." // Ellipsis
         }
       };
       e.emphasis = {
@@ -178,7 +178,7 @@ const Bubble = props => {
       };
       e.itemStyle = {
         normal: {
-          color: colorList[i % colorListLen] // 使用索引确保颜色一致性
+          color: colorList[i % colorListLen] // Use the index to keep colors consistent
         }
       };
     });
@@ -215,7 +215,7 @@ const Bubble = props => {
     return option;
   }, [data, colorList, chartTitle, propFontSize, title, tooltip, series, coreOption, containerSize, generateCacheKey, getLayoutRadiusList]);
 
-  // 设置 ResizeObserver 监听容器尺寸变化（包括首次获取尺寸）
+  // Set up a ResizeObserver to watch container size changes (including the initial size read)
   (0, _react.useEffect)(() => {
     if (!chartRef.current) return;
     const containerElement = chartRef.current.parentElement;
@@ -246,43 +246,43 @@ const Bubble = props => {
     };
   }, []);
 
-  // 处理图表 resize 的回调
+  // Callback for handling chart resize
   const handleResize = (0, _react.useCallback)(() => {
     chartInstanceRef.current?.resize();
-    // 重新设置配置以更新气泡位置
+    // Re-apply the option to update bubble positions
     if (chartInstanceRef.current && data && data.length > 0) {
       chartInstanceRef.current.setOption(chartOption, true);
     }
   }, [chartOption, data]);
 
-  // 初始化图表
+  // Initialize the chart
   (0, _react.useEffect)(() => {
     if (!chartRef.current) return;
-    // 等待容器尺寸有效后再初始化图表
+    // Wait until the container size is valid before initializing the chart
     if (containerSize.width === 0 || containerSize.height === 0) return;
 
-    // 初始化或获取已存在的实例
+    // Initialize or reuse the existing instance
     let chart = chartInstanceRef.current;
     if (!chart) {
       chart = echarts.init(chartRef.current);
       chartInstanceRef.current = chart;
-      // 首次初始化时调用 onChart 回调
+      // Call the onChart callback on first initialization
       onChart?.(chart);
     }
 
-    // 先 resize 确保 echarts 获取到正确的容器尺寸，再设置配置
+    // Resize first so echarts picks up the correct container size, then apply the option
     chart.resize();
     chart.setOption(chartOption, true);
 
-    // 添加 window resize 监听
+    // Add window resize listener
     window.addEventListener("resize", handleResize);
 
-    // 添加点击事件
+    // Add click event
     if (onClick) {
       chartInstanceRef.current?.on("click", onClick);
     }
 
-    // 清理函数
+    // Cleanup function
     return () => {
       window.removeEventListener("resize", handleResize);
       if (onClick) {
@@ -291,7 +291,7 @@ const Bubble = props => {
     };
   }, [chartOption, containerSize.width, containerSize.height, handleResize, onChart, onClick]);
 
-  // 组件卸载时清理图表实例
+  // Dispose the chart instance when the component unmounts
   (0, _react.useEffect)(() => {
     return () => {
       if (chartInstanceRef.current) {