@publishfx/publish-chart 2.1.2 → 2.1.4

package/CHANGELOG.md

@@ -1,4 +1,17 @@
-**2.1.1** feat(chart): 柱状图支持crossharisY
+**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)
+
+**2.1.3** fix(chart): 组合图分组时inset置为0
+- 2026-02-28T23:48:20+08:00 [fix(chart): 组合图分组时inset置为0](http://lf.git.oa.mt/publish_platform/web/publish/commit/047e02d3cfbce21101277f48e904864163b2a02c)
+- 2026-02-28T22:42:20+08:00 [feat(chart): 组合图tooltip数据调整](http://lf.git.oa.mt/publish_platform/web/publish/commit/f79461050699b0755c8837e26b035083ec980cf1)
+- 2026-02-28T20:42:35+08:00 [feat(chart): 组合图默认值](http://lf.git.oa.mt/publish_platform/web/publish/commit/97613e165dc16ff1d415e01facafa11db4125a24)
+- 2026-02-28T20:42:08+08:00 [feat(chart): 组合图tooltips](http://lf.git.oa.mt/publish_platform/web/publish/commit/910af4376c2149ed44816d3eae4a3188f2601f54)
+- 2026-02-28T20:31:15+08:00 [feat(chart): 组合图增加着重日功能](http://lf.git.oa.mt/publish_platform/web/publish/commit/f88ce5905022454d3ac611cd16de73f6ae8c8d12)
+- 2026-02-28T20:08:16+08:00 [feat(chart): 设置着重interval的ratio为0.6](http://lf.git.oa.mt/publish_platform/web/publish/commit/057cb33eabe87d077b46b6271eea63a5e2879640)
+- 2026-02-28T20:02:39+08:00 [fix(chart): 修复组合图的ts错误](http://lf.git.oa.mt/publish_platform/web/publish/commit/a01f19528e46ee13d39f6de85c8ffc5fa9405ec5)
+- 2026-02-28T19:10:04+08:00 [feat(chart): 组合图支持分组](http://lf.git.oa.mt/publish_platform/web/publish/commit/525c1bbe47027ca3c4550adfea1c36e43c4dad34)
+- 2026-02-28T18:45:52+08:00 [feat(chart): 着重日逻辑优化](http://lf.git.oa.mt/publish_platform/web/publish/commit/3d57801fccaf67f69d3c08d19cc750fa36a2fa42)
 - 2026-02-28T18:37:26+08:00 [feat(chart): 柱状图支持crossharisY](http://lf.git.oa.mt/publish_platform/web/publish/commit/b77a0932f1710144915d209c0186640bafdff492)
 
 **2.1.1** feat(chart): 柱状图支持crossharisY

package/dist/adapters/DataAdapter.js

@@ -35,7 +35,7 @@ class DataAdapter {
                 callback: (a, b)=>{
                     if ('-' === a[config.y]) return config.isHorizontal ? -1 : 1;
                     if ('-' === b[config.y]) return config.isHorizontal ? 1 : -1;
-                    return config.isHorizontal ? a[config.y] - b[config.y] : b[config.y] - a[config.y];
+                    return b[config.y] - a[config.y];
                 }
             });
         }

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

@@ -122,6 +122,7 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
             isLegend: !!isCompare,
             isHorizontal,
             isHighlight,
+            isClickable: !!onChartClick,
             legend: safeLegend || void 0,
             formatLabel: isDataTag && safeY ? (d)=>{
                 const v = d[safeY];
@@ -160,8 +161,11 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
         });
         chartRef.current = chart;
         if (onChartClick) chart.on("element:click", (e)=>{
+            console.log('e:', e);
             const datum = e.data?.data;
-            if (datum) onChartClick(datum);
+            if (datum) onChartClick({
+                title: datum[x]
+            });
         });
         return ()=>{
             if (chartRef.current) {

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

@@ -137,11 +137,13 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             return;
         }
         const groupTypes = Array.from(new Set(transformedData.map((d)=>d.groupType.replace("_compare", "") + "_" + d.isCombine).filter((v)=>null != v)));
+        const lineGroupTypeArr = groupTypes.filter((v)=>"true" === v.split("_")[1]);
         const items = groupTypes.map((id, index)=>{
             const colorIndex = index;
             const indicatorId = id.split("_")[0];
             const isCombine = "true" === id.split("_")[1];
-            const color = isGroup ? themeColors[colorIndex] || themeColors[0] : 0 === colorIndex ? themeColors[colorIndex] : lineColors[colorIndex - 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];
             return {
                 id,
                 label: isGroup ? isCombine ? getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) : indicatorId : getIndicatorCompareName(safeIndicatorMap, String(indicatorId)) + (String(indicatorId).includes("_compare") ? `（对比时间：${timeRange?.compareStartTime}~${timeRange?.compareEndTime}）` : ""),
@@ -192,10 +194,11 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             isDataTag,
             isLegend: false,
             isCompare,
+            isClickable: !!onChartClick,
             height: height - canvasMarginBottom,
             formatLabel: isDataTag ? (d)=>{
                 const indicatorId = d.groupType.split("_")[0];
-                return "-" === formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]) ? "" : formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]);
+                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]);
             } : void 0,
             indicators,
             tooltipRender: (title, items)=>{
@@ -207,7 +210,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                     }));
                 safeItems = safeItems.filter((i)=>i.indicatorId);
                 react_dom.render(/*#__PURE__*/ jsx(G2CompareTooltip, {
-                    isGroupBar: true,
+                    isGroupBar: isGroup,
                     title: title,
                     items: safeItems,
                     safeIndicatorMap: safeIndicatorMap,
@@ -237,7 +240,9 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         chartRef.current = chart;
         if (onChartClick) chart.on("element:click", (e)=>{
             const datum = e.data?.data;
-            if (datum) onChartClick(datum);
+            if (datum) onChartClick({
+                title: datum[x]
+            });
         });
         return ()=>{
             if (chartRef.current) {
@@ -263,14 +268,6 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         isGroup,
         legendItems
     ]);
-    if (!z) return /*#__PURE__*/ jsx("div", {
-        style: {
-            width: "100%",
-            color: "#86909c",
-            padding: 16
-        },
-        children: "请传入 z 作为折线指标字段，以展示柱状+折线组合图。"
-    });
     return /*#__PURE__*/ jsxs("div", {
         style: {
             width: "100%",

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

@@ -12,7 +12,7 @@ import useG2TooltipContainer from "../shared/useG2TooltipContainer.js";
 import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
 import { G2BarLegend } from "./G2BarLegend.js";
 import { renderG2LineChart } from "./g2line.js";
-const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick: _onChartClick, timeRange, legend = "", config, nodeSetting = {
+const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, timeRange, legend = "", config, nodeSetting = {
     showType: 0,
     type: []
 }, auxiliaryLineData, highlightDate, indicators = [] })=>{
@@ -169,6 +169,12 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             }
         });
         chartRef.current = chart;
+        if (onChartClick) chart.on("element:click", (e)=>{
+            const datum = e.data?.data;
+            if (datum) onChartClick({
+                title: datum[x]
+            });
+        });
         return ()=>{
             if (chartRef.current) {
                 chartRef.current.off("element:click");

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

@@ -153,11 +153,14 @@ function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
         domainMax: 100,
         independent: true
     }).tooltip(false).axis('y', {
+        position: 'right',
         title: false,
         grid: false,
-        label: false
+        label: false,
+        tick: false
     });
     highlightInterval.style({
+        columnWidthRatio: 0.6,
         fill: '#cccccc',
         fillOpacity: isHighlight ? 0.3 : 0
     });
@@ -169,7 +172,8 @@ function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
     }).tooltip(true).axis('y', {
         title: false,
         grid: false,
-        label: false
+        label: false,
+        tick: false
     }).style({
         stroke: 'transparent',
         strokeOpacity: 0

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

@@ -33,6 +33,8 @@ export interface RenderG2BarChartOptions {
     isHighlight?: boolean;
     /** 图例字段名（与 y 不同时表示分组柱），通常为 groupType */
     isCompare?: boolean;
+    /** 是否启用点击事件 */
+    isClickable?: boolean;
     legend?: string;
     /** 数据标签格式化：formatLabel(datum) */
     formatLabel?: (datum: any) => string;

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

@@ -2,7 +2,7 @@ import { lines } from "@antv/g-pattern";
 import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
 const Y_AXIS_FIELD = 'groupValue';
 function renderG2BarChart(container, options) {
-    const { data, x, y, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], isDataTag = false, isLegend = true, isHorizontal = false, isHighlight = true, isCompare = false, legend, formatLabel, height = 300, tooltipRender, auxiliaryLineData = [], onNodeListChange, onChartRender } = options;
+    const { data, x, y, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], isDataTag = false, isLegend = true, isHorizontal = false, isHighlight = true, isCompare = false, isClickable = false, legend, formatLabel, height = 300, tooltipRender, auxiliaryLineData = [], onNodeListChange, onChartRender } = options;
     const colorOpts = {
         themeColors,
         primaryKey: y,
@@ -45,10 +45,12 @@ function renderG2BarChart(container, options) {
     interval.style({
         columnWidthRatio: 0.6,
         insetLeft: (_d, index, _data, _column)=>{
+            if (isHorizontal) return 0;
             if (isCompare) return index % 2 === 0 ? 4 : 0;
             return 4;
         },
         insetRight: (_d, index, _data, _column)=>{
+            if (isHorizontal) return 0;
             if (isCompare) return index % 2 === 1 ? 4 : 0;
             return 4;
         },
@@ -66,7 +68,8 @@ function renderG2BarChart(container, options) {
                 transform: 'rotate(-30deg)'
             };
             return getColorByGroupType(groupType, colorOpts);
-        }
+        },
+        cursor: isClickable ? 'pointer' : 'default'
     });
     applyAxisX(view, {
         grid: false

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

@@ -33,6 +33,8 @@ export interface RenderG2CombineChartOptions {
     isHighlight?: boolean;
     /** 是否启用对比期 */
     isCompare?: boolean;
+    /** 是否启用点击事件 */
+    isClickable?: boolean;
     /** 数据标签格式化：formatLabel(datum) */
     formatLabel?: (datum: any) => string;
     /** 图表高度 */

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

@@ -1,10 +1,11 @@
 import { lines } from "@antv/g-pattern";
-import { applyAxisX, createChart, getMainView } from "./g2Helpers.js";
+import { 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, indicators = [], tooltipRender, onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId } = 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 chart = createChart({
         container,
         height,
@@ -21,17 +22,12 @@ function renderG2CombineChart(container, options) {
     view.data(data);
     applyAxisX(view, {
         title: false,
-        grid: true,
-        gridStroke: '#333',
-        gridLineWidth: 50,
-        gridLineDash: [
-            1000
-        ],
-        gridFilter: highlightDate.length > 0 && isHighlight ? (val)=>highlightDate.includes(val?.label) : ()=>false
+        grid: false
     });
     const barColor = themeColors[0] ?? "#5B8FF9";
-    console.log('tooltip: themeColors:', themeColors[0], barColor);
+    console.log('tooltip: themeColors:', themeColors[0], barColor, isGroup);
     console.log('renderG2CombineChart interval data:', data.filter((item)=>!item.isCombine));
+    applyHighlightDate(view, x, data, highlightDate, isHighlight);
     const intervalData = data.filter((item)=>!item.isCombine).map((item)=>({
             ...item,
             [BAR_Y_FIELD]: item[Y_AXIS_FIELD]
@@ -44,9 +40,20 @@ function renderG2CombineChart(container, options) {
         type: 'stackY',
         reverse: true
     } : {
-        type: 'dodgeX'
+        type: 'dodgeX',
+        padding: 0
     }).style({
-        columnWidthRatio: 0.5,
+        columnWidthRatio: 0.6,
+        insetLeft: (_d, index, _data, _column)=>{
+            if (isGroup) return 0;
+            if (isCompare) return index % 2 === 0 ? 4 : 0;
+            return 4;
+        },
+        insetRight: (_d, index, _data, _column)=>{
+            if (isGroup) return 0;
+            if (isCompare) return index % 2 === 1 ? 4 : 0;
+            return 4;
+        },
         fill: (datum)=>{
             const groupType = String(datum.groupType ?? '');
             const index = legendItems.findIndex((item)=>item.id === `${groupType}_${datum.isCombine}`);
@@ -64,6 +71,7 @@ function renderG2CombineChart(container, options) {
             };
             return barColor;
         },
+        cursor: isClickable ? 'pointer' : 'default',
         stroke: 'transparent'
     });
     interval.scale('y', {
@@ -102,7 +110,8 @@ function renderG2CombineChart(container, options) {
                     indicatorId,
                     channel: Y_AXIS_FIELD,
                     color: themeColors[index % themeColors.length] ?? themeColors[0] ?? "#5B8FF9",
-                    percent: `${(100 * Number(datum.percent)).toFixed(2)}%`
+                    percent: `${(100 * Number(datum.percent)).toFixed(2)}%`,
+                    isCombine: false
                 };
             }
         ].filter(Boolean) : [
@@ -111,7 +120,8 @@ function renderG2CombineChart(container, options) {
                     name: datum['groupType'],
                     indicatorId: datum['groupType'],
                     channel: Y_AXIS_FIELD,
-                    color: barColor || 'transparent'
+                    color: barColor || 'transparent',
+                    isCombine: false
                 },
             isCompare ? (datum)=>datum.groupType.includes('_compare') ? {
                     value: datum[BAR_Y_FIELD],
@@ -119,14 +129,16 @@ function renderG2CombineChart(container, options) {
                     name: datum['groupType'],
                     indicatorId: datum['groupType'].replace('_compare', ''),
                     channel: Y_AXIS_FIELD,
-                    color: barColor || 'transparent'
+                    color: barColor || 'transparent',
+                    isCombine: false
                 } : false : false,
             isCompare ? (datum)=>datum.groupType.includes('_compare') ? {
                     name: datum['groupType'].replace('_compare', '_change'),
                     indicatorId: datum['groupType'].replace('_compare', ''),
                     value: datum?.change,
                     isChange: true,
-                    color: 'transparent'
+                    color: 'transparent',
+                    isCombine: false
                 } : false : false
         ].filter(Boolean)
     });
@@ -139,27 +151,43 @@ function renderG2CombineChart(container, options) {
             ...item,
             [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
+    console.log('compareLineData:', compareLineData);
     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);
+    const lineFinalMaxY = Math.max(lineMaxY, compareLineMaxY) || 1;
     console.log('lineFinalMaxY:', lineFinalMaxY);
     const line = view.line().data(lineData).encode("x", x).encode("y", LINE_Y_FIELD).encode('color', 'groupType').style({
         lineWidth: 2,
         stroke: (datum)=>{
+            const groupTypeSet = new Set(lineData.map((item)=>item.groupType));
+            const groupTypeArr = [
+                ...groupTypeSet
+            ];
             const groupType = String(datum[0]?.groupType ?? '');
-            const color = lineColors[indicators.slice(1).indexOf(String(groupType)) ?? 0];
+            const index = groupTypeArr.findIndex((item)=>item === groupType);
+            const color = isGroup ? lineColors[index] || lineColors[0] : lineColors[indicators.slice(1).indexOf(String(groupType)) ?? 0];
             return color;
         }
     });
     line.tooltip({
         items: [
-            (datum)=>({
+            (datum)=>{
+                const groupTypeSet = new Set(lineData.map((item)=>item.groupType));
+                const groupTypeArr = [
+                    ...groupTypeSet
+                ];
+                const groupType = String(datum[0]?.groupType ?? '');
+                const index = groupTypeArr.findIndex((item)=>item === groupType);
+                return {
                     value: datum[LINE_Y_FIELD],
-                    name: datum['groupType'],
+                    name: isGroup ? getIndicatorCompareName(_indicatorMap, datum['groupType']) : datum['groupType'],
                     indicatorId: datum['groupType'],
                     channel: Y_AXIS_FIELD,
-                    color: lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent'
-                })
+                    color: isGroup ? lineColors[index] || lineColors[0] : lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent',
+                    isCombine: true,
+                    tipType: 'line'
+                };
+            }
         ]
     });
     line.scale('y', {
@@ -168,7 +196,7 @@ function renderG2CombineChart(container, options) {
         domainMax: lineFinalMaxY,
         nice: true,
         clamp: true,
-        key: 'bar',
+        key: 'line',
         independent: true,
         tickMethod: (min, max)=>Array.from({
                 length: 6
@@ -209,32 +237,45 @@ function renderG2CombineChart(container, options) {
     console.log('hasCompareData:', hasCompareData, data);
     if (hasCompareData) compareLine.tooltip({
         items: [
-            (datum)=>({
+            (datum)=>datum.groupType.includes('_compare') ? {
                     value: datum[LINE_Y_FIELD],
                     compareTime: datum?.compareTime,
                     name: datum['groupType'],
                     indicatorId: datum['groupType'].replace('_compare', ''),
                     channel: Y_AXIS_FIELD,
-                    color: lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent'
-                }),
-            (datum)=>({
+                    color: lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent',
+                    isCombine: true,
+                    tipType: 'compareline'
+                } : false,
+            (datum)=>datum.groupType.includes('_compare') ? {
                     name: datum['groupType'].replace('_compare', '_change'),
                     indicatorId: datum['groupType'].replace('_compare', ''),
+                    color: 'blue',
                     value: datum?.change,
                     isChange: true,
-                    color: 'transparent'
-                })
-        ]
+                    isCombine: true,
+                    tipType: 'compareline'
+                } : false
+        ].filter(Boolean)
     });
-    if (tooltipRender) line.interaction('tooltip', {
+    if (tooltipRender) view.interaction('tooltip', {
         shared: true,
         crosshairsY: true,
         marker: false,
         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,
+                ...combineItems
+            ]) ?? null;
             if (indicators.length) {
-                const groupedItems = indicators.map((indicator)=>items.filter((i)=>i.indicatorId === String(indicator)));
+                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),
@@ -244,8 +285,9 @@ function renderG2CombineChart(container, options) {
                 console.log(sortedItems, 'tooltip sortedItems');
                 const formatItems = sortedItems.map((item)=>({
                         ...item,
-                        color: lineColors[indicators.slice(1).indexOf(String(item?.indicatorId)) ?? 0] || barColor || 'transparent'
+                        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;
             }
         }
@@ -314,11 +356,27 @@ 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: -10,
+            dy: isGroup ? -16 : -10,
             dx: -10,
             offset: 0,
-            text: (d)=>formatLabel(d)
+            text: (d)=>{
+                if (!isGroup) return formatLabel(d);
+                if (lastItemsInEachStack.has(d)) return formatLabel(d);
+                return '';
+            }
         });
         line.label({
             dy: -10,

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

@@ -30,10 +30,10 @@ function renderG2LineChart(container, options) {
         clamp: true
     });
     applyHighlightDate(view, x, data, highlightDate, isHighlight);
-    console.log('g2linets:', x, Y_AXIS_FIELD, data);
-    const line = view.line().data(data.filter((item)=>!item.groupType.includes('_compare'))).encode('x', x).encode('y', Y_AXIS_FIELD).encode('color', 'groupType').style({
+    console.log('g2linets:', x, Y_AXIS_FIELD, data, indicators);
+    const line = view.line().data(data.filter((item)=>!item.groupType.includes('_compare'))).encode('x', x).encode('y', Y_AXIS_FIELD).encode('color', 'groupType').encode('series', 'groupType').style({
         lineWidth: 2,
-        stroke: (_datum, index)=>themeColors[index] ?? themeColors[0]
+        stroke: (datum)=>getColorByGroupType(datum[0]?.groupType ?? '', colorOpts)
     });
     const compareLine = view.line().data(data.filter((item)=>item.groupType.includes('_compare'))).encode('x', x).encode('y', Y_AXIS_FIELD).encode('color', 'groupType').style({
         lineDash: [
@@ -41,7 +41,7 @@ function renderG2LineChart(container, options) {
             4
         ],
         lineWidth: 2,
-        stroke: (_datum, index)=>themeColors[index] ?? themeColors[0]
+        stroke: (datum)=>getColorByGroupType(datum[0]?.groupType ?? '', colorOpts)
     });
     applyAxisX(view, {
         grid: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publishfx/publish-chart",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [
@@ -24,20 +24,10 @@
     "CHANGELOG.md",
     "README.md"
   ],
-  "scripts": {
-    "build": "rslib build",
-    "dev": "rslib build --watch",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage"
-  },
   "devDependencies": {
     "@antv/data-set": "^0.11.8",
     "@antv/g-pattern": "^2.0.42",
     "@antv/g2": "^5.3.0",
-    "@publishfx/publish-components": "workspace:^",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.20",
     "@types/react": "^18.3.18",
@@ -55,7 +45,8 @@
     "react-dom": "^18.3.1",
     "styled-components": "^5.3.11",
     "ts-jest": "^29.1.2",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "@publishfx/publish-components": "^2.1.0"
   },
   "peerDependencies": {
     "@antv/data-set": "^0.11.8",
@@ -71,5 +62,14 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "dev": "rslib build --watch",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   }
-}
+}