@publishfx/publish-chart 2.1.7 → 2.1.9

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+**2.1.9** feat(chart): 组合图折线色彩设置
+- 2026-03-04T16:45:43+08:00 [feat(chart): 组合图折线色彩设置](http://lf.git.oa.mt/publish_platform/web/publish/commit/2d456a5bd13fbed534b125a71955e8d18f62bbfc)
+- 2026-03-04T16:42:51+08:00 [feat(chart): 组合图副轴最大值逻辑复原](http://lf.git.oa.mt/publish_platform/web/publish/commit/6a1e758f64f6e7ef202c8089afecdd49580cf133)
+- 2026-03-04T16:28:16+08:00 [fix(chart): 解决缺数据场景下的tooltip问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/163c2e4e4ca33c92179a505b18f8f4e03d4d5229)
+- 2026-03-04T16:18:04+08:00 [feat(chart): 固定组合图副轴最大值](http://lf.git.oa.mt/publish_platform/web/publish/commit/1dde15ae135b27676db7d57940dee63fb0c7d4cb)
+- 2026-03-04T16:06:17+08:00 [fix(chart): 修复空数据导致的tooltip异常问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/59ddceb66f4bf9dc893cf68eb2be15464a53303c)
+- 2026-03-04T15:42:22+08:00 [feat(chart): 数据标签加粗](http://lf.git.oa.mt/publish_platform/web/publish/commit/3ab4756a4fdea0979e56de01e5e9581bed568625)
+- 2026-03-04T15:12:27+08:00 [feat(chart): 组合图颜色](http://lf.git.oa.mt/publish_platform/web/publish/commit/d448d5203de936018e95d8bcc301aaa877a64666)
+
+**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)

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)=>{
@@ -53,9 +54,9 @@ const transformDataToGroupBarLineFormat = (data, x = "groupName", y = "", indica
     }).flat();
 };
 const lineColors = [
-    "#FE765E",
-    "#945FB9",
-    "#FF99C3"
+    '#FA8C16',
+    '#7CB305',
+    '#5CDBD3'
 ];
 const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap, onChartClick, legend = "", config, nodeSetting = {
     showType: 0,
@@ -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";
@@ -52,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"]));
@@ -73,7 +76,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
         safeY,
         auxiliaryLineData
     ]);
-    console.log('minY, maxY:', minY, maxY);
     const formatAxis = useCallback((val)=>getAxisFormat(val, safeIndicatorMap, safeLegend), [
         safeIndicatorMap,
         safeLegend
@@ -85,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),
@@ -106,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;
@@ -125,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,

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
             },
@@ -148,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
+            }
         });
     });
 }
@@ -183,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,
@@ -200,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,53 +145,15 @@ 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({
+        style: {
+            fontWeight: 600
+        },
         text: (d)=>formatLabel(d),
         position: isHorizontal ? 'right' : 'top',
         offset: 0,
@@ -208,7 +170,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,
@@ -129,7 +128,8 @@ function renderG2CombineChart(container, options) {
                     indicatorId: datum['groupType'],
                     channel: Y_AXIS_FIELD,
                     color: barColor || 'transparent',
-                    isCombine: false
+                    isCombine: false,
+                    x: datum[x]
                 },
             isCompare ? (datum)=>datum.groupType.includes('_compare') ? {
                     value: datum[BAR_Y_FIELD],
@@ -150,12 +150,12 @@ function renderG2CombineChart(container, options) {
                 } : false : false
         ].filter(Boolean)
     });
-    const lineData = data.filter((item)=>item.isCombine && !item.groupType.includes('_compare')).map((item)=>({
+    const lineData = data.filter((item)=>item.isCombine && !item.groupType.includes('_compare')).filter((item)=>'' !== item[Y_AXIS_FIELD]).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)=>({
+    const compareLineData = data.filter((item)=>item.isCombine && item.groupType.includes('_compare')).filter((item)=>'' !== item[Y_AXIS_FIELD]).map((item)=>({
             ...item,
             [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
         }));
@@ -164,53 +164,41 @@ function renderG2CombineChart(container, options) {
     const compareLineMaxY = compareLineData.reduce((max, item)=>Math.max(max, item[LINE_Y_FIELD]), 0);
     const lineFinalMaxY = Math.max(lineMaxY, compareLineMaxY) || 1;
     const finalLineMax = Math.max(lineFinalMaxY, maxAux);
+    console.log('lineData:', lineData);
     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 index = groupTypeArr.findIndex((item)=>item === groupType);
-            const color = lineColors[index] || lineColors[0];
-            return color;
+            const currentDatum = datum[0];
+            const item = legendItems.find((item)=>item.id === `${currentDatum?.groupType}_${currentDatum?.isCombine}`);
+            return item?.color || lineColors[0];
         }
     });
     line.tooltip({
         items: [
             (datum)=>{
-                const groupTypeSet = new Set(lineData.map((item)=>item.groupType));
-                const groupTypeArr = [
-                    ...groupTypeSet
-                ];
-                const groupType = String(datum?.groupType ?? '');
-                const index = groupTypeArr.findIndex((item)=>item === groupType);
-                console.log('line: groupTypeArr:', groupTypeArr, groupType, index, lineColors, getIndicatorCompareName(_indicatorMap, datum['groupType']), datum['groupType']);
+                const item = legendItems.find((item)=>item.id === `${datum?.groupType}_${datum?.isCombine}`);
                 return {
                     value: datum[LINE_Y_FIELD],
                     name: getIndicatorCompareName(_indicatorMap, datum['groupType']),
                     indicatorId: datum['groupType'],
                     channel: Y_AXIS_FIELD,
-                    color: lineColors[index] || lineColors[0],
+                    color: item?.color || lineColors[0],
                     isCombine: true,
-                    tipType: 'line'
+                    tipType: 'line',
+                    x: datum[x]
                 };
             }
         ]
     });
-    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,
@@ -262,16 +250,18 @@ function renderG2CombineChart(container, options) {
                     channel: Y_AXIS_FIELD,
                     color: lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent',
                     isCombine: true,
-                    tipType: 'compareline'
+                    tipType: 'compareline',
+                    x: datum[x]
                 } : false,
             (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,
-                    tipType: 'compareline'
+                    tipType: 'compareline',
+                    x: datum[x]
                 } : false
         ].filter(Boolean)
     });
@@ -281,14 +271,30 @@ function renderG2CombineChart(container, options) {
         marker: false,
         render: (event, payload)=>{
             const { title, items } = payload;
+            console.log('tooltipRender:', title, items);
+            let safeTitle = title.replace(/,.*$/, '');
             const baseItems = items.filter((item)=>!item.isCombine);
+            const safeItems = baseItems.map((item)=>{
+                if (item.x !== safeTitle) return {
+                    ...item,
+                    value: '-'
+                };
+                return item;
+            });
             const combineItems = items.filter((item)=>item.isCombine);
+            const safeCombineItems = combineItems.map((item)=>{
+                if (item.x !== safeTitle) return {
+                    ...item,
+                    value: '-'
+                };
+                return item;
+            });
             const indicatorOrder = new Map(indicators.map((id, i)=>[
                     id,
                     i
                 ]));
             const sortedCombineItems = [
-                ...combineItems
+                ...safeCombineItems
             ].sort((a, b)=>{
                 const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
                 const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
@@ -300,8 +306,8 @@ function renderG2CombineChart(container, options) {
                 };
                 return typeRank(a) - typeRank(b);
             });
-            const content = tooltipRender(title, [
-                ...baseItems,
+            const content = tooltipRender(safeTitle, [
+                ...safeItems,
                 ...sortedCombineItems
             ]) ?? null;
             if (content) {
@@ -361,68 +367,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)=>{
@@ -440,6 +386,9 @@ function renderG2CombineChart(container, options) {
                 dy: -16,
                 dx: -10,
                 offset: 0,
+                style: {
+                    fontWeight: 600
+                },
                 text: (d)=>{
                     if (!isGroup) return formatLabel(d);
                     if (lastItemsInEachStack.has(d)) return formatLabel(d);
@@ -451,6 +400,9 @@ function renderG2CombineChart(container, options) {
             dy: -10,
             dx: 10,
             offset: 0,
+            style: {
+                fontWeight: 600
+            },
             text: (d)=>formatLabel(d)
         });
         view.labelTransform([

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,63 +132,25 @@ 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,
             dx: -10,
             offset: 0,
+            style: {
+                fontWeight: 600
+            },
             text: (d)=>formatLabel(d)
         });
         compareLine.label({
             dy: -10,
             dx: -10,
             offset: 0,
+            style: {
+                fontWeight: 600
+            },
             text: (d)=>formatLabel(d)
         });
         view.labelTransform([

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

@@ -4,6 +4,7 @@ import { CompareChange } from "@publishfx/publish-components";
 import { getIndicatorCompareName } from "../../../utils/indicatorHelpers.js";
 const G2CompareTooltip = ({ isGroupBar = false, title, items, safeIndicatorMap, formatter, safeLegend, auxiliaryLineData })=>{
     let auxiIndicatorId = "";
+    console.log('G2CompareTooltip:', items);
     const uniqueColors = [];
     return /*#__PURE__*/ jsxs("div", {
         style: {
@@ -13,14 +14,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.7",
+  "version": "2.1.9",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [