@publishfx/publish-chart 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+**2.0.2** feat(chart): 优化G2GaugeChart组件，仅基于数据驱动UI，不涉及业务逻辑
+- 2026-02-05T14:07:11+08:00 [feat(chart): 优化G2GaugeChart组件，仅基于数据驱动UI，不涉及业务逻辑](http://lf.git.oa.mt/publish_platform/web/publish/commit/ad3728038c692c40a03dcb6a38f7b77b0952cccc)
+
+**2.0.1** feat(chart): 使用svg重写gauge图表组件
+- 2026-02-04T11:18:21+08:00 [feat(chart): 使用svg重写gauge图表组件](http://lf.git.oa.mt/publish_platform/web/publish/commit/47a981e483d2a4df79d473e1053d9f9ea927ee10)
+- 2026-02-03T19:25:53+08:00 [feat(chart): 修改ts错误](http://lf.git.oa.mt/publish_platform/web/publish/commit/40e4e8f44c7ff02b079974eca52ece225180329c)
+- 2026-02-03T19:13:19+08:00 [feat: g2LineChart](http://lf.git.oa.mt/publish_platform/web/publish/commit/86e769b63b237c178a82de0c8dcf3c8d9ffdbab6)
+- 2026-02-02T14:37:21+08:00 [feat(chart): 修改ts错误问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/023b12647850619e340164e02a1f86e884eccf35)
+- 2026-02-02T11:12:14+08:00 [feat(chart): 新增G2图表组件](http://lf.git.oa.mt/publish_platform/web/publish/commit/cfec9e945ceb9d8c0645dcea3d9adfe43c8d0bdc)
+
 **2.0.0** feat(chart): 修改ts错误问题
 - 2026-02-02T14:37:21+08:00 [feat(chart): 修改ts错误问题](http://lf.git.oa.mt/publish_platform/web/publish/commit/023b12647850619e340164e02a1f86e884eccf35)
 - 2026-02-02T11:12:14+08:00 [feat(chart): 新增G2图表组件](http://lf.git.oa.mt/publish_platform/web/publish/commit/cfec9e945ceb9d8c0645dcea3d9adfe43c8d0bdc)

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

@@ -1,38 +1,26 @@
 /**
  * G2@5 仪表盘（Gauge）图表组件
- * 支持自定义 scale 和阈值区间，可基于目标值设置刻度
+ * 使用SVG直接绘制，不依赖G2的canvas渲染
  */
-import React from 'react';
+import React from "react";
 export interface G2GaugeChartProps {
-    /** 当前值 */
     value: number;
-    /** 最小值 */
     min?: number;
-    /** 最大值 */
     max: number;
-    /** 目标值（用于设置阈值区间和刻度） */
-    target?: number;
-    /** 自定义阈值区间配置（优先级高于 target） */
     thresholds?: number[] | Array<{
-        /** 阈值点 */
         value: number;
-        /** 区间颜色 */
         color: string;
     }>;
-    /** 自定义刻度点（优先级高于 target） */
-    ticks?: number[];
-    /** 图表高度 */
     height?: number;
-    /** 是否显示百分比 */
     showPercent?: boolean;
-    /** 自定义格式化函数 */
     formatter?: (value: number, percent: number) => string;
-    /** 刻度标签格式化函数（用于格式化刻度上的数值，如 100000 -> "100.00k"） */
     tickFormatter?: (value: number) => string;
-    /** 指针颜色 */
     pointerColor?: string;
-    /** 阈值颜色数组 */
     thresholdColors?: string[];
+    tooltip?: {
+        label?: string;
+        formatter?: (value: number) => string;
+    };
 }
 declare const G2GaugeChart: React.FC<G2GaugeChartProps>;
 export default G2GaugeChart;

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

@@ -1,135 +1,330 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
-import { Chart } from "@antv/g2";
-const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height = 300, showPercent = true, formatter, tickFormatter, thresholdColors = [
-    '#F4664A',
-    '#FAAD14',
-    '#52C41A'
-] })=>{
+import { safeFormat, safeTickFormat, validateAndNormalizeProps } from "./gaugePropsValidator.js";
+const G2GaugeChart = (props)=>{
     const containerRef = useRef(null);
-    const chartRef = useRef(null);
-    const scaleTicks = useMemo(()=>{
-        if (ticks && ticks.length > 0) return ticks;
-        if (target) return [
-            min,
-            Math.round(0.5 * target),
-            target,
-            Math.round(0.9 * max),
-            max
-        ];
-        const step = (max - min) / 4;
-        return [
-            min,
-            Math.round(min + step),
-            Math.round(min + 2 * step),
-            Math.round(min + 3 * step),
-            max
-        ];
-    }, [
-        min,
-        max,
-        target,
-        ticks
-    ]);
-    const thresholdValues = useMemo(()=>{
-        if (thresholds) {
-            if (Array.isArray(thresholds) && thresholds.length > 0 && 'number' == typeof thresholds[0]) return thresholds;
-            if (Array.isArray(thresholds) && thresholds.length > 0 && 'object' == typeof thresholds[0]) return thresholds.map((t)=>t.value);
-        }
-        if (target) return [
-            Math.round(0.6 * target),
-            Math.round(0.9 * target),
-            target
-        ];
-        const step = (max - min) / 3;
-        return [
-            Math.round(min + step),
-            Math.round(min + 2 * step),
-            max
-        ];
-    }, [
-        min,
-        max,
-        target,
-        thresholds
-    ]);
-    const thresholdColorArray = useMemo(()=>{
-        if (thresholds && Array.isArray(thresholds) && thresholds.length > 0 && 'object' == typeof thresholds[0]) return thresholds.map((t)=>t.color);
-        return thresholdColors;
-    }, [
-        thresholds,
-        thresholdColors
+    const normalizedProps = useMemo(()=>validateAndNormalizeProps(props), [
+        props.value,
+        props.min,
+        props.max,
+        props.thresholds,
+        props.thresholdColors,
+        props.height,
+        props.showPercent,
+        props.formatter,
+        props.tickFormatter,
+        props.pointerColor,
+        props.tooltip
     ]);
+    const { value, min, max, thresholds: thresholdValues, colors: thresholdColorArray, height, showPercent, formatter, tickFormatter, pointerColor, tooltip } = normalizedProps;
     useEffect(()=>{
         if (!containerRef.current) return;
-        if (chartRef.current) chartRef.current.destroy();
-        const chart = new Chart({
-            container: containerRef.current,
-            autoFit: true,
-            height: height
-        });
-        chart.options({
-            type: 'gauge',
-            data: {
-                value: {
-                    target: value,
-                    total: max,
-                    name: 'value',
-                    thresholds: thresholdValues
+        const startAngle = -1.2 * Math.PI;
+        const endAngle = 0.2 * Math.PI;
+        const colors = [
+            ...thresholdColorArray
+        ];
+        while(colors.length < thresholdValues.length)colors.push(colors[colors.length - 1] || "#ccc");
+        requestAnimationFrame(()=>{
+            if (!containerRef.current) return;
+            const rect = containerRef.current.getBoundingClientRect();
+            const width = rect.width || containerRef.current.offsetWidth;
+            const height = rect.height || containerRef.current.offsetHeight;
+            const centerX = width / 2;
+            const centerY = height / 2;
+            const radius = Math.min(width, height) / 2;
+            const innerRadius = 0.85 * radius;
+            const outerRadius = 0.95 * radius;
+            const totalAngle = endAngle - startAngle;
+            const topPadding = 40;
+            const bottomPadding = -30;
+            const leftPadding = 0;
+            const rightPadding = 0;
+            let svgOverlay = containerRef.current.querySelector('svg.gauge-arc-overlay');
+            if (svgOverlay) {
+                svgOverlay.innerHTML = '';
+                svgOverlay.setAttribute('width', String(width));
+                svgOverlay.setAttribute('height', String(height));
+                svgOverlay.setAttribute('viewBox', `-${leftPadding} -${topPadding} ${width + leftPadding + rightPadding} ${height + topPadding + bottomPadding}`);
+                svgOverlay.style.top = '0';
+                svgOverlay.style.left = '0';
+            } else {
+                svgOverlay = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                svgOverlay.setAttribute('class', 'gauge-arc-overlay');
+                svgOverlay.setAttribute('width', String(width));
+                svgOverlay.setAttribute('height', String(height));
+                svgOverlay.setAttribute('viewBox', `-${leftPadding} -${topPadding} ${width + leftPadding + rightPadding} ${height + topPadding + bottomPadding}`);
+                svgOverlay.style.position = 'absolute';
+                svgOverlay.style.top = '0';
+                svgOverlay.style.left = '0';
+                svgOverlay.style.pointerEvents = 'none';
+                svgOverlay.style.overflow = 'visible';
+                containerRef.current.appendChild(svgOverlay);
+            }
+            for(let i = 0; i < thresholdValues.length; i++){
+                const start = 0 === i ? min : thresholdValues[i - 1] < min ? min : thresholdValues[i - 1];
+                const end = thresholdValues[i] < min ? min : thresholdValues[i];
+                const color = thresholdColorArray[i] || '#ccc';
+                const startAngleValue = startAngle + (start - min) / (max - min) * totalAngle;
+                const endAngleValue = startAngle + (end - min) / (max - min) * totalAngle;
+                const largeArcFlag = Math.abs(endAngleValue - startAngleValue) > Math.PI ? 1 : 0;
+                const sweepFlag = 1;
+                const startX = centerX + outerRadius * Math.cos(startAngleValue);
+                const startY = centerY + outerRadius * Math.sin(startAngleValue);
+                const endX = centerX + outerRadius * Math.cos(endAngleValue);
+                const endY = centerY + outerRadius * Math.sin(endAngleValue);
+                const innerStartX = centerX + innerRadius * Math.cos(startAngleValue);
+                const innerStartY = centerY + innerRadius * Math.sin(startAngleValue);
+                const innerEndX = centerX + innerRadius * Math.cos(endAngleValue);
+                const innerEndY = centerY + innerRadius * Math.sin(endAngleValue);
+                const pathString = [
+                    `M ${startX} ${startY}`,
+                    `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}`,
+                    `L ${innerEndX} ${innerEndY}`,
+                    `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} ${1 - sweepFlag} ${innerStartX} ${innerStartY}`,
+                    'Z'
+                ].join(' ');
+                const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                pathElement.setAttribute('d', pathString);
+                pathElement.setAttribute('fill', color);
+                pathElement.setAttribute('stroke', color);
+                pathElement.setAttribute('stroke-width', '0');
+                svgOverlay.appendChild(pathElement);
+            }
+            const tickLength = 0.05 * radius;
+            const textOffset = 0.15 * radius;
+            const startAngleValue = startAngle;
+            const startX = centerX + innerRadius * Math.cos(startAngleValue);
+            const startY = centerY + innerRadius * Math.sin(startAngleValue);
+            const startTickEndX = centerX + (outerRadius + tickLength) * Math.cos(startAngleValue);
+            const startTickEndY = centerY + (outerRadius + tickLength) * Math.sin(startAngleValue);
+            const startTextX = centerX + (outerRadius + textOffset) * Math.cos(startAngleValue);
+            const startTextY = centerY + (outerRadius + textOffset) * Math.sin(startAngleValue);
+            const startTickLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            startTickLine.setAttribute('x1', String(startX));
+            startTickLine.setAttribute('y1', String(startY));
+            startTickLine.setAttribute('x2', String(startTickEndX));
+            startTickLine.setAttribute('y2', String(startTickEndY));
+            startTickLine.setAttribute('stroke', '#cccccc');
+            startTickLine.setAttribute('stroke-width', '2');
+            svgOverlay.appendChild(startTickLine);
+            const startText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            startText.setAttribute('x', String(startTextX));
+            startText.setAttribute('y', String(startTextY));
+            startText.setAttribute('fill', '#1d2129');
+            startText.setAttribute('font-size', '14');
+            startText.setAttribute('text-anchor', 'middle');
+            startText.setAttribute('dominant-baseline', 'middle');
+            startText.textContent = safeTickFormat(tickFormatter, min, String(min));
+            svgOverlay.appendChild(startText);
+            const thresholdTextOffset = 0.05 * radius;
+            const minThresholdDistance = (max - min) * 0.1;
+            const textOffsets = [];
+            for(let i = 0; i < thresholdValues.length - 1; i++){
+                let currentTextOffset = thresholdTextOffset;
+                if (i > 0) {
+                    const prevThresholdValue = thresholdValues[i - 1];
+                    const thresholdValue = thresholdValues[i];
+                    const thresholdDistance = Math.abs(thresholdValue - prevThresholdValue);
+                    if (thresholdDistance < minThresholdDistance) {
+                        const prevThresholdAngle = startAngle + (prevThresholdValue - min) / (max - min) * totalAngle;
+                        const thresholdAngle = startAngle + (thresholdValue - min) / (max - min) * totalAngle;
+                        const angleDiff = Math.abs(thresholdAngle - prevThresholdAngle);
+                        if (angleDiff < Math.PI / 6) {
+                            const prevOffset = textOffsets[i - 1] || thresholdTextOffset;
+                            currentTextOffset = Math.max(prevOffset + 0.08 * radius, thresholdTextOffset + 0.08 * radius);
+                        } else currentTextOffset = thresholdTextOffset + 0.04 * radius;
+                    }
                 }
-            },
-            scale: {
-                color: {
-                    range: thresholdColorArray
-                },
-                value: {
-                    formatter: tickFormatter || ((d)=>{
-                        const matchedTick = scaleTicks.find((tick)=>Math.abs(d - tick) < 0.01);
-                        return void 0 !== matchedTick ? String(matchedTick) : '';
-                    }),
-                    domain: [
-                        min,
-                        max
-                    ],
-                    tickCount: scaleTicks.length,
-                    ticks: scaleTicks
+                textOffsets.push(currentTextOffset);
+            }
+            for(let i = 0; i < thresholdValues.length - 1; i++){
+                const thresholdValue = thresholdValues[i];
+                const currentTextOffset = textOffsets[i];
+                const thresholdAngle = startAngle + (thresholdValue - min) / (max - min) * totalAngle;
+                const thresholdTextX = centerX + (outerRadius + currentTextOffset) * Math.cos(thresholdAngle);
+                const thresholdTextY = centerY + (outerRadius + currentTextOffset) * Math.sin(thresholdAngle);
+                const rotationAngle = (180 * thresholdAngle / Math.PI + 90) % 360;
+                const thresholdText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                thresholdText.setAttribute('x', String(thresholdTextX));
+                thresholdText.setAttribute('y', String(thresholdTextY));
+                thresholdText.setAttribute('fill', '#1d2129');
+                thresholdText.setAttribute('font-size', '12');
+                thresholdText.setAttribute('text-anchor', 'middle');
+                thresholdText.setAttribute('dominant-baseline', 'middle');
+                thresholdText.setAttribute('transform', `rotate(${rotationAngle} ${thresholdTextX} ${thresholdTextY})`);
+                thresholdText.textContent = safeTickFormat(tickFormatter, thresholdValue, String(thresholdValue));
+                svgOverlay.appendChild(thresholdText);
+            }
+            const endAngleValue = endAngle;
+            const endX = centerX + innerRadius * Math.cos(endAngleValue);
+            const endY = centerY + innerRadius * Math.sin(endAngleValue);
+            const endTickEndX = centerX + (outerRadius + tickLength) * Math.cos(endAngleValue);
+            const endTickEndY = centerY + (outerRadius + tickLength) * Math.sin(endAngleValue);
+            const endTextX = centerX + (outerRadius + textOffset) * Math.cos(endAngleValue);
+            const endTextY = centerY + (outerRadius + textOffset) * Math.sin(endAngleValue);
+            const endTickLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            endTickLine.setAttribute('x1', String(endX));
+            endTickLine.setAttribute('y1', String(endY));
+            endTickLine.setAttribute('x2', String(endTickEndX));
+            endTickLine.setAttribute('y2', String(endTickEndY));
+            endTickLine.setAttribute('stroke', '#cccccc');
+            endTickLine.setAttribute('stroke-width', '2');
+            svgOverlay.appendChild(endTickLine);
+            const endText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            endText.setAttribute('x', String(endTextX));
+            endText.setAttribute('y', String(endTextY));
+            endText.setAttribute('fill', '#1d2129');
+            endText.setAttribute('font-size', '14');
+            endText.setAttribute('text-anchor', 'middle');
+            endText.setAttribute('dominant-baseline', 'middle');
+            endText.textContent = safeTickFormat(tickFormatter, max, String(max));
+            svgOverlay.appendChild(endText);
+            const pointerValue = Math.min(Math.max(value, min), max);
+            const pointerAngle = startAngle + (pointerValue - min) / (max - min) * totalAngle;
+            const pointerStartCircleRadius = 4;
+            const pointerLength = 0.6 * outerRadius;
+            const pointerStartX = centerX + pointerStartCircleRadius * Math.cos(pointerAngle);
+            const pointerStartY = centerY + pointerStartCircleRadius * Math.sin(pointerAngle);
+            const pointerEndX = centerX + (pointerStartCircleRadius + pointerLength) * Math.cos(pointerAngle);
+            const pointerEndY = centerY + (pointerStartCircleRadius + pointerLength) * Math.sin(pointerAngle);
+            const pointerStartCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            pointerStartCircle.setAttribute('cx', String(centerX));
+            pointerStartCircle.setAttribute('cy', String(centerY));
+            pointerStartCircle.setAttribute('r', String(pointerStartCircleRadius));
+            pointerStartCircle.setAttribute('fill', '#fff');
+            pointerStartCircle.setAttribute('stroke', pointerColor);
+            pointerStartCircle.setAttribute('stroke-width', '1.5');
+            svgOverlay.appendChild(pointerStartCircle);
+            const pointerLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            pointerLine.setAttribute('x1', String(pointerStartX));
+            pointerLine.setAttribute('y1', String(pointerStartY));
+            pointerLine.setAttribute('x2', String(pointerEndX));
+            pointerLine.setAttribute('y2', String(pointerEndY));
+            pointerLine.setAttribute('stroke', pointerColor);
+            pointerLine.setAttribute('stroke-width', '3');
+            pointerLine.setAttribute('stroke-linecap', 'round');
+            svgOverlay.appendChild(pointerLine);
+            const percent = value / max * 100;
+            const fallbackValue = safeTickFormat(tickFormatter, value, String(value));
+            const displayValue = safeFormat(formatter, value, percent, fallbackValue);
+            const percentDisplay = percent.toFixed(2);
+            const textCenterX = centerX;
+            const textCenterY = centerY + 0.3 * radius;
+            const textSpacing = 0.18 * radius;
+            const valueTextY = textCenterY + +textSpacing;
+            const percentTextY = textCenterY + 2 * textSpacing;
+            const valueFontSize = Math.max(14, 0.12 * radius);
+            const percentFontSize = Math.max(12, 0.09 * radius);
+            const valueText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            valueText.setAttribute('x', String(textCenterX));
+            valueText.setAttribute('y', String(valueTextY));
+            valueText.setAttribute('fill', colors[0] || '#9596d9');
+            valueText.setAttribute('font-size', String(valueFontSize));
+            valueText.setAttribute('font-weight', 'bold');
+            valueText.setAttribute('text-anchor', 'middle');
+            valueText.setAttribute('dominant-baseline', 'middle');
+            valueText.textContent = displayValue;
+            svgOverlay.appendChild(valueText);
+            if (showPercent) {
+                const percentText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                percentText.setAttribute('x', String(textCenterX));
+                percentText.setAttribute('y', String(percentTextY));
+                percentText.setAttribute('fill', '#8c8c8c');
+                percentText.setAttribute('font-size', String(percentFontSize));
+                percentText.setAttribute('text-anchor', 'middle');
+                percentText.setAttribute('dominant-baseline', 'middle');
+                percentText.textContent = `占比: ${percentDisplay}%`;
+                svgOverlay.appendChild(percentText);
+            }
+            if (tooltip) {
+                let tooltipElement = containerRef.current.querySelector('.gauge-tooltip');
+                if (!tooltipElement) {
+                    tooltipElement = document.createElement('div');
+                    tooltipElement.className = 'gauge-tooltip';
+                    tooltipElement.style.position = 'absolute';
+                    tooltipElement.style.pointerEvents = 'none';
+                    tooltipElement.style.display = 'none';
+                    tooltipElement.style.backgroundColor = '#fff';
+                    tooltipElement.style.borderRadius = '4px';
+                    tooltipElement.style.padding = '8px 12px';
+                    tooltipElement.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.15)';
+                    tooltipElement.style.fontSize = '12px';
+                    tooltipElement.style.lineHeight = '1.5';
+                    tooltipElement.style.zIndex = '1000';
+                    tooltipElement.style.whiteSpace = 'nowrap';
+                    containerRef.current.appendChild(tooltipElement);
                 }
-            },
-            style: {
-                textContent: (target, total)=>{
-                    const percent = (target / total * 100).toFixed(3);
-                    if (formatter) return formatter(target, parseFloat(percent));
-                    return showPercent ? `${target}\n占比: ${percent}%` : String(target);
+                const tooltipLabel = tooltip.label;
+                let tooltipValue;
+                if (tooltip.formatter) try {
+                    tooltipValue = tooltip.formatter(value);
+                } catch (error) {
+                    if ("development" === process.env.NODE_ENV) console.warn("[G2GaugeChart] tooltip.formatter 函数执行出错，使用降级值", {
+                        error,
+                        value
+                    });
+                    tooltipValue = value.toLocaleString();
                 }
-            },
-            legend: false
+                else tooltipValue = value.toLocaleString();
+                tooltipElement.innerHTML = `
+          ${tooltipLabel ? `<div style="color: #666; margin-bottom: 4px;">${tooltipLabel}</div>` : ''}
+          ${tooltipValue ? `<div style="color: #1d2129; font-weight: 500;">${tooltipValue}</div>` : ''}
+        `;
+                const handleMouseMove = (e)=>{
+                    if (!tooltipElement || !containerRef.current) return;
+                    const svgOverlayRect = svgOverlay.getBoundingClientRect();
+                    const mouseX = e.clientX;
+                    const mouseY = e.clientY;
+                    if (mouseX >= svgOverlayRect.left && mouseX <= svgOverlayRect.right && mouseY >= svgOverlayRect.top && mouseY <= svgOverlayRect.bottom) {
+                        const containerRect = containerRef.current.getBoundingClientRect();
+                        const relativeX = mouseX - containerRect.left;
+                        const relativeY = mouseY - containerRect.top;
+                        const offsetX = 10;
+                        const offsetY = -10;
+                        tooltipElement.style.display = 'block';
+                        tooltipElement.style.left = `${relativeX + offsetX}px`;
+                        tooltipElement.style.top = `${relativeY + offsetY}px`;
+                        tooltipElement.style.transform = 'translateY(-100%)';
+                    } else tooltipElement.style.display = 'none';
+                };
+                const handleMouseLeave = ()=>{
+                    if (tooltipElement) tooltipElement.style.display = 'none';
+                };
+                containerRef.current.addEventListener('mousemove', handleMouseMove);
+                containerRef.current.addEventListener('mouseleave', handleMouseLeave);
+                const cleanup = ()=>{
+                    if (containerRef.current) {
+                        containerRef.current.removeEventListener('mousemove', handleMouseMove);
+                        containerRef.current.removeEventListener('mouseleave', handleMouseLeave);
+                    }
+                };
+                containerRef.current._tooltipCleanup = cleanup;
+            }
         });
-        chart.render();
-        chartRef.current = chart;
         return ()=>{
-            if (chartRef.current) {
-                chartRef.current.destroy();
-                chartRef.current = null;
+            if (containerRef.current) {
+                const container = containerRef.current;
+                if (container._tooltipCleanup) {
+                    container._tooltipCleanup();
+                    delete container._tooltipCleanup;
+                }
+                const svgOverlay = containerRef.current.querySelector('svg.gauge-arc-overlay');
+                if (svgOverlay) svgOverlay.remove();
+                const tooltipElement = containerRef.current.querySelector('.gauge-tooltip');
+                if (tooltipElement) tooltipElement.remove();
             }
         };
     }, [
-        value,
-        min,
-        max,
-        target,
-        thresholdValues,
-        thresholdColorArray,
-        scaleTicks,
-        height,
-        showPercent,
-        formatter,
-        tickFormatter
+        normalizedProps
     ]);
     return /*#__PURE__*/ jsx("div", {
         ref: containerRef,
         style: {
-            width: '100%',
-            height: `${height}px`
+            width: "100%",
+            height: `${height}px`,
+            position: 'relative',
+            overflow: 'visible'
         }
     });
 };

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

@@ -0,0 +1,8 @@
+/**
+ * G2@5 基础折线图组件
+ * 复用现有架构，仅在渲染层面使用 G2@5 API
+ */
+import React from 'react';
+import type { BaseChartProps } from '../../../core/ChartTypes';
+declare const G2LineChart: React.FC<BaseChartProps>;
+export default G2LineChart;

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

@@ -0,0 +1,151 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { Chart } from "@antv/g2";
+import { useChartContext } from "../../../core/ChartContext.js";
+import { getAxisFormat, splitTextToMultiline } from "../../../utils/chartHelpers.js";
+import { DataAdapter } from "../../../adapters/DataAdapter.js";
+const G2LineChart = ({ height = 300, data, x = '', y = '', indicatorMap, onChartClick, legend = '', config, nodeSetting = {
+    showType: 0,
+    type: []
+}, auxiliaryLineData })=>{
+    const { formatter, dataTransform, config: contextConfig } = useChartContext();
+    const safeIndicatorMap = indicatorMap || contextConfig.indicatorMap || {};
+    const safeLegend = legend || y;
+    const chartConfig = config || {};
+    const { isDataTag = false } = chartConfig;
+    const transformedData = useMemo(()=>{
+        const result = DataAdapter.transform(data, 'line', {
+            type: 'line',
+            x,
+            y
+        });
+        return result.map((item)=>dataTransform.processNodeInfo(item, contextConfig.nodeMap));
+    }, [
+        data,
+        x,
+        y,
+        dataTransform,
+        contextConfig.nodeMap
+    ]);
+    const maxY = useMemo(()=>{
+        const values = transformedData.filter((item)=>'-' !== item[y] && void 0 !== item[y] && null !== item[y]).map((item)=>Number(item[y]));
+        const maxData = Math.max(...values.length > 0 ? values : [
+            0
+        ]);
+        const maxAuxiliary = auxiliaryLineData?.length ? Math.max(...auxiliaryLineData.map((item)=>item.value)) : 0;
+        return Math.max(maxData, maxAuxiliary);
+    }, [
+        transformedData,
+        y,
+        auxiliaryLineData
+    ]);
+    const formatAxis = (val)=>getAxisFormat(val, safeIndicatorMap, safeLegend);
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    useEffect(()=>{
+        if (!containerRef.current || !transformedData.length) return;
+        if (chartRef.current) chartRef.current.destroy();
+        const chart = new Chart({
+            container: containerRef.current,
+            height,
+            autoFit: true
+        });
+        chart.data(transformedData);
+        const line = chart.line().encode('x', x).encode('y', y).encode('shape', 'smooth').style({
+            lineWidth: 2
+        });
+        chart.axis('y', {
+            title: false,
+            grid: true,
+            gridStroke: '#e6e6e6',
+            gridLineWidth: 2,
+            gridStrokeOpacity: 0.7,
+            gridLineDash: [
+                0,
+                0
+            ],
+            labelFormatter: (val)=>formatAxis(val)
+        });
+        chart.axis('x', {
+            title: false,
+            labelAutoHide: 'greedy'
+        });
+        chart.scale({
+            y: {
+                type: 'linear',
+                domainMax: maxY,
+                nice: true
+            }
+        });
+        line.interaction('tooltip', {
+            render: (_event, { title, items })=>`<div>
+        <div>${title}</div>
+        ${items?.map(({ color, name, value })=>`
+              <div style="display:flex;justify-content:space-between;line-height:12px;margin-top:5px;">
+                <div>
+                  <span
+                    style="display:inline-block;width:8px;height:8px;margin-right:5px;background-color:${color};border-radius:50%;"
+                  ></span>
+                  ${safeIndicatorMap[name]?.indicatorName || ''}:
+                </div>
+                <div style="padding-left:10px;font-weight:bold;">
+                  ${formatter.formatIndicator(value, safeIndicatorMap[name])}
+                </div>
+              </div>
+            `).join('')}
+        ${auxiliaryLineData?.map(({ name, value })=>`<div
+              style="display:flex;justify-content:space-between;line-height:12px;margin-top:10px;margin-left:16px;"
+            >
+              <div style="margin-right:8px">${name}:</div>
+              <div>${formatter.formatIndicator(value, safeIndicatorMap[safeLegend])}</div>
+            </div>`).join('')}
+      </div>`
+        });
+        if (auxiliaryLineData && auxiliaryLineData.length > 0) auxiliaryLineData.forEach((auxLine)=>{
+            chart.lineY().encode('y', auxLine.value).style('stroke', '#F4664A').style('strokeOpacity', 1).label({
+                dy: -3,
+                text: splitTextToMultiline(auxLine.name),
+                position: 'bottom-left',
+                style: {
+                    fill: '#F4664A'
+                }
+            });
+        });
+        if (isDataTag) line.label({
+            text: (d)=>formatter.formatIndicator(d[y], safeIndicatorMap[y])
+        });
+        chart.render();
+        chartRef.current = chart;
+        return ()=>{
+            if (chartRef.current) {
+                chartRef.current.off('element:click');
+                chartRef.current.off('element:mouseenter');
+                chartRef.current.off('element:mouseleave');
+                chartRef.current.destroy();
+                chartRef.current = null;
+            }
+        };
+    }, [
+        transformedData,
+        height,
+        x,
+        y,
+        safeLegend,
+        isDataTag,
+        maxY,
+        safeIndicatorMap,
+        formatter,
+        onChartClick,
+        nodeSetting.showType,
+        formatAxis
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        style: {
+            width: '100%',
+            height: `${height}px`
+        }
+    });
+};
+const base_G2LineChart = G2LineChart;
+export { base_G2LineChart as default };

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

@@ -0,0 +1,42 @@
+/**
+ * G2GaugeChart Props 验证和规范化工具
+ * 用于优雅处理调用方传入的异常参数
+ */
+import { G2GaugeChartProps } from "./G2GaugeChart";
+export interface NormalizedGaugeProps {
+    value: number;
+    min: number;
+    max: number;
+    thresholds: number[];
+    colors: string[];
+    height: number;
+    showPercent: boolean;
+    formatter?: (value: number, percent: number) => string;
+    tickFormatter?: (value: number) => string;
+    pointerColor: string;
+    tooltip?: G2GaugeChartProps["tooltip"];
+}
+/**
+ * 验证和规范化 G2GaugeChart 的 props
+ *
+ * 处理以下异常情况：
+ * 1. min >= max：自动调整或使用默认值
+ * 2. value 超出范围：限制在 [min, max] 内
+ * 3. thresholds 不合法：自动生成或过滤无效值
+ * 4. colors 不合法：使用默认颜色
+ * 5. height 异常：使用默认值
+ * 6. formatter 函数异常：使用降级方案
+ *
+ * @param props 原始 props
+ * @returns 规范化后的 props
+ */
+export declare function validateAndNormalizeProps(props: G2GaugeChartProps): NormalizedGaugeProps;
+/**
+ * 安全调用 formatter 函数
+ * 如果 formatter 抛出错误，返回降级值
+ */
+export declare function safeFormat(formatter: ((value: number, percent: number) => string) | undefined, value: number, percent: number, fallback: string): string;
+/**
+ * 安全调用 tickFormatter 函数
+ */
+export declare function safeTickFormat(tickFormatter: ((value: number) => string) | undefined, value: number, fallback: string): string;

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

@@ -0,0 +1,139 @@
+function isValidColor(color) {
+    if (!color || "string" != typeof color) return false;
+    if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color)) return true;
+    if (/^rgba?\(/.test(color)) return true;
+    const s = new Option().style;
+    s.color = color;
+    return "" !== s.color;
+}
+function validateAndNormalizeProps(props) {
+    const isDev = "development" === process.env.NODE_ENV;
+    let { min = 0, max } = props;
+    if ("number" != typeof max || !isFinite(max)) {
+        if (isDev) console.warn("[G2GaugeChart] max 必须是有效的数字，使用默认值 100", {
+            max
+        });
+        max = 100;
+    }
+    if ("number" != typeof min || !isFinite(min)) {
+        if (isDev) console.warn("[G2GaugeChart] min 必须是有效的数字，使用默认值 0", {
+            min
+        });
+        min = 0;
+    }
+    if (min >= max) {
+        if (isDev) console.warn(`[G2GaugeChart] min (${min}) 必须小于 max (${max})，自动调整为 max - 1`, {
+            min,
+            max
+        });
+        min = max - 1;
+        if (min < 0) {
+            min = 0;
+            max = 100;
+            if (isDev) console.warn("[G2GaugeChart] min 和 max 都无效，使用默认值 min=0, max=100");
+        }
+    }
+    let { value } = props;
+    if ("number" != typeof value || !isFinite(value)) {
+        if (isDev) console.warn(`[G2GaugeChart] value 必须是有效的数字，使用默认值 (min + max) / 2`, {
+            value
+        });
+        value = (min + max) / 2;
+    }
+    const originalValue = value;
+    value = Math.min(Math.max(value, min), max);
+    if (originalValue !== value && isDev) console.warn(`[G2GaugeChart] value (${originalValue}) 超出范围 [${min}, ${max}]，已限制为 ${value}`, {
+        originalValue,
+        min,
+        max,
+        clampedValue: value
+    });
+    let thresholds = [];
+    const defaultColors = [
+        '#9596d9',
+        '#FF9F4C',
+        '#56c2f3'
+    ];
+    if (props.thresholds) {
+        if (Array.isArray(props.thresholds) && props.thresholds.length > 0) {
+            if ("number" == typeof props.thresholds[0]) thresholds = [
+                ...props.thresholds
+            ];
+            else if ("object" == typeof props.thresholds[0]) thresholds = props.thresholds.map((t)=>t.value);
+        }
+    }
+    thresholds = thresholds.filter((t)=>"number" == typeof t && isFinite(t)).filter((t)=>t > min && t < max).sort((a, b)=>a - b);
+    thresholds = Array.from(new Set(thresholds));
+    if (thresholds[thresholds.length - 1] !== max) thresholds.push(max);
+    let colors = [];
+    if (props.thresholds && Array.isArray(props.thresholds) && props.thresholds.length > 0 && "object" == typeof props.thresholds[0]) colors = props.thresholds.map((t)=>t.color).filter((c)=>!!c && isValidColor(c));
+    if (0 === colors.length && props.thresholdColors) colors = props.thresholdColors.filter((c)=>isValidColor(c));
+    if (0 === colors.length) {
+        colors = [
+            ...defaultColors
+        ];
+        if (isDev) console.warn("[G2GaugeChart] 未提供有效的颜色，使用默认颜色", {
+            colors
+        });
+    }
+    while(colors.length < thresholds.length){
+        const lastColor = colors[colors.length - 1];
+        colors.push(lastColor || defaultColors[0]);
+    }
+    let height = props.height ?? 300;
+    if ("number" != typeof height || !isFinite(height) || height <= 0) {
+        if (isDev) console.warn(`[G2GaugeChart] height 必须是大于 0 的数字，使用默认值 300`, {
+            height: props.height
+        });
+        height = 300;
+    }
+    height = Math.min(Math.max(height, 100), 2000);
+    let pointerColor = props.pointerColor ?? "#c5c5c5";
+    if (!isValidColor(pointerColor)) {
+        if (isDev) console.warn(`[G2GaugeChart] pointerColor 无效，使用默认值 #c5c5c5`, {
+            pointerColor: props.pointerColor
+        });
+        pointerColor = "#c5c5c5";
+    }
+    const formatter = props.formatter;
+    const tickFormatter = props.tickFormatter;
+    return {
+        value,
+        min,
+        max,
+        thresholds,
+        colors,
+        height,
+        showPercent: props.showPercent ?? true,
+        formatter,
+        tickFormatter,
+        pointerColor,
+        tooltip: props.tooltip
+    };
+}
+function safeFormat(formatter, value, percent, fallback) {
+    if (!formatter) return fallback;
+    try {
+        return formatter(value, percent);
+    } catch (error) {
+        if ("development" === process.env.NODE_ENV) console.warn("[G2GaugeChart] formatter 函数执行出错，使用降级值", {
+            error,
+            value,
+            percent
+        });
+        return fallback;
+    }
+}
+function safeTickFormat(tickFormatter, value, fallback) {
+    if (!tickFormatter) return fallback;
+    try {
+        return tickFormatter(value);
+    } catch (error) {
+        if ("development" === process.env.NODE_ENV) console.warn("[G2GaugeChart] tickFormatter 函数执行出错，使用降级值", {
+            error,
+            value
+        });
+        return fallback;
+    }
+}
+export { safeFormat, safeTickFormat, validateAndNormalizeProps };

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as GroupLineCompare } from './components/composite/GroupLineCom
 export { default as MultipleLine } from './components/composite/MultipleLine';
 export { default as MultipleCompareLine } from './components/composite/MultipleCompareLine';
 export { default as G2BarChart } from './components/g2/base/G2BarChart';
+export { default as G2LineChart } from './components/g2/base/G2LineChart';
 export { default as G2GaugeChart } from './components/g2/base/G2GaugeChart';
 export type { G2GaugeChartProps } from './components/g2/base/G2GaugeChart';
 export { createLazyComponent, createLazyComponents } from './utils/lazyHelpers';

package/dist/index.js

@@ -15,6 +15,7 @@ import GroupLineCompare from "./components/composite/GroupLineCompare.js";
 import MultipleLine from "./components/composite/MultipleLine.js";
 import MultipleCompareLine from "./components/composite/MultipleCompareLine.js";
 import G2BarChart from "./components/g2/base/G2BarChart.js";
+import G2LineChart from "./components/g2/base/G2LineChart.js";
 import G2GaugeChart from "./components/g2/base/G2GaugeChart.js";
 import { createLazyComponent, createLazyComponents } from "./utils/lazyHelpers.js";
 import { TypeAdapter } from "./adapters/TypeAdapter.js";
@@ -25,4 +26,4 @@ import { BigNumberUtil, formatBigNumber, formatIndicatorV2, formatNumberV2, form
 import { calTextWidth, calculateBarWidth, createStripePatternCanvas, getAxisFormat, getAxisHorPaddingByText, markerStyle, truncateText } from "./utils/chartHelpers.js";
 import { getIntervalRatio, groupArray, transformIndicatorList } from "./utils/dataTransform.js";
 import { getIndicator, getIndicatorCompareName, getIndicatorName } from "./utils/indicatorHelpers.js";
-export { AuxiliaryLine, BarChart, BarLineAdapter, BarLineChart, BarLineCompareWeekend, BigNumberUtil, ChartProvider, DataAdapter, DefaultDataTransformService, DefaultFormatterService, G2BarChart, G2GaugeChart, GroupBar, GroupBarLine, GroupCompare, GroupLine, GroupLineCompare, LineChart, MultipleCompareLine, MultipleLine, TypeAdapter, XAxisBackground, calTextWidth, calculateBarWidth, createDataTransformService, createFormatterService, createLazyComponent, createLazyComponents, createStripePatternCanvas, defaultChartConfig, formatBigNumber, formatIndicatorV2, formatNumberV2, formatPercentage, getAxisFormat, getAxisFormatFromContext, getAxisHorPaddingByText, getIndicator, getIndicatorCompareName, getIndicatorName, getIntervalRatio, getThemeColors, groupArray, markerStyle, mergeChartConfig, transformIndicatorList, truncateText, useChartContext };
+export { AuxiliaryLine, BarChart, BarLineAdapter, BarLineChart, BarLineCompareWeekend, BigNumberUtil, ChartProvider, DataAdapter, DefaultDataTransformService, DefaultFormatterService, G2BarChart, G2GaugeChart, G2LineChart, GroupBar, GroupBarLine, GroupCompare, GroupLine, GroupLineCompare, LineChart, MultipleCompareLine, MultipleLine, TypeAdapter, XAxisBackground, calTextWidth, calculateBarWidth, createDataTransformService, createFormatterService, createLazyComponent, createLazyComponents, createStripePatternCanvas, defaultChartConfig, formatBigNumber, formatIndicatorV2, formatNumberV2, formatPercentage, getAxisFormat, getAxisFormatFromContext, getAxisHorPaddingByText, getIndicator, getIndicatorCompareName, getIndicatorName, getIntervalRatio, getThemeColors, groupArray, markerStyle, mergeChartConfig, transformIndicatorList, truncateText, useChartContext };

package/dist/utils/chartHelpers.d.ts

@@ -50,3 +50,4 @@ export declare const markerStyle: (baseColor: string, isCompare: boolean) => {
  */
 export declare const createStripePatternCanvas: (baseColor: string, spaceUnit?: number) => HTMLCanvasElement;
 export declare const getChartKey: (config: any) => string;
+export declare const splitTextToMultiline: (text: string, maxLength?: number) => string;

package/dist/utils/chartHelpers.js

@@ -109,4 +109,9 @@ const createStripePatternCanvas = (baseColor, spaceUnit = 24)=>{
     return patternCanvas;
 };
 const getChartKey = (config)=>JSON.stringify(config);
-export { calTextWidth, calculateBarWidth, createStripePatternCanvas, getAxisFormat, getAxisHorPaddingByText, getChartKey, markerStyle, truncateText };
+const splitTextToMultiline = (text, maxLength = 5)=>{
+    let result = '';
+    for(let i = 0; i < text.length; i += maxLength)result += text.substring(i, i + maxLength) + '\n';
+    return result.trim();
+};
+export { calTextWidth, calculateBarWidth, createStripePatternCanvas, getAxisFormat, getAxisHorPaddingByText, getChartKey, markerStyle, splitTextToMultiline, truncateText };

package/package.json

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

package/dist/components/g2/base/G2GaugeChart.example.d.ts

@@ -1,10 +0,0 @@
-/**
- * G2 Gauge 图表使用示例
- * 展示如何自定义 scale 和阈值区间
- */
-import React from 'react';
-export declare const Example1_TargetBased: React.FC;
-export declare const Example2_CustomThresholds: React.FC;
-export declare const Example3_CustomThresholdsWithColors: React.FC;
-export declare const Example4_TargetWithCustomScale: React.FC;
-export declare const Example5_Simple: React.FC;

package/dist/components/g2/base/G2GaugeChart.example.js

@@ -1,88 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import G2GaugeChart from "./G2GaugeChart.js";
-const Example1_TargetBased = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        min: 0,
-        max: 200000,
-        target: 160000,
-        showPercent: true
-    });
-const Example2_CustomThresholds = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        min: 0,
-        max: 200000,
-        thresholds: [
-            60000,
-            120000,
-            180000
-        ],
-        thresholdColors: [
-            '#FF4D4F',
-            '#FFA940',
-            '#FFC53D',
-            '#52C41A'
-        ],
-        ticks: [
-            0,
-            50000,
-            100000,
-            150000,
-            200000
-        ],
-        showPercent: true
-    });
-const Example3_CustomThresholdsWithColors = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        min: 0,
-        max: 200000,
-        thresholds: [
-            {
-                value: 50000,
-                color: '#FF4D4F'
-            },
-            {
-                value: 100000,
-                color: '#FFA940'
-            },
-            {
-                value: 150000,
-                color: '#FFC53D'
-            },
-            {
-                value: 200000,
-                color: '#52C41A'
-            }
-        ],
-        ticks: [
-            0,
-            50000,
-            100000,
-            150000,
-            200000
-        ],
-        showPercent: true
-    });
-const Example4_TargetWithCustomScale = ()=>{
-    const max = 200000;
-    const target = 160000;
-    return /*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        min: 0,
-        max: max,
-        target: target,
-        thresholdColors: [
-            '#FF4D4F',
-            '#FFA940',
-            '#FFC53D',
-            '#52C41A'
-        ],
-        formatter: (value, percent)=>`${value}\n完成度: ${percent.toFixed(1)}%`
-    });
-};
-const Example5_Simple = ()=>/*#__PURE__*/ jsx(G2GaugeChart, {
-        value: 147530,
-        max: 200000,
-        showPercent: true
-    });
-export { Example1_TargetBased, Example2_CustomThresholds, Example3_CustomThresholdsWithColors, Example4_TargetWithCustomScale, Example5_Simple };