@publishfx/publish-chart 2.1.6 → 2.1.8

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+**2.1.8** feat(chart): 柱状、折线、组合图的节点单独传递
+- 2026-03-04T11:59:34+08:00 [feat(chart): 柱状、折线、组合图的节点单独传递](http://lf.git.oa.mt/publish_platform/web/publish/commit/5ef7b6c79b51438f7ae49edce74e060e5ffbd595)
+- 2026-03-04T11:45:15+08:00 [fix(chart): 将node信息单独传递](http://lf.git.oa.mt/publish_platform/web/publish/commit/20b4209876bd464ff63674480eb3a308e7007a02)
+- 2026-03-04T00:58:03+08:00 [fix(chart): 辅助线问题统一修复](http://lf.git.oa.mt/publish_platform/web/publish/commit/c40294f244ee7d8036ed1e92594b5e51980b55d0)
+- 2026-03-04T00:18:41+08:00 [fix(chart): 辅助线scale统一设置为key:main](http://lf.git.oa.mt/publish_platform/web/publish/commit/67bf1b6913dd301aa3f1d840909e53bd6c6efcb2)
+- 2026-03-03T23:26:48+08:00 [fix(chart): 组合图对比时间color设置修改](http://lf.git.oa.mt/publish_platform/web/publish/commit/3835d8c1ddc7937550daf45122f335f678e0730b)
+- 2026-03-03T23:01:20+08:00 [fix(chart): inset边距去掉](http://lf.git.oa.mt/publish_platform/web/publish/commit/b96fec0d5939c9836caf5f8ceb51a988410d5e28)
+- 2026-03-03T21:37:11+08:00 [feat(chart): 折线图图例根据indicators排序](http://lf.git.oa.mt/publish_platform/web/publish/commit/2d366548ba1aa170659f9c645f95045f4f510924)
+
+**2.1.7** fix(chart): 修复折线图有空数据的异常场景
+- 2026-03-03T17:50:03+08:00 [fix(chart): 修复折线图有空数据的异常场景](http://lf.git.oa.mt/publish_platform/web/publish/commit/3465ede843d4fb156932871cdf042315dbb17096)
+- 2026-03-03T17:38:27+08:00 [fix(chart): 组合图柱数据缺失问题优化](http://lf.git.oa.mt/publish_platform/web/publish/commit/fa55e35a7569b9e7000d2c4dc5d09eee3b60bfff)
+- 2026-03-03T17:35:16+08:00 [fix: tserror](http://lf.git.oa.mt/publish_platform/web/publish/commit/995efdbe45391ecdb06ef6838c65d9bc87c33efa)
+- 2026-03-03T17:28:25+08:00 [feat: 去掉element:click](http://lf.git.oa.mt/publish_platform/web/publish/commit/5bb84001d505392306f4dfd8300e7d21f47fe95b)
+- 2026-03-03T17:26:42+08:00 [fix: 折线图点击无法下钻](http://lf.git.oa.mt/publish_platform/web/publish/commit/5395a60b96d9db398d5a4c5c8610481cbba8362a)
+- 2026-03-03T16:36:31+08:00 [fix: label缩略时要设置minLength](http://lf.git.oa.mt/publish_platform/web/publish/commit/b11ff5ff52376442f3a9b057b942f0d47c4f9ee5)
+- 2026-03-03T14:19:39+08:00 [feat(chart): 组合图排序代码整理](http://lf.git.oa.mt/publish_platform/web/publish/commit/baab4ed6bbd0a3bac46fccb1d3875af241368770)
+
 **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)

package/dist/adapters/DataAdapter.js

@@ -106,7 +106,7 @@ class DataAdapter {
         if (config.y) dv.transform({
             type: 'map',
             callback: (row)=>{
-                row[config.y] = '' !== row[config.y] ? +row[config.y] : '-';
+                row[config.y] = '' !== row[config.y] && '-' !== row[config.y] && null !== row[config.y] ? +row[config.y] : '-';
                 return row;
             }
         });
@@ -158,10 +158,15 @@ class DataAdapter {
             });
             const xKey = config.x ?? 'x';
             const sortData = tdv.rows.map((item)=>item[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]));
+            combinedv.rows.sort((a, b)=>{
+                const aIndex = sortData.indexOf(a[xKey]);
+                const bIndex = sortData.indexOf(b[xKey]);
+                if (-1 === aIndex) return 1;
+                if (-1 === bIndex) return -1;
+                return aIndex - bIndex;
+            });
         }
-        console.log('renderG2CombineChart transformedData:leftData:', tdv.rows, 'rightData:', combinedv.rows);
+        console.log('leftData:', tdv.rows, 'rightData:', combinedv.rows);
         return {
             transformedData: dv.rows,
             leftData: tdv.rows,

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

@@ -50,6 +50,7 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
         contextConfig.nodeMap
     ]);
     console.log("transformedData: bar final", transformedData);
+    const nodeData = transformedData.filter((item)=>item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0);
     const maxY = useMemo(()=>{
         const values = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]) || 0);
         const dataMax = values.length > 0 ? Math.max(...values) : 0;
@@ -110,6 +111,7 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
         }
         const chart = renderG2BarChart(containerRef.current, {
             data: filteredData,
+            nodeData,
             x,
             y: safeY,
             maxY,
@@ -149,7 +151,7 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
             },
             auxiliaryLineData: auxiliaryLineData ?? [],
             onNodeListChange: (nodes)=>{
-                console.log("g2bar node list:", nodes, nodes[0], nodes[1]);
+                console.log("g2bar node list:", nodes);
                 setXYList(nodes);
             },
             timeRange,

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

@@ -11,6 +11,7 @@ import useG2TooltipContainer from "../shared/useG2TooltipContainer.js";
 import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
 import { renderG2CombineChart } from "./g2combine.js";
 import { G2BarLegend } from "./G2BarLegend.js";
+import { sortByIndicators } from "./g2Helpers.js";
 const transformDataToGroupBarLineFormat = (data, x = "groupName", y = "", indicators)=>{
     if (!data || 0 === data.length) return [];
     return data.map((item)=>{
@@ -109,6 +110,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         isDescend
     ]);
     console.log("G2CombineChart transformedData:", transformedData, leftData, rightData);
+    const nodeData = transformedData.filter((item)=>item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0);
     const { maxY } = useMemo(()=>{
         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);
@@ -134,8 +136,9 @@ 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 sortedGroupTypes = sortByIndicators(groupTypes, indicators);
+        const lineGroupTypeArr = sortedGroupTypes.filter((v)=>"true" === v.split("_")[1]);
+        const items = sortedGroupTypes.map((id, index)=>{
             const colorIndex = index;
             const indicatorId = id.split("_")[0];
             const isCombine = "true" === id.split("_")[1];
@@ -160,7 +163,8 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
     }, [
         transformedData,
         safeIndicatorMap,
-        themeColors
+        themeColors,
+        indicators
     ]);
     const filterLeftData = useMemo(()=>{
         if (!activeIds.length) return leftData;
@@ -202,6 +206,7 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
         console.log("canvasMarginBottom:", canvasMarginBottom);
         const chart = renderG2CombineChart(containerRef.current, {
             data: filteredData,
+            nodeData,
             x,
             y: safeY,
             z,

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

@@ -7,6 +7,7 @@ import { DataAdapter } from "../../../adapters/DataAdapter.js";
 import { NodePopover } from "../../shared/NodePopover.js";
 import { NodeDetail } from "../../shared/NodeDetail.js";
 import { transformIndicatorList } from "../../../utils/dataTransform.js";
+import { sortByIndicators } from "./g2Helpers.js";
 import G2CompareTooltip from "../shared/G2CompareTooltip.js";
 import useG2TooltipContainer from "../shared/useG2TooltipContainer.js";
 import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
@@ -31,6 +32,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
     const [legendItems, setLegendItems] = useState([]);
     const containerRef = useRef(null);
     const chartRef = useRef(null);
+    const currentTooltipTitleRef = useRef(null);
     const [viewWidth, setViewWidth] = useState(0);
     const [viewOffset, setViewOffset] = useState(0);
     const transformedData = useMemo(()=>{
@@ -51,6 +53,8 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
         dataTransform,
         contextConfig.nodeMap
     ]);
+    const nodeData = transformedData.filter((item)=>item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0);
+    console.log('nodeData:', nodeData);
     const { minY, maxY } = useMemo(()=>{
         const dataValues = transformedData.filter((item)=>"-" !== item[safeY] && void 0 !== item[safeY] && null !== item[safeY]).map((item)=>Number(item[safeY]));
         const compareValues = transformedData.filter((item)=>"-" !== item["subGroupValue"] && null != item["subGroupValue"]).map((item)=>Number(item["subGroupValue"]));
@@ -83,7 +87,8 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             return;
         }
         const groupTypes = Array.from(new Set(transformedData.map((d)=>d.groupType).filter((v)=>null != v)));
-        const items = groupTypes.map((id, index)=>{
+        const sortedGroupTypes = sortByIndicators(groupTypes, indicators);
+        const items = sortedGroupTypes.map((id, index)=>{
             const colorIndex = isCompare ? Math.floor(index / 2) : index;
             return {
                 id: String(id),
@@ -104,7 +109,8 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
     }, [
         transformedData,
         safeIndicatorMap,
-        themeColors
+        themeColors,
+        indicators
     ]);
     const filteredData = useMemo(()=>{
         if (!activeIds.length) return transformedData;
@@ -123,6 +129,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
         console.log("G2LineChart", x, y, minY, maxY);
         const chart = renderG2LineChart(containerRef.current, {
             data: filteredData,
+            nodeData,
             x,
             y: safeY,
             minY,
@@ -143,6 +150,7 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             } : void 0,
             height: height - canvasMarginBottom,
             tooltipRender: (title, items)=>{
+                currentTooltipTitleRef.current = title;
                 const container = tooltipContainerRef.current;
                 if (!container) return null;
                 let safeItems = items.map((i)=>({
@@ -174,15 +182,18 @@ 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]
-            });
+        if (onChartClick) chart.on("plot:click", (_e)=>{
+            const tooltipTitle = currentTooltipTitleRef.current;
+            if (null != tooltipTitle) {
+                console.log('使用 tooltip title 触发下钻:', tooltipTitle);
+                onChartClick({
+                    title: tooltipTitle
+                });
+            }
         });
         return ()=>{
             if (chartRef.current) {
-                chartRef.current.off("element:click");
+                chartRef.current.off("plot:click");
                 chartRef.current.off("element:mouseenter");
                 chartRef.current.off("element:mouseleave");
                 chartRef.current.destroy();

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

@@ -194,6 +194,7 @@ export declare function getMainView(chart: Chart): import("@antv/g2/lib/api/exte
     'composition.view': any;
 }>;
 export interface ScaleYLinearOptions {
+    key?: string;
     field?: string;
     domainMin?: number;
     domainMax?: number;
@@ -296,4 +297,13 @@ 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 applyNodeData(view: any, nodeData: any[], x: string, y: string): {
+    pointP: {
+        x: number;
+        y: number;
+    };
+    pointData: any;
+    color: string;
+}[];
 export declare function adjustDomainMax(domainMin: number, domainMax: number): number;
+export declare const sortByIndicators: (arr: string[], indicators: string[]) => string[];

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

@@ -14,7 +14,7 @@ function getMainView(chart) {
     return layer.view();
 }
 function applyScaleYLinear(view, options = {}) {
-    const { field = 'y', domainMin = 0, domainMax, nice = true, clamp = true, tickCount = 5, minLimit, maxLimit, tickMethod } = options;
+    const { field = 'y', domainMin = 0, domainMax, nice = true, clamp = true, tickCount = 5, minLimit, maxLimit, tickMethod, key } = options;
     view.scale({
         [field]: {
             type: 'linear',
@@ -25,6 +25,7 @@ function applyScaleYLinear(view, options = {}) {
             clamp,
             nice,
             tickCount,
+            key,
             ...null != minLimit && {
                 minLimit
             },
@@ -76,6 +77,7 @@ function applyAxisX(mark, options = {}) {
         size: isHorizontal ? Math.floor(containerWidth / 5) : 30,
         labelAutoEllipsis: {
             type: 'ellipsis',
+            minLength: 80,
             maxLength: isHorizontal ? Math.floor(containerWidth / 5) : Math.min(maxLabelChars * fontSize * 0.55, 90)
         },
         labelAlign: 'horizontal',
@@ -147,18 +149,19 @@ 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').axis('y', {
-            title: false,
-            grid: false,
-            label: false,
-            tick: false
-        }).label({
+        console.log('lines:', auxLine);
+        view.lineY().encode('y', auxLine.value).style('stroke', stroke).style('strokeOpacity', strokeOpacity).style('lineWidth', 1).style('shadowColor', 'transparent').scale('y', {
+            key: auxLine?.axis === 'right' ? 'line' : 'main'
+        }).axis('x', false).label({
             dx: 0,
-            dy: -5,
-            text: splitTextToMultiline(auxLine.name, labelMaxLength, '<br />'),
+            dy: 0,
+            text: splitTextToMultiline(auxLine.name, labelMaxLength, '\n'),
             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>`
+            style: {
+                fill: stroke,
+                shadowColor: 'transparent',
+                fillOpacity: 1
+            }
         });
     });
 }
@@ -182,7 +185,7 @@ function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
         domainMax: 100,
         independent: true
     }).tooltip(false).axis('y', {
-        position: 'right',
+        position: 'top',
         title: false,
         grid: false,
         label: false,
@@ -199,16 +202,75 @@ function applyHighlightDate(view, x, data, highlightDate, isHighlight) {
         domainMax: 100,
         independent: true
     }).tooltip(true).axis('y', {
+        position: 'top',
         title: false,
         grid: false,
         label: false,
         tick: false
     }).style({
         stroke: 'transparent',
-        strokeOpacity: 0
+        strokeOpacity: 1
     });
 }
+function applyNodeData(view, nodeData, x, y) {
+    const nodeList = [];
+    nodeData.forEach((item)=>{
+        view.shape().data([
+            {
+                [x]: item[x],
+                [y]: 0
+            }
+        ]).encode('x', x).encode('y', y).tooltip(false).scale('y', {
+            key: 'main'
+        }).style({
+            render: ({ x: px, y: py }, context)=>{
+                const { document } = context;
+                const g = document.createElement('g', {});
+                const { paddingLeft = 24, marginLeft = 12 } = context?.coordinate?.options || {};
+                const adjustLeft = paddingLeft + marginLeft;
+                if (item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0) {
+                    nodeList.push({
+                        pointP: {
+                            x: px + adjustLeft,
+                            y: py
+                        },
+                        pointData: item.nodeInfos || {},
+                        color: item.color
+                    });
+                    const c1 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 2,
+                            fill: 'white'
+                        }
+                    });
+                    const c2 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 5,
+                            fill: item.color
+                        }
+                    });
+                    g.appendChild(c2);
+                    g.appendChild(c1);
+                }
+                return g;
+            }
+        });
+    });
+    return nodeList;
+}
 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 };
+const sortByIndicators = (arr, indicators)=>arr.sort((a, b)=>{
+        const baseA = a.split('_')[0];
+        const baseB = b.split('_')[0];
+        const indexA = indicators.indexOf(baseA);
+        const indexB = indicators.indexOf(baseB);
+        if (-1 !== indexA && -1 !== indexB) return indexA - indexB;
+        return 0;
+    });
+export { adjustDomainMax, applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyLegendColor, applyNodeData, applyScaleYLinear, createChart, getColorByGroupType, getMainView, sortByIndicators };

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

@@ -3,6 +3,8 @@ import type { ChartTimeRange } from '../../../core/ChartTypes';
 export interface RenderG2BarChartOptions {
     /** 已转换后的数据：约定包含 groupName、groupType、groupValue 等字段 */
     data: any[];
+    /** 节点数据 */
+    nodeData: any[];
     /** X 轴字段，如 groupName */
     x: string;
     /** Y 轴字段，如 groupValue / cost */

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

@@ -1,8 +1,10 @@
 import { lines } from "@antv/g-pattern";
-import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
+import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyNodeData, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
 const Y_AXIS_FIELD = 'groupValue';
+const CLOSE_NODE_DEBUG = false;
+const CLOSE_HIGHLIGHT_DEBUG = false;
 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, isClickable = false, legend, formatLabel, height = 300, tooltipRender, auxiliaryLineData = [], onNodeListChange, onChartRender } = options;
+    const { data, nodeData, 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,
@@ -30,13 +32,11 @@ function renderG2BarChart(container, options) {
     });
     view.data(data);
     applyScaleYLinear(view, {
-        field: 'y',
         domainMin: 0,
         domainMax: maxY,
-        nice: true,
-        clamp: true
+        key: 'main'
     });
-    applyHighlightDate(view, x, data, highlightDate, isHighlight);
+    if (!CLOSE_HIGHLIGHT_DEBUG) applyHighlightDate(view, x, data, highlightDate, isHighlight);
     console.log('g2bar data:', data, y);
     const interval = view.interval().encode('x', x).encode('y', y).encode('color', 'groupType').transform({
         type: 'dodgeX',
@@ -145,52 +145,11 @@ function renderG2BarChart(container, options) {
         bounding: tooltipBounding
     });
     applyAuxiliaryLineY(view, auxiliaryLineData);
-    const nodeList = [];
     console.log('nodeList data:', data);
-    data.forEach((item)=>{
-        view.shape().data([
-            {
-                [x]: item[x],
-                [y]: 0
-            }
-        ]).encode('x', x).encode('y', y).tooltip(false).style({
-            render: ({ x: px, y: py }, context)=>{
-                const { document } = context;
-                const g = document.createElement('g', {});
-                const { paddingLeft = 24, marginLeft = 12 } = context?.coordinate?.options || {};
-                const adjustLeft = paddingLeft + marginLeft;
-                if (item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0) {
-                    nodeList.push({
-                        pointP: {
-                            x: px + adjustLeft,
-                            y: py
-                        },
-                        pointData: item.nodeInfos || {},
-                        color: item.color
-                    });
-                    const c1 = document.createElement('circle', {
-                        style: {
-                            cx: px,
-                            cy: py,
-                            r: 2,
-                            fill: 'white'
-                        }
-                    });
-                    const c2 = document.createElement('circle', {
-                        style: {
-                            cx: px,
-                            cy: py,
-                            r: 5,
-                            fill: item.color
-                        }
-                    });
-                    g.appendChild(c2);
-                    g.appendChild(c1);
-                }
-                return g;
-            }
-        });
-    });
+    if (!CLOSE_NODE_DEBUG) {
+        const nodeList = applyNodeData(view, nodeData, x, y);
+        onNodeListChange?.(nodeList);
+    }
     if (isDataTag && formatLabel) interval.label({
         text: (d)=>formatLabel(d),
         position: isHorizontal ? 'right' : 'top',
@@ -208,7 +167,6 @@ function renderG2BarChart(container, options) {
     let hasEmittedNodeList = false;
     chart.on('afterrender', (_e)=>{
         if (hasEmittedNodeList) return;
-        if (onNodeListChange) onNodeListChange(nodeList);
         console.log('chart.coordinateBBox:', chart.getContext(), view.getCoordinate());
         const views = chart.getContext()?.views;
         const viewCoordinate = views?.[0]?.layout;

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

@@ -8,6 +8,8 @@ import { type AuxiliaryLineItem } from "./g2Helpers";
 export interface RenderG2CombineChartOptions {
     /** 已转换后的数据：约定包含 groupName、groupType、groupValue 等字段 */
     data: any[];
+    /** 节点数据 */
+    nodeData: any[];
     /** X 轴字段，如 groupName */
     x: string;
     /** 柱状图 Y 字段，如 groupValue 或某指标字段 */

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

@@ -1,11 +1,11 @@
 import { lines } from "@antv/g-pattern";
-import { applyAuxiliaryLineY, applyAxisX, applyHighlightDate, createChart, getMainView } from "./g2Helpers.js";
+import { applyAuxiliaryLineY, applyAxisX, applyHighlightDate, applyNodeData, applyScaleYLinear, 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 = 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 { data, nodeData, 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,
@@ -52,14 +52,15 @@ function renderG2CombineChart(container, options) {
     }).style({
         columnWidthRatio: 0.6,
         insetLeft: (_d, index, _data, _column)=>{
+            console.log('insetLeft:', index, isCompare);
             if (isGroup) 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 (isGroup) 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 ?? '');
@@ -81,17 +82,15 @@ function renderG2CombineChart(container, options) {
         cursor: isClickable ? 'pointer' : 'default',
         stroke: 'transparent'
     });
-    interval.scale('y', {
-        type: 'linear',
+    const chartScale = {
         domainMin: 0,
         domainMax: finalIntervalMax,
-        nice: true,
-        clamp: true,
-        key: 'bar',
+        key: 'main',
         tickMethod: (min, max)=>Array.from({
                 length: 6
             }, (_, i)=>min + (max - min) * i / 5)
-    });
+    };
+    applyScaleYLinear(interval, chartScale);
     interval.axis('y', {
         position: 'left',
         title: false,
@@ -198,18 +197,15 @@ function renderG2CombineChart(container, options) {
             }
         ]
     });
-    line.scale('y', {
-        type: 'linear',
+    const chartSideScale = {
         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)
-    });
+    };
+    applyScaleYLinear(line, chartSideScale);
     line.axis('y', {
         position: 'right',
         title: false,
@@ -266,7 +262,7 @@ function renderG2CombineChart(container, options) {
             (datum)=>datum.groupType.includes('_compare') ? {
                     name: datum['groupType'].replace('_compare', '_change'),
                     indicatorId: datum['groupType'].replace('_compare', ''),
-                    color: 'blue',
+                    color: 'transparent',
                     value: datum?.change,
                     isChange: true,
                     isCombine: true,
@@ -360,68 +356,8 @@ function renderG2CombineChart(container, options) {
         tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
     });
     applyAuxiliaryLineY(view, auxiliaryLineData);
-    const nodeList = [];
-    console.log('nodeList data:', data);
-    data.forEach((item)=>{
-        view.shape().data([
-            {
-                [x]: item[x],
-                [y]: 0
-            }
-        ]).encode('x', x).encode('y', y).tooltip(false).scale('y', {
-            key: 'node',
-            domainMin: 0,
-            domainMax: 1,
-            nice: true,
-            clamp: true
-        }).axis('y', {
-            grid: false,
-            title: false,
-            tick: false,
-            label: false,
-            gridStrokeOpacity: 1,
-            gridLineDash: [
-                0,
-                0
-            ]
-        }).style({
-            render: ({ x: px, y: py }, context)=>{
-                const { document } = context;
-                const g = document.createElement('g', {});
-                const { paddingLeft = 24, marginLeft = 12 } = context?.coordinate?.options || {};
-                const adjustLeft = paddingLeft + marginLeft;
-                if (item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0) {
-                    nodeList.push({
-                        pointP: {
-                            x: px + adjustLeft,
-                            y: py
-                        },
-                        pointData: item.nodeInfos || {},
-                        color: item.color
-                    });
-                    const c1 = document.createElement('circle', {
-                        style: {
-                            cx: px,
-                            cy: py,
-                            r: 2,
-                            fill: 'white'
-                        }
-                    });
-                    const c2 = document.createElement('circle', {
-                        style: {
-                            cx: px,
-                            cy: py,
-                            r: 5,
-                            fill: item.color
-                        }
-                    });
-                    g.appendChild(c2);
-                    g.appendChild(c1);
-                }
-                return g;
-            }
-        });
-    });
+    const nodeList = applyNodeData(view, nodeData, x, 'groupValue');
+    onNodeListChange?.(nodeList);
     if (formatLabel) {
         if (isDataTag) {
             const groupedByX = intervalData.reduce((acc, item)=>{

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

@@ -7,6 +7,8 @@ import { ChartTimeRange } from '../../../core/ChartTypes';
 export interface RenderG2LineChartOptions {
     /** 已转换后的数据（含 groupValue，groupType 可能带 _compare） */
     data: any[];
+    /** 节点数据 */
+    nodeData: any[];
     /** X 轴字段，如 groupName */
     x: string;
     /** 主指标 key，用于取色与图例 */

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

@@ -1,7 +1,7 @@
-import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
+import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyNodeData, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
 const Y_AXIS_FIELD = 'groupValue';
 function renderG2LineChart(container, options) {
-    const { data, x, y, minY, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], auxiliaryLineData = [], isDataTag = false, isLegend = true, isHighlight = true, formatLabel, height = 300, legendLength: _legendLength, legendSize: _legendSize, tooltipRender, onNodeListChange, onChartRender } = options;
+    const { data, nodeData, x, y, minY, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], auxiliaryLineData = [], isDataTag = false, isLegend = true, isHighlight = true, formatLabel, height = 300, legendLength: _legendLength, legendSize: _legendSize, tooltipRender, onNodeListChange, onChartRender } = options;
     console.log('g2line data:', data, x, y);
     const colorOpts = {
         themeColors,
@@ -23,11 +23,9 @@ function renderG2LineChart(container, options) {
     view.data(data);
     const domainMin = minY ?? 0;
     applyScaleYLinear(view, {
-        field: 'y',
         domainMin,
         domainMax: maxY,
-        nice: true,
-        clamp: true
+        key: 'main'
     });
     applyHighlightDate(view, x, data, highlightDate, isHighlight);
     console.log('g2linets:', x, Y_AXIS_FIELD, data, indicators);
@@ -80,7 +78,8 @@ function renderG2LineChart(container, options) {
                     indicatorId: datum['groupType'].replace('_compare', ''),
                     value: datum?.change,
                     isChange: true,
-                    color: 'transparent'
+                    color: 'transparent',
+                    hidden: indicators?.length > 1
                 })
         ]
     });
@@ -133,52 +132,8 @@ function renderG2LineChart(container, options) {
         tipBoxShadow: '0 3px 6px -4px rgba(0, 0, 0, 1)'
     });
     applyAuxiliaryLineY(view, auxiliaryLineData);
-    const nodeList = [];
-    console.log('nodeList data:', data);
-    data.forEach((item)=>{
-        view.shape().data([
-            {
-                [x]: item[x],
-                [y]: 0
-            }
-        ]).encode('x', x).encode('y', y).tooltip(false).style({
-            render: ({ x: px, y: py }, context)=>{
-                const { document } = context;
-                const g = document.createElement('g', {});
-                const { paddingLeft = 24, marginLeft = 12 } = context?.coordinate?.options || {};
-                const adjustLeft = paddingLeft + marginLeft;
-                if (item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0) {
-                    nodeList.push({
-                        pointP: {
-                            x: px + adjustLeft,
-                            y: py
-                        },
-                        pointData: item.nodeInfos || {},
-                        color: item.color
-                    });
-                    const c1 = document.createElement('circle', {
-                        style: {
-                            cx: px,
-                            cy: py,
-                            r: 2,
-                            fill: 'white'
-                        }
-                    });
-                    const c2 = document.createElement('circle', {
-                        style: {
-                            cx: px,
-                            cy: py,
-                            r: 5,
-                            fill: item.color
-                        }
-                    });
-                    g.appendChild(c2);
-                    g.appendChild(c1);
-                }
-                return g;
-            }
-        });
-    });
+    const nodeList = applyNodeData(view, nodeData, x, y);
+    onNodeListChange?.(nodeList);
     if (isDataTag && formatLabel) {
         line.label({
             dy: -10,

package/dist/components/g2/shared/G2CompareTooltip.d.ts

@@ -6,6 +6,7 @@ type Item = {
     compareTime?: undefined | string;
     indicatorId?: string;
     percent?: string | number;
+    hidden?: boolean;
 };
 interface Props {
     isGroupBar?: boolean;

package/dist/components/g2/shared/G2CompareTooltip.js

@@ -13,14 +13,14 @@ const G2CompareTooltip = ({ isGroupBar = false, title, items, safeIndicatorMap,
             /*#__PURE__*/ jsx("div", {
                 children: title
             }),
-            items?.map(({ color, value, isChange, compareTime, indicatorId, name, percent }, index)=>{
+            items?.map(({ color, value, isChange, compareTime, indicatorId, name, percent, hidden }, index)=>{
                 let isFirst = false;
                 if (0 === index) auxiIndicatorId = indicatorId ?? "";
                 if (color && !uniqueColors.includes(color)) {
                     isFirst = true;
                     uniqueColors.push(color);
                 }
-                return /*#__PURE__*/ jsxs("div", {
+                return !hidden && /*#__PURE__*/ jsxs("div", {
                     style: {
                         display: "flex",
                         justifyContent: "space-between",

package/package.json

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