@publishfx/publish-chart 2.1.4 → 2.1.6

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+**2.1.6** fix(chart): 解决ts错误
+- 2026-03-03T06:38:38+08:00 [fix(chart): 解决ts错误](http://lf.git.oa.mt/publish_platform/web/publish/commit/a1a61c8cbfede6e0993a1101dd4f375ad3383302)
+- 2026-03-03T06:30:33+08:00 [fix(chart): 修复所有遗留问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/73456fbb6fe853fc9069e2c6712851375dd372da)
+
+**2.1.5** fix(chart): 修正ts错误
+- 2026-03-03T04:41:18+08:00 [fix(chart): 修正ts错误](http://lf.git.oa.mt/publish_platform/web/publish/commit/ed6bc3403d6c06d8c0cce6f0193a447d74b68a3a)
+- 2026-03-03T04:38:12+08:00 [fix(chart): 组合图代码整理](http://lf.git.oa.mt/publish_platform/web/publish/commit/6a94afb106447e54143f4a29e7d8fa24c718b321)
+- 2026-03-03T01:44:41+08:00 [fix(chart): 修复一些问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/52b05bffc199010d0ed76c112f615937c33edc53)
+- 2026-03-03T00:19:14+08:00 [fix(chart): 辅助线不显示y轴](http://lf.git.oa.mt/publish_platform/web/publish/commit/4a7de7122d0ec4f037b95927f93a2626e7a8837a)
+- 2026-03-03T00:13:56+08:00 [fix: 修复一批组合图和折线图的BUG](http://lf.git.oa.mt/publish_platform/web/publish/commit/c9f3f2a758ae49c94dada96acb859e8e842877ea)
+- 2026-03-02T21:49:02+08:00 [feat(chart): 组合图排序](http://lf.git.oa.mt/publish_platform/web/publish/commit/46000898aac62b20b9c4f1543a0437808e795021)
+- 2026-03-02T20:35:15+08:00 [fix: [f-6849783906] 修复柱状图倒序问题及图例编辑时不展示问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/5fc94ba48503403c2aee24d59fc9ad6e71ce3a2d)
+- 2026-03-02T20:24:49+08:00 [feat(chart): 组合图数据标签](http://lf.git.oa.mt/publish_platform/web/publish/commit/ec86c8ef7479f60c19d9a817212b2b3290a9c00f)
+- 2026-03-02T19:37:12+08:00 [feat: 组合图辅助线](http://lf.git.oa.mt/publish_platform/web/publish/commit/7ea103172eb0f2529bd067a4187c4f9d6387dd0f)
+- 2026-03-02T19:06:57+08:00 [feat(chart): 组合图折线逻辑](http://lf.git.oa.mt/publish_platform/web/publish/commit/c13e0dbf072b4736742a84890394a923495a6c54)
+
 **2.1.4** feat(chart): 柱状、折线、组合三个图表支持onChartClick
 - 2026-03-02T15:27:33+08:00 [feat(chart): 柱状、折线、组合三个图表支持onChartClick](http://lf.git.oa.mt/publish_platform/web/publish/commit/0cbed83b537a5b0a08f676256b8e69bb9ae0741a)
 - 2026-03-02T14:38:28+08:00 [fix(chart): 组合图针对副轴数据全为0时，Y刻度的处理。](http://lf.git.oa.mt/publish_platform/web/publish/commit/2b262810e33d3660255831fb7ef0e345907841e9)

package/dist/adapters/DataAdapter.d.ts

@@ -5,6 +5,7 @@ export interface TransformConfig {
     z?: string;
     isDescend?: boolean;
     isHorizontal?: boolean;
+    isGroup?: boolean;
 }
 /**
  * 数据适配器类
@@ -13,7 +14,7 @@ export declare class DataAdapter {
     /**
      * 统一的数据转换接口
      */
-    static transform(data: any[], transformType: TransformConfig['type'], config: TransformConfig): any[];
+    static transform(data: any[], transformType: TransformConfig['type'], config: TransformConfig): any;
     /**
    * 柱状图数据转换
    */
@@ -30,10 +31,6 @@ export declare class DataAdapter {
      * 柱状折线组合图数据转换
      */
     private static transformForBarLine;
-    /**
-   * 分组柱状折线组合图数据转换
-   */
-    private static transformForGroupBarLine;
     /**
      * 分组对比图数据转换
      */

package/dist/adapters/DataAdapter.js

@@ -11,8 +11,6 @@ class DataAdapter {
                 return this.transformForLine(data, config);
             case 'barLine':
                 return this.transformForBarLine(data, config);
-            case 'groupBarLine':
-                return this.transformForGroupBarLine(data, config);
             case 'groupCompare':
                 return this.transformForGroupCompare(data, config);
             default:
@@ -30,14 +28,16 @@ class DataAdapter {
                     return row;
                 }
             });
-            if (config.isDescend) dv.transform({
-                type: 'sort',
-                callback: (a, b)=>{
+            if (config.isDescend) {
+                const compareData = dv.rows.filter((row)=>String(row.groupType ?? '').includes('_compare'));
+                const basicData = dv.rows.filter((row)=>!String(row.groupType ?? '').includes('_compare'));
+                basicData.sort((a, b)=>{
                     if ('-' === a[config.y]) return config.isHorizontal ? -1 : 1;
                     if ('-' === b[config.y]) return config.isHorizontal ? 1 : -1;
-                    return b[config.y] - a[config.y];
-                }
-            });
+                    return config.isHorizontal ? a[config.y] - b[config.y] : b[config.y] - a[config.y];
+                });
+                dv.rows = basicData.concat(compareData);
+            }
         }
         return dv.rows;
     }
@@ -113,28 +113,10 @@ class DataAdapter {
         return dv.rows;
     }
     static transformForBarLine(data, config) {
-        const ds = new lib();
-        const dv = ds.createView().source(data);
-        if (config.y) dv.transform({
-            type: 'map',
-            callback: (row)=>{
-                row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
-                return row;
-            }
-        });
-        if (config.z) dv.transform({
-            type: 'map',
-            callback: (row)=>{
-                row[config.z] = '' !== row[config.z] ? +row[config.z] : '-';
-                return row;
-            }
-        });
-        return dv.rows;
-    }
-    static transformForGroupBarLine(data, config) {
         const ds = new lib();
         const dv = ds.createView().source(data);
         const tdv = ds.createView().source(data);
+        const combinedv = ds.createView().source(data);
         if (config.y && config.x) {
             dv.transform({
                 type: 'map',
@@ -156,28 +138,19 @@ class DataAdapter {
                     return !row.isCombine;
                 }
             });
-            tdv.transform({
+            combinedv.transform({
                 type: 'filter',
                 callback (row) {
-                    return !row[config.y] || '-' !== row[config.y];
+                    return row.isCombine;
                 }
             });
             tdv.transform({
-                type: 'aggregate',
-                fields: [
-                    config.y
-                ],
-                groupBy: [
-                    config.x
-                ],
-                operations: [
-                    'sum'
-                ],
-                as: [
-                    'total'
-                ]
+                type: 'filter',
+                callback (row) {
+                    return !row[config.y] || '-' !== row[config.y];
+                }
             });
-            tdv.transform({
+            if (config.isDescend) tdv.transform({
                 type: 'sort',
                 callback (a, b) {
                     return b.total - a.total;
@@ -185,16 +158,15 @@ class DataAdapter {
             });
             const xKey = config.x ?? 'x';
             const sortData = tdv.rows.map((item)=>item[xKey]);
-            if (config.isDescend) dv.transform({
-                type: 'sort',
-                callback (a, b) {
-                    if (-1 === sortData.indexOf(a[xKey])) return 1;
-                    if (-1 === sortData.indexOf(b[xKey])) return -1;
-                    return sortData.indexOf(a[xKey]) - sortData.indexOf(b[xKey]);
-                }
-            });
+            if (config.isDescend) combinedv.rows.sort((a, b)=>sortData.indexOf(a[xKey]) - sortData.indexOf(b[xKey]));
+            else combinedv.rows.sort((a, b)=>sortData.indexOf(a[xKey]) - sortData.indexOf(b[xKey]));
         }
-        return dv.rows;
+        console.log('renderG2CombineChart transformedData:leftData:', tdv.rows, 'rightData:', combinedv.rows);
+        return {
+            transformedData: dv.rows,
+            leftData: tdv.rows,
+            rightData: combinedv.rows
+        };
     }
     static transformForGroupCompare(data, _config) {
         return data;

package/dist/components/g2/base/G2BarChart.js

@@ -184,6 +184,7 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
         isDataTag,
         isLegend,
         isHighlight,
+        isCompare,
         maxY,
         themeColors,
         safeIndicatorMap,
@@ -200,7 +201,7 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
             position: "relative"
         },
         children: [
-            isLegend && legendItems.length > 1 && 2 === nodeSetting.showType && /*#__PURE__*/ jsx(G2BarLegend, {
+            (isLegend || isCompare) && legendItems.length > 1 && 2 === nodeSetting.showType && /*#__PURE__*/ jsx(G2BarLegend, {
                 items: legendItems,
                 activeIds: activeIds,
                 onChange: setActiveIds,
@@ -215,7 +216,7 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
                     height: `${height - canvasMarginBottom}px`
                 }
             }),
-            isLegend && legendItems.length > 1 && 2 !== nodeSetting.showType && /*#__PURE__*/ jsx(G2BarLegend, {
+            (isLegend || isCompare) && legendItems.length > 1 && 2 !== nodeSetting.showType && /*#__PURE__*/ jsx(G2BarLegend, {
                 items: legendItems,
                 activeIds: activeIds,
                 onChange: setActiveIds,

package/dist/components/g2/base/G2BarLegend.js

@@ -17,14 +17,12 @@ const G2BarLegend = ({ items, activeIds, onChange, pageSize: pageSizeProp, maxLa
             const availableWidth = Math.max(0, width - pagerReserveWidth);
             const estimatedItemWidths = items.map((item)=>{
                 const labelLength = item.label ? item.label.length : 0;
-                console.log("computePageSize: estimatedItemWidths:", item.label, labelLength);
                 const visibleChars = labelLength;
                 return 16 + 8 * visibleChars;
             });
             const avgItemWidth = estimatedItemWidths.reduce((sum, w)=>sum + w, 0) / estimatedItemWidths.length;
             if (!avgItemWidth || !isFinite(avgItemWidth)) return void setAutoPageSize(items.length || 1);
             const computed = Math.max(1, Math.floor(availableWidth / avgItemWidth));
-            console.log("computePageSize: computed:", computed, availableWidth, avgItemWidth, estimatedItemWidths);
             setAutoPageSize(computed);
             setPage((p)=>Math.min(p, Math.max(1, Math.ceil(items.length / computed))));
         };
@@ -51,6 +49,7 @@ const G2BarLegend = ({ items, activeIds, onChange, pageSize: pageSizeProp, maxLa
     ]);
     const handleToggle = (id)=>{
         const isActive = activeIds.includes(id);
+        if (isActive && activeIds.length <= 1) return;
         const nextSet = new Set(isActive ? activeIds.filter((x)=>x !== id) : [
             ...activeIds,
             id

package/dist/components/g2/base/G2CombineChart.js

@@ -63,68 +63,65 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
 }, indicators = [], auxiliaryLineData, highlightDate, timeRange, isGroup })=>{
     const { formatter, dataTransform, config: contextConfig } = useChartContext();
     const tooltipContainerRef = useG2TooltipContainer();
+    const isGroupRef = useRef(isGroup);
+    const [isOldData, setIsOldData] = useState(false);
+    isGroupRef.current = isGroup;
     console.log("G2CombineChart props:", data, x, y, z, indicators, legend, config, nodeSetting);
     const themeColors = contextConfig?.theme?.colors || [];
     const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
-    const safeLegend = useMemo(()=>{
-        if (isGroup) return legend || 'groupType';
-        if ("groupType" === legend) return y;
-        return legend || y;
-    }, [
-        isGroup,
-        legend,
-        y
-    ]);
+    const safeLegend = legend || "groupType";
     const safeZ = z;
     const safeY = "groupValue";
     const isCompare = timeRange?.compareStartTime !== "";
     const chartConfig = config || {};
-    const { isDataTag = false, isLegend = true, isDescend = false } = chartConfig;
+    const { isDataTag = true, isCombineDataTag = true, isLegend = true, isDescend = false, isHighlight = true } = chartConfig;
     const [xyList, setXYList] = useState([]);
     const [activeIds, setActiveIds] = useState([]);
     const [legendItems, setLegendItems] = useState([]);
-    const transformedData = useMemo(()=>{
+    const { transformedData, leftData, rightData } = useMemo(()=>{
+        console.log("G2CombineChart left useMemo: legend:", legend, data, x, y, z, indicators);
         if (!legend) {
             let result = transformDataToGroupBarLineFormat(data, x, y, indicators);
             data = result;
+            setIsOldData(true);
         }
-        console.log("G2CombineChart transformedData2:", data);
-        const result = isGroup ? DataAdapter.transform(data, "groupBarLine", {
-            type: "barLine",
-            x,
-            y: safeY,
-            isDescend
-        }) : DataAdapter.transform(data, "barLine", {
+        console.log("G2CombineChart renderG2CombineChart transformedData2:", data);
+        const { transformedData, leftData, rightData } = DataAdapter.transform(data, "barLine", {
             type: "barLine",
             x,
             y: safeY,
-            z
+            z,
+            isDescend,
+            isGroup: isGroupRef.current
         });
-        return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
+        return {
+            transformedData: transformedData.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap)),
+            leftData: leftData.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap)),
+            rightData: rightData.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap))
+        };
     }, [
-        isGroup,
         data,
         x,
         safeY,
         z,
         dataTransform,
-        contextConfig.nodeMap
+        contextConfig.nodeMap,
+        isDescend
     ]);
-    console.log("G2CombineChart transformedData:", transformedData);
+    console.log("G2CombineChart transformedData:", transformedData, leftData, rightData);
     const { maxY } = useMemo(()=>{
-        const key = isGroup ? "total" : safeY;
+        const key = isGroupRef.current ? "total" : safeY;
         const yValues = transformedData.filter((item)=>"-" !== item[key] && void 0 !== item[key] && null !== item[key]).map((item)=>Number(item[key]) || 0);
         return {
             maxY: yValues.length > 0 ? Math.max(...yValues) : 0
         };
     }, [
-        isGroup,
         transformedData,
         safeY
     ]);
-    const formatAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeLegend), [
+    const formatAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, y), [
         safeIndicatorMap,
-        safeLegend
+        y
     ]);
     const formatLineAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeZ), [
         safeIndicatorMap,
@@ -143,31 +140,53 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             const indicatorId = id.split("_")[0];
             const isCombine = "true" === id.split("_")[1];
             const lineGroupTypeIndex = lineGroupTypeArr.indexOf(id);
-            const color = isGroup ? isCombine ? lineColors[lineGroupTypeIndex] || lineColors[0] : themeColors[colorIndex] || themeColors[0] : 0 === colorIndex ? themeColors[colorIndex] : lineColors[colorIndex - 1];
+            const color = isGroupRef.current ? isCombine ? lineColors[lineGroupTypeIndex] || lineColors[0] : themeColors[colorIndex] || themeColors[0] : 0 === colorIndex ? themeColors[colorIndex] : lineColors[colorIndex - 1];
             return {
                 id,
-                label: isGroup ? isCombine ? getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) : indicatorId : getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) + (String(indicatorId).includes("_compare") ? `（对比时间：${timeRange?.compareStartTime}~${timeRange?.compareEndTime}）` : ""),
+                label: isGroupRef.current ? isCombine ? getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) : indicatorId : getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) + (String(indicatorId).includes("_compare") ? `（对比时间：${timeRange?.compareStartTime}~${timeRange?.compareEndTime}）` : ""),
                 color,
                 isCompare: String(indicatorId).includes("_compare"),
-                symbol: isGroup ? isCombine ? 'line' : 'square' : 0 === colorIndex ? "square" : "line"
+                symbol: isGroupRef.current ? isCombine ? "line" : "square" : 0 === colorIndex ? "square" : "line"
             };
         });
         setLegendItems(items);
-        if (!activeIds.length) setActiveIds(items.map((i)=>i.id));
+        const newIds = items.map((i)=>i.id);
+        setActiveIds((prev)=>{
+            if (!prev.length) return newIds;
+            const newSet = new Set(newIds);
+            if (prev.length !== newIds.length || prev.some((id)=>!newSet.has(id))) return newIds;
+            return prev;
+        });
     }, [
-        isGroup,
         transformedData,
         safeIndicatorMap,
-        themeColors,
-        activeIds.length
+        themeColors
     ]);
-    const filteredData = useMemo(()=>{
-        if (!activeIds.length) return transformedData;
-        return transformedData.filter((d)=>d.groupType ? activeIds.includes(String(d.groupType.replace("_compare", "") + "_" + d.isCombine)) : true);
+    const filterLeftData = useMemo(()=>{
+        if (!activeIds.length) return leftData;
+        const result = leftData.filter((d)=>d.groupType ? activeIds.includes(String(d.groupType.replace("_compare", "") + "_" + d.isCombine)) : true);
+        if (isGroupRef.current) result.forEach((item)=>{
+            item.total = result.filter((d)=>d.groupName === item.groupName).reduce((acc, d)=>acc + d.groupValue, 0);
+        });
+        return result;
     }, [
-        transformedData,
+        leftData,
+        activeIds
+    ]);
+    const filterRightData = useMemo(()=>{
+        if (!activeIds.length) return rightData;
+        return rightData.filter((d)=>d.groupType ? activeIds.includes(String(d.groupType.replace("_compare", "") + "_" + d.isCombine)) : true);
+    }, [
+        rightData,
         activeIds
     ]);
+    const filteredData = useMemo(()=>[
+            ...filterLeftData,
+            ...filterRightData
+        ], [
+        filterLeftData,
+        filterRightData
+    ]);
     const canvasMarginBottom = legendItems.length > 1 ? 2 === nodeSetting.showType ? 32 : 16 : 0;
     const containerRef = useRef(null);
     const chartRef = useRef(null);
@@ -192,13 +211,17 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             formatAxis,
             formatLineAxis,
             isDataTag,
+            isCombineDataTag,
             isLegend: false,
             isCompare,
+            isHighlight,
             isClickable: !!onChartClick,
             height: height - canvasMarginBottom,
-            formatLabel: isDataTag ? (d)=>{
+            formatLabel: (isDataTag || isCombineDataTag) && !isOldData ? (d)=>{
                 const indicatorId = d.groupType.split("_")[0];
-                return isGroup ? d.isCombine ? "-" === formatter.formatIndicator(d.groupValue, safeIndicatorMap[z]) ? "" : formatter.formatIndicator(d.groupValue, safeIndicatorMap[z]) : "-" === formatter.formatIndicator(d['total'], safeIndicatorMap[y]) ? "" : formatter.formatIndicator(d['total'], safeIndicatorMap[y]) : "-" === formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]) ? "" : formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]);
+                const key = isGroupRef.current && !d.isCombine ? "total" : indicatorId;
+                if ("total" === key) return formatter.formatIndicator(d.total, safeIndicatorMap[y]);
+                return formatter.formatIndicator(d.groupValue, safeIndicatorMap[key]);
             } : void 0,
             indicators,
             tooltipRender: (title, items)=>{
@@ -210,7 +233,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                     }));
                 safeItems = safeItems.filter((i)=>i.indicatorId);
                 react_dom.render(/*#__PURE__*/ jsx(G2CompareTooltip, {
-                    isGroupBar: isGroup,
+                    isGroupBar: isGroupRef.current,
                     title: title,
                     items: safeItems,
                     safeIndicatorMap: safeIndicatorMap,
@@ -222,6 +245,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             },
             highlightDate: highlightDate ?? [],
             timeRange,
+            auxiliaryLineData: auxiliaryLineData ?? [],
             onNodeListChange: (nodes)=>{
                 setXYList(nodes);
             },
@@ -233,9 +257,9 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                 }
             },
             lineColors,
-            isGroup,
             legendItems,
-            indicatorId: y
+            indicatorId: y,
+            isGroup: isGroupRef.current
         });
         chartRef.current = chart;
         if (onChartClick) chart.on("element:click", (e)=>{
@@ -259,15 +283,22 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         z,
         maxY,
         isDataTag,
-        isLegend,
+        isCombineDataTag,
+        isDescend,
         themeColors,
         safeIndicatorMap,
         formatter,
         formatAxis,
         onChartClick,
-        isGroup,
-        legendItems
+        isLegend,
+        isHighlight,
+        legendItems,
+        auxiliaryLineData,
+        leftData,
+        rightData,
+        isOldData
     ]);
+    console.log("G2BarLegend items: combie", legendItems, activeIds);
     return /*#__PURE__*/ jsxs("div", {
         style: {
             width: "100%",

package/dist/components/g2/base/G2LineChart.js

@@ -16,7 +16,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
     showType: 0,
     type: []
 }, auxiliaryLineData, highlightDate, indicators = [] })=>{
-    console.log("props data: G2LineChart", data, nodeSetting, config, "x, y, z", x, y, z, "highlightDate:", highlightDate);
+    console.log("props data: G2LineChart", data, nodeSetting, config, "x, y, z", x, y, z, "highlightDate:", highlightDate, "indicators:", indicators);
     const { formatter, dataTransform, config: contextConfig } = useChartContext();
     const tooltipContainerRef = useG2TooltipContainer();
     const themeColors = contextConfig?.theme?.colors || [];
@@ -94,12 +94,17 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             };
         });
         setLegendItems(items);
-        if (!activeIds.length) setActiveIds(items.map((i)=>i.id));
+        const newIds = items.map((i)=>i.id);
+        setActiveIds((prev)=>{
+            if (!prev.length) return newIds;
+            const newSet = new Set(newIds);
+            if (prev.length !== newIds.length || prev.some((id)=>!newSet.has(id))) return newIds;
+            return prev;
+        });
     }, [
         transformedData,
         safeIndicatorMap,
-        themeColors,
-        activeIds.length
+        themeColors
     ]);
     const filteredData = useMemo(()=>{
         if (!activeIds.length) return transformedData;
@@ -123,7 +128,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             minY,
             maxY,
             themeColors,
-            indicators,
+            indicators: indicators || activeIds,
             indicatorMap: safeIndicatorMap,
             formatAxis,
             highlightDate: highlightDate ?? [],

package/dist/components/g2/base/g2Helpers.d.ts

@@ -216,14 +216,18 @@ export interface ScaleYLinearOptions {
 export declare function applyScaleYLinear(view: any, options?: ScaleYLinearOptions): void;
 export interface ApplyAxisXOptions {
     title?: boolean;
-    labelAutoHide?: 'greedy' | 'equidistant' | boolean;
-    /** 为 true 时刻度过多会自动旋转为垂直；为 false 时保持水平，依赖 labelAutoHide 避免重叠。默认 false */
-    labelAutoRotate?: boolean;
+    isHorizontal?: boolean;
     grid?: boolean;
     gridStroke?: string;
     gridLineWidth?: number;
     gridLineDash?: number[];
     gridFilter?: (val: any) => boolean;
+    /** X 轴数据点数量，用于计算 label/tick 采样间隔 */
+    dataCount?: number;
+    /** 图表容器宽度（px），用于计算可容纳的最大标签数 */
+    containerWidth?: number;
+    /** 单个标签最大显示字符数，超出截断。默认 6 */
+    maxLabelChars?: number;
 }
 /** 配置 X 轴，挂载在 mark 上（如 line / interval） */
 export declare function applyAxisX(mark: any, options?: ApplyAxisXOptions): void;
@@ -271,6 +275,7 @@ export declare function applyLegendColor(view: any, options?: ApplyLegendColorOp
 export interface AuxiliaryLineItem {
     name: string;
     value: number;
+    axis?: 'left' | 'right';
 }
 export interface ApplyAuxiliaryLineYOptions {
     stroke?: string;
@@ -291,3 +296,4 @@ export interface GetColorByGroupTypeOptions {
  */
 export declare function getColorByGroupType(groupType: string, options: GetColorByGroupTypeOptions): string;
 export declare function applyHighlightDate(view: any, x: string, data: any, highlightDate: string[], isHighlight: boolean): void;
+export declare function adjustDomainMax(domainMin: number, domainMax: number): number;

package/dist/components/g2/base/g2Helpers.js

@@ -19,7 +19,7 @@ function applyScaleYLinear(view, options = {}) {
         [field]: {
             type: 'linear',
             ...null != domainMax && {
-                domainMax
+                domainMax: adjustDomainMax(domainMin, domainMax)
             },
             domainMin,
             clamp,
@@ -37,10 +37,30 @@ function applyScaleYLinear(view, options = {}) {
         }
     });
 }
+function calcAxisInterval(dataCount, containerWidth, maxLabelChars, fontSize) {
+    if (dataCount <= 1) return 1;
+    const charWidth = 0.55 * fontSize;
+    const ellipsisWidth = Math.min(maxLabelChars * charWidth, 90);
+    const slotWidth = ellipsisWidth + 8;
+    const plotWidth = 0.85 * containerWidth;
+    const maxLabels = Math.max(Math.floor(plotWidth / slotWidth), 2);
+    return Math.max(Math.ceil(dataCount / maxLabels), 1);
+}
+function createAxisFilter(type, interval, _dataCount) {
+    return (_datum, index)=>{
+        if (0 === index) return true;
+        return 'tick' === type ? index % interval === 0 : true;
+    };
+}
 function applyAxisX(mark, options = {}) {
-    const { title = false, labelAutoRotate = false, grid = true, gridStroke = '#333', gridLineWidth = 50, gridLineDash = [
+    const { title = false, isHorizontal = false, grid = true, gridStroke = '#333', gridLineWidth = 50, gridLineDash = [
         1000
-    ], gridFilter } = options;
+    ], gridFilter, dataCount = 0, containerWidth = 0, maxLabelChars = 30 } = options;
+    const fontSize = 12;
+    const needSampling = dataCount > 0 && containerWidth > 0;
+    const interval = needSampling ? calcAxisInterval(dataCount, containerWidth, maxLabelChars, fontSize) : 1;
+    const axisFilter = needSampling && interval > 1 ? (type)=>createAxisFilter(type, interval, dataCount) : null;
+    console.log('axisFilter:', interval);
     mark.axis('x', {
         title,
         grid,
@@ -50,16 +70,20 @@ function applyAxisX(mark, options = {}) {
         ...gridFilter && {
             gridFilter
         },
-        labelAutoHide: {
-            type: 'hide',
-            keepHeader: true,
-            keepTail: true
-        },
-        labelAutoRotate,
-        labelFontSize: 12,
+        labelAutoRotate: false,
+        labelFontSize: fontSize,
         labelFontColor: '#000',
-        labelAutoEllipsis: true,
-        labelFontOpacity: 1
+        size: isHorizontal ? Math.floor(containerWidth / 5) : 30,
+        labelAutoEllipsis: {
+            type: 'ellipsis',
+            maxLength: isHorizontal ? Math.floor(containerWidth / 5) : Math.min(maxLabelChars * fontSize * 0.55, 90)
+        },
+        labelAlign: 'horizontal',
+        labelDx: (_datum, _index, _data)=>0,
+        ...axisFilter && {
+            tickFilter: axisFilter('tick'),
+            labelFilter: axisFilter('label')
+        }
     });
 }
 function applyAxisY(mark, options = {}) {
@@ -123,11 +147,16 @@ function applyAuxiliaryLineY(view, lines, options = {}) {
     console.log('applyAuxiliaryLineY:', lines);
     const { stroke = '#F4664A', strokeOpacity = 1, labelMaxLength = 5 } = options;
     lines.forEach((auxLine)=>{
-        view.lineY().encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', strokeOpacity).style('lineWidth', 1).style('shadowColor', 'transparent').label({
+        view.lineY().encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', strokeOpacity).style('lineWidth', 1).style('shadowColor', 'transparent').axis('y', {
+            title: false,
+            grid: false,
+            label: false,
+            tick: false
+        }).label({
             dx: 0,
             dy: -5,
             text: splitTextToMultiline(auxLine.name, labelMaxLength, '<br />'),
-            position: 'bottom-left',
+            position: auxLine?.axis === 'right' ? 'bottom-right' : 'bottom-left',
             style: {},
             render: (text)=>`<div style="background-color: transparent; padding: 5px; border-radius: 5px;font-size: 12px;position: absolute;left: -4px; top: -24px; width: 100px;color: ${stroke}; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;">${text}</div>`
         });
@@ -179,4 +208,7 @@ function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
         strokeOpacity: 0
     });
 }
-export { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyLegendColor, applyScaleYLinear, createChart, getColorByGroupType, getMainView };
+function adjustDomainMax(domainMin, domainMax) {
+    return domainMax === domainMin ? domainMin > 0 ? 1.1 * domainMax : domainMax + 1 : domainMax;
+}
+export { adjustDomainMax, applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyLegendColor, applyScaleYLinear, createChart, getColorByGroupType, getMainView };

package/dist/components/g2/base/g2bar.js

@@ -20,7 +20,7 @@ function renderG2BarChart(container, options) {
     });
     console.log('isLegend:', legend, isLegend);
     const view = getMainView(chart);
-    view.attr('marginBottom', isLegend ? 0 : 16);
+    view.attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', isLegend ? 0 : 16);
     if (isHorizontal) view.coordinate({
         transform: [
             {
@@ -46,13 +46,13 @@ function renderG2BarChart(container, options) {
         columnWidthRatio: 0.6,
         insetLeft: (_d, index, _data, _column)=>{
             if (isHorizontal) return 0;
-            if (isCompare) return index % 2 === 0 ? 4 : 0;
-            return 4;
+            if (isCompare) return index % 2 === 0 ? 0 : 0;
+            return 0;
         },
         insetRight: (_d, index, _data, _column)=>{
             if (isHorizontal) return 0;
-            if (isCompare) return index % 2 === 1 ? 4 : 0;
-            return 4;
+            if (isCompare) return index % 2 === 1 ? 0 : 0;
+            return 0;
         },
         fill: (datum)=>{
             const groupType = String(datum.groupType ?? '');
@@ -71,13 +71,27 @@ function renderG2BarChart(container, options) {
         },
         cursor: isClickable ? 'pointer' : 'default'
     });
+    const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
-        grid: false
+        grid: false,
+        isHorizontal,
+        dataCount: xValueCount,
+        containerWidth: container.clientWidth
     });
     applyAxisY(view, {
         labelFormatter: formatAxis
     });
     view.legend(false);
+    view.interaction('poptip', {
+        offsetY: -20,
+        offsetX: 0,
+        tipBackgroundColor: '#fcfcfc',
+        tipColor: '#333',
+        tipBorderRadius: '6px',
+        tipPadding: '10px 12px',
+        tipFontSize: '12px',
+        tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
+    });
     interval.tooltip({
         items: [
             (datum)=>({
@@ -104,11 +118,18 @@ function renderG2BarChart(container, options) {
                 }) : null
         ].filter(Boolean)
     });
+    const tooltipBounding = {
+        x: 0,
+        y: 0,
+        width: container.clientWidth || container.offsetWidth,
+        height: height
+    };
     if (tooltipRender) view.interaction('tooltip', {
         shared: true,
         crosshairsY: true,
         wait: 100,
         marker: false,
+        bounding: tooltipBounding,
         render: (_event, payload)=>{
             const { title, items } = payload;
             const lastIsChange = items.filter((item)=>item.isChange);
@@ -120,7 +141,9 @@ function renderG2BarChart(container, options) {
             return tooltipRender(title, safeItems ?? []) ?? null;
         }
     });
-    else view.interaction('tooltip', true);
+    else view.interaction('tooltip', {
+        bounding: tooltipBounding
+    });
     applyAuxiliaryLineY(view, auxiliaryLineData);
     const nodeList = [];
     console.log('nodeList data:', data);

package/dist/components/g2/base/g2combine.d.ts

@@ -4,6 +4,7 @@
  */
 import { Chart } from "@antv/g2";
 import type { ChartTimeRange, IndicatorInfo } from "../../../core/ChartTypes";
+import { type AuxiliaryLineItem } from "./g2Helpers";
 export interface RenderG2CombineChartOptions {
     /** 已转换后的数据：约定包含 groupName、groupType、groupValue 等字段 */
     data: any[];
@@ -27,6 +28,8 @@ export interface RenderG2CombineChartOptions {
     formatLineAxis: (val: any) => string;
     /** 是否显示数据标签 */
     isDataTag?: boolean;
+    /** 是否显示副轴数据标签 */
+    isCombineDataTag?: boolean;
     /** 是否显示自定义 Legend（仅影响 React 层，G2 内部不画 legend） */
     isLegend?: boolean;
     /** 是否启用图例高亮 */
@@ -50,7 +53,12 @@ export interface RenderG2CombineChartOptions {
         value: any;
         isChange?: boolean;
         compareTime?: string;
-    }>) => HTMLElement | null;
+    }>, position?: {
+        left: number;
+        top: number;
+    }) => HTMLElement | null;
+    /** 辅助线 */
+    auxiliaryLineData?: AuxiliaryLineItem[];
     /** 将计算出的节点信息传递给外层（用于渲染 NodePopover 等） */
     onNodeListChange?: (nodes: Array<{
         pointP: {

package/dist/components/g2/base/g2combine.js

@@ -1,11 +1,11 @@
 import { lines } from "@antv/g-pattern";
-import { applyAxisX, applyHighlightDate, createChart, getMainView } from "./g2Helpers.js";
+import { applyAuxiliaryLineY, applyAxisX, applyHighlightDate, createChart, getMainView } from "./g2Helpers.js";
 import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
 const Y_AXIS_FIELD = 'groupValue';
 const BAR_Y_FIELD = 'barValue';
 const LINE_Y_FIELD = 'lineValue';
 function renderG2CombineChart(container, options) {
-    const { data, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = false, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, isClickable = false, indicators = [], tooltipRender, onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId } = options;
+    const { data, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = true, isCombineDataTag = true, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, isClickable = false, indicators = [], tooltipRender, auxiliaryLineData = [], onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId } = options;
     const chart = createChart({
         container,
         height,
@@ -17,25 +17,32 @@ function renderG2CombineChart(container, options) {
         insetBottom: 0
     });
     const view = getMainView(chart);
-    view.attr('marginBottom', 0);
+    view.attr('insetLeft', 0).attr('insetRight', 0).attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', 0);
     console.log('renderG2CombineChart data:', data, 'maxY:', maxY, x, y, 'indicators:', indicators);
     view.data(data);
+    const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
         title: false,
-        grid: false
+        grid: false,
+        dataCount: xValueCount,
+        containerWidth: container.clientWidth
     });
     const barColor = themeColors[0] ?? "#5B8FF9";
     console.log('tooltip: themeColors:', themeColors[0], barColor, isGroup);
-    console.log('renderG2CombineChart interval data:', data.filter((item)=>!item.isCombine));
+    console.log('renderG2CombineChart highlightDate:', highlightDate, isHighlight);
     applyHighlightDate(view, x, data, highlightDate, isHighlight);
     const intervalData = data.filter((item)=>!item.isCombine).map((item)=>({
             ...item,
             [BAR_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
+    console.log('renderG2CombineChart interval data:', intervalData);
     const intervalMaxY = intervalData.reduce((max, item)=>{
         const key = isGroup ? "total" : BAR_Y_FIELD;
         return Math.max(max, item[key]);
     }, 0);
+    const auxValues = auxiliaryLineData?.length ? auxiliaryLineData.map((item)=>item.value) : [];
+    const maxAux = auxValues.length ? Math.max(...auxValues) : 0;
+    const finalIntervalMax = Math.max(intervalMaxY, maxAux);
     const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").transform(isGroup ? {
         type: 'stackY',
         reverse: true
@@ -77,7 +84,7 @@ function renderG2CombineChart(container, options) {
     interval.scale('y', {
         type: 'linear',
         domainMin: 0,
-        domainMax: intervalMaxY,
+        domainMax: finalIntervalMax,
         nice: true,
         clamp: true,
         key: 'bar',
@@ -104,6 +111,7 @@ function renderG2CombineChart(container, options) {
             (datum)=>{
                 const groupType = String(datum.groupType ?? '');
                 const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
+                console.log(datum);
                 return {
                     value: datum[Y_AXIS_FIELD],
                     name: datum['groupType'],
@@ -142,11 +150,11 @@ function renderG2CombineChart(container, options) {
                 } : false : false
         ].filter(Boolean)
     });
-    console.log('renderG2CombineChart: line data:', data.filter((item)=>item.isCombine));
     const lineData = data.filter((item)=>item.isCombine && !item.groupType.includes('_compare')).map((item)=>({
             ...item,
             [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
+    console.log('renderG2CombineChart: line data:', lineData);
     const compareLineData = data.filter((item)=>item.isCombine && item.groupType.includes('_compare')).map((item)=>({
             ...item,
             [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
@@ -155,7 +163,7 @@ function renderG2CombineChart(container, options) {
     const lineMaxY = lineData.reduce((max, item)=>Math.max(max, item[LINE_Y_FIELD]), 0);
     const compareLineMaxY = compareLineData.reduce((max, item)=>Math.max(max, item[LINE_Y_FIELD]), 0);
     const lineFinalMaxY = Math.max(lineMaxY, compareLineMaxY) || 1;
-    console.log('lineFinalMaxY:', lineFinalMaxY);
+    const finalLineMax = Math.max(lineFinalMaxY, maxAux);
     const line = view.line().data(lineData).encode("x", x).encode("y", LINE_Y_FIELD).encode('color', 'groupType').style({
         lineWidth: 2,
         stroke: (datum)=>{
@@ -165,7 +173,7 @@ function renderG2CombineChart(container, options) {
             ];
             const groupType = String(datum[0]?.groupType ?? '');
             const index = groupTypeArr.findIndex((item)=>item === groupType);
-            const color = isGroup ? lineColors[index] || lineColors[0] : lineColors[indicators.slice(1).indexOf(String(groupType)) ?? 0];
+            const color = lineColors[index] || lineColors[0];
             return color;
         }
     });
@@ -176,14 +184,14 @@ function renderG2CombineChart(container, options) {
                 const groupTypeArr = [
                     ...groupTypeSet
                 ];
-                const groupType = String(datum[0]?.groupType ?? '');
+                const groupType = String(datum?.groupType ?? '');
                 const index = groupTypeArr.findIndex((item)=>item === groupType);
                 return {
                     value: datum[LINE_Y_FIELD],
-                    name: isGroup ? getIndicatorCompareName(_indicatorMap, datum['groupType']) : datum['groupType'],
+                    name: getIndicatorCompareName(_indicatorMap, datum['groupType']),
                     indicatorId: datum['groupType'],
                     channel: Y_AXIS_FIELD,
-                    color: isGroup ? lineColors[index] || lineColors[0] : lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent',
+                    color: lineColors[index] || lineColors[0],
                     isCombine: true,
                     tipType: 'line'
                 };
@@ -193,7 +201,7 @@ function renderG2CombineChart(container, options) {
     line.scale('y', {
         type: 'linear',
         domainMin: 0,
-        domainMax: lineFinalMaxY,
+        domainMax: finalLineMax,
         nice: true,
         clamp: true,
         key: 'line',
@@ -222,15 +230,23 @@ function renderG2CombineChart(container, options) {
             4
         ],
         lineWidth: 2,
-        stroke: (datum, index)=>{
+        stroke: (datum)=>{
             const groupType = String(datum[0]?.groupType ?? '');
             const color = lineColors[indicators.slice(1).indexOf(String(groupType.replace('_compare', ''))) ?? 0];
-            console.log('compareLine: 222', 'index:', index, 'indicators:', indicators, 'datum:', datum, 'groupType:', groupType, 'color:', color);
             return color ?? 'transparent';
         }
     });
     compareLine.scale('y', {
-        key: 'line'
+        type: 'linear',
+        domainMin: 0,
+        domainMax: finalLineMax,
+        nice: true,
+        clamp: true,
+        key: 'line',
+        independent: true,
+        tickMethod: (min, max)=>Array.from({
+                length: 6
+            }, (_, i)=>min + (max - min) * i / 5)
     });
     compareLine.axis('y', false);
     const hasCompareData = data.some((item)=>item.groupType.includes('_compare'));
@@ -262,37 +278,88 @@ function renderG2CombineChart(container, options) {
         shared: true,
         crosshairsY: true,
         marker: false,
-        render: (_event, payload)=>{
+        render: (event, payload)=>{
             const { title, items } = payload;
             const baseItems = items.filter((item)=>!item.isCombine);
             const combineItems = items.filter((item)=>item.isCombine);
-            console.log('tooltipRender:', title, items, indicators);
-            if (isGroup) return tooltipRender(title, [
-                ...baseItems,
+            const indicatorOrder = new Map(indicators.map((id, i)=>[
+                    id,
+                    i
+                ]));
+            const sortedCombineItems = [
                 ...combineItems
+            ].sort((a, b)=>{
+                const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
+                const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
+                if (orderA !== orderB) return orderA - orderB;
+                const typeRank = (item)=>{
+                    if (item.isChange) return 2;
+                    if ('compareline' === item.tipType) return 1;
+                    return 0;
+                };
+                return typeRank(a) - typeRank(b);
+            });
+            const content = tooltipRender(title, [
+                ...baseItems,
+                ...sortedCombineItems
             ]) ?? null;
-            if (indicators.length) {
-                const groupedItems = indicators.map((indicator, index)=>{
-                    if (0 === index) return items.filter((i)=>!i.isCombine).filter((i)=>i.indicatorId === String(indicator));
-                    return items.filter((i)=>i.isCombine).filter((i)=>i.indicatorId === String(indicator));
-                });
-                console.log(groupedItems.flat(), 'tooltip groupedItems');
-                const sortedItems = groupedItems.map((group)=>[
-                        group.filter((i)=>i.name === i.indicatorId),
-                        group.filter((i)=>i.compareTime),
-                        group.filter((i)=>i.name.includes('_change'))
-                    ].filter(Boolean).flat()).flat();
-                console.log(sortedItems, 'tooltip sortedItems');
-                const formatItems = sortedItems.map((item)=>({
-                        ...item,
-                        color: item.isCombine ? lineColors[indicators.slice(1).indexOf(String(item?.indicatorId)) ?? 0] || barColor || 'transparent' : barColor || 'transparent'
-                    }));
-                console.log(formatItems, 'tooltip formatItems');
-                return tooltipRender(title, formatItems ?? []) ?? null;
+            if (content) {
+                const domEvent = event?.event ?? event;
+                const clientX = domEvent?.clientX ?? domEvent?.x ?? 0;
+                const clientY = domEvent?.clientY ?? domEvent?.y ?? 0;
+                const rect = container.getBoundingClientRect();
+                const offsetX = 12;
+                const offsetY = 12;
+                const applyClamp = ()=>{
+                    let el = content;
+                    while(el && el.parentElement){
+                        const p = el.parentElement;
+                        if (p.classList?.contains('g2-tooltip')) {
+                            el = p;
+                            break;
+                        }
+                        el = p;
+                    }
+                    const wrapper = el && el.classList?.contains('g2-tooltip') ? el : null;
+                    if (!wrapper) return;
+                    const wRect = wrapper.getBoundingClientRect();
+                    const tooltipW = wRect.width || 260;
+                    const tooltipH = wRect.height || 300;
+                    const minLeft = rect.left;
+                    const maxLeft = rect.right - tooltipW;
+                    const minTop = rect.top;
+                    const maxTop = rect.bottom - tooltipH;
+                    const desiredLeft = clientX + offsetX;
+                    const desiredTop = clientY + offsetY;
+                    const left = Math.min(Math.max(desiredLeft, minLeft), Math.max(maxLeft, minLeft));
+                    const top = Math.min(Math.max(desiredTop, minTop), Math.max(maxTop, minTop));
+                    wrapper.style.position = 'fixed';
+                    wrapper.style.left = `${left}px`;
+                    wrapper.style.top = `${top}px`;
+                    wrapper.style.transform = 'translate(0px, 0px)';
+                    wrapper.style.pointerEvents = 'none';
+                    wrapper.style.zIndex = '9999';
+                };
+                try {
+                    applyClamp();
+                    requestAnimationFrame(applyClamp);
+                } catch  {}
             }
+            return content;
         }
     });
     view.legend(false);
+    view.interaction('poptip', {
+        offsetY: -20,
+        offsetX: 0,
+        tipBackgroundColor: '#fcfcfc',
+        tipColor: '#333',
+        tipBorderRadius: '6px',
+        tipPadding: '10px 12px',
+        tipFontSize: '12px',
+        tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
+    });
+    applyAuxiliaryLineY(view, auxiliaryLineData);
     const nodeList = [];
     console.log('nodeList data:', data);
     data.forEach((item)=>{
@@ -355,35 +422,45 @@ function renderG2CombineChart(container, options) {
             }
         });
     });
-    if (isDataTag && formatLabel) {
-        const groupedByX = intervalData.reduce((acc, item)=>{
-            const key = item[x];
-            if (!acc[key]) acc[key] = [];
-            acc[key].push(item);
-            return acc;
-        }, {});
-        const lastItemsInEachStack = new Set();
-        Object.values(groupedByX).forEach((group)=>{
-            group.sort((a, b)=>a[y] - b[y]);
-            const lastItem = group[group.length - 1];
-            lastItemsInEachStack.add(lastItem);
-        });
-        interval.label({
-            dy: isGroup ? -16 : -10,
-            dx: -10,
-            offset: 0,
-            text: (d)=>{
-                if (!isGroup) return formatLabel(d);
-                if (lastItemsInEachStack.has(d)) return formatLabel(d);
-                return '';
-            }
-        });
-        line.label({
+    if (formatLabel) {
+        if (isDataTag) {
+            const groupedByX = intervalData.reduce((acc, item)=>{
+                const key = item[x];
+                if (!acc[key]) acc[key] = [];
+                acc[key].push(item);
+                return acc;
+            }, {});
+            const lastItemsInEachStack = new Set();
+            Object.values(groupedByX).forEach((group)=>{
+                const lastItem = group[0];
+                lastItemsInEachStack.add(lastItem);
+            });
+            interval.label({
+                dy: -16,
+                dx: -10,
+                offset: 0,
+                text: (d)=>{
+                    if (!isGroup) return formatLabel(d);
+                    if (lastItemsInEachStack.has(d)) return formatLabel(d);
+                    return '';
+                }
+            });
+        }
+        if (isCombineDataTag) line.label({
             dy: -10,
-            dx: -10,
+            dx: 10,
             offset: 0,
             text: (d)=>formatLabel(d)
         });
+        view.labelTransform([
+            {
+                type: 'exceedAdjust',
+                bounds: 'main'
+            },
+            {
+                type: 'overlapHide'
+            }
+        ]);
     }
     chart.render();
     let hasEmittedNodeList = false;

package/dist/components/g2/base/g2groupbar.js

@@ -56,9 +56,12 @@ function renderG2GroupBarChart(container, options) {
         },
         stroke: 'transparent'
     });
+    const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
         title: false,
-        grid: false
+        grid: false,
+        dataCount: xValueCount,
+        containerWidth: container.clientWidth
     });
     applyAxisY(view, {
         title: false,
@@ -70,6 +73,7 @@ function renderG2GroupBarChart(container, options) {
         labelFormatter: formatAxis
     });
     view.legend(false);
+    view.interaction('poptip', true);
     interval.tooltip({
         items: [
             (datum)=>{
@@ -86,20 +90,38 @@ function renderG2GroupBarChart(container, options) {
             }
         ].filter(Boolean)
     });
-    if (tooltipRender) interval.interaction('tooltip', {
-        shared: true,
-        render: (_event, payload)=>{
-            const { title, items } = payload;
-            const lastIsChange = items.filter((item)=>item.isChange);
-            let safeItems = items;
-            if (lastIsChange.length > 0) safeItems = [
-                ...items.filter((item)=>!item.isChange),
-                lastIsChange[lastIsChange.length - 1]
-            ];
-            return tooltipRender(title, safeItems ?? []) ?? null;
-        }
-    });
-    else view.interaction('tooltip', true);
+    if (tooltipRender) {
+        const tooltipBounding = {
+            x: 0,
+            y: 0,
+            width: container.clientWidth || container.offsetWidth,
+            height: height
+        };
+        interval.interaction('tooltip', {
+            shared: true,
+            bounding: tooltipBounding,
+            render: (_event, payload)=>{
+                const { title, items } = payload;
+                const lastIsChange = items.filter((item)=>item.isChange);
+                let safeItems = items;
+                if (lastIsChange.length > 0) safeItems = [
+                    ...items.filter((item)=>!item.isChange),
+                    lastIsChange[lastIsChange.length - 1]
+                ];
+                return tooltipRender(title, safeItems ?? []) ?? null;
+            }
+        });
+    } else {
+        const tooltipBounding = {
+            x: 0,
+            y: 0,
+            width: container.clientWidth || container.offsetWidth,
+            height: height
+        };
+        view.interaction('tooltip', {
+            bounding: tooltipBounding
+        });
+    }
     applyAuxiliaryLineY(view, auxiliaryLineData);
     const nodeList = [];
     console.log('nodeList data:', data);

package/dist/components/g2/base/g2line.js

@@ -19,7 +19,7 @@ function renderG2LineChart(container, options) {
         insetBottom: 0
     });
     const view = getMainView(chart);
-    view.attr('marginBottom', isLegend ? 0 : 16);
+    view.attr('marginLeft', 0).attr('marginRight', 0).attr('marginBottom', isLegend ? 0 : 16);
     view.data(data);
     const domainMin = minY ?? 0;
     applyScaleYLinear(view, {
@@ -43,8 +43,11 @@ function renderG2LineChart(container, options) {
         lineWidth: 2,
         stroke: (datum)=>getColorByGroupType(datum[0]?.groupType ?? '', colorOpts)
     });
+    const xValueCount = new Set(data.map((d)=>d[x])).size;
     applyAxisX(view, {
-        grid: false
+        grid: false,
+        dataCount: xValueCount,
+        containerWidth: container.clientWidth
     });
     applyAxisY(view, {
         labelFormatter: formatAxis
@@ -81,9 +84,16 @@ function renderG2LineChart(container, options) {
                 })
         ]
     });
+    const tooltipBounding = {
+        x: 0,
+        y: 0,
+        width: container.clientWidth || container.offsetWidth,
+        height: height
+    };
     if (tooltipRender) view.interaction('tooltip', {
         shared: true,
         marker: false,
+        bounding: tooltipBounding,
         render: (_event, payload)=>{
             const { title, items } = payload;
             console.log('tooltipRender:', title, items, indicators);
@@ -112,6 +122,16 @@ function renderG2LineChart(container, options) {
         }
     });
     view.legend(false);
+    view.interaction('poptip', {
+        offsetY: -20,
+        offsetX: 0,
+        tipBackgroundColor: '#fcfcfc',
+        tipColor: '#333',
+        tipBorderRadius: '6px',
+        tipPadding: '10px 12px',
+        tipFontSize: '12px',
+        tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
+    });
     applyAuxiliaryLineY(view, auxiliaryLineData);
     const nodeList = [];
     console.log('nodeList data:', data);
@@ -174,7 +194,11 @@ function renderG2LineChart(container, options) {
         });
         view.labelTransform([
             {
-                type: 'overlapDodgeY'
+                type: 'exceedAdjust',
+                bounds: 'main'
+            },
+            {
+                type: 'overlapHide'
             }
         ]);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publishfx/publish-chart",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [