@publishfx/publish-chart 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+**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,28 @@
 /**
  * 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,13 +1,11 @@
 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'
-] })=>{
+const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height = 300, showPercent = true, formatter, tickFormatter, pointerColor = "#c5c5c5", thresholdColors = [
+    "#9596d9",
+    "#FF9F4C",
+    "#56c2f3"
+], tooltip })=>{
     const containerRef = useRef(null);
-    const chartRef = useRef(null);
     const scaleTicks = useMemo(()=>{
         if (ticks && ticks.length > 0) return ticks;
         if (target) return [
@@ -32,21 +30,27 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
         ticks
     ]);
     const thresholdValues = useMemo(()=>{
+        let baseThresholds = [];
         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 [
+            if (Array.isArray(thresholds) && thresholds.length > 0 && "number" == typeof thresholds[0]) baseThresholds = [
+                ...thresholds
+            ];
+            else if (Array.isArray(thresholds) && thresholds.length > 0 && "object" == typeof thresholds[0]) baseThresholds = thresholds.map((t)=>t.value);
+        } else if (target) baseThresholds = [
             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
-        ];
+        else {
+            const step = (max - min) / 3;
+            baseThresholds = [
+                Math.round(min + step),
+                Math.round(min + 2 * step),
+                max
+            ];
+        }
+        if (baseThresholds.length > 0 && baseThresholds[baseThresholds.length - 1] !== max) baseThresholds.push(max);
+        return baseThresholds;
     }, [
         min,
         max,
@@ -54,7 +58,7 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
         thresholds
     ]);
     const thresholdColorArray = useMemo(()=>{
-        if (thresholds && Array.isArray(thresholds) && thresholds.length > 0 && 'object' == typeof thresholds[0]) return thresholds.map((t)=>t.color);
+        if (thresholds && Array.isArray(thresholds) && thresholds.length > 0 && "object" == typeof thresholds[0]) return thresholds.map((t)=>t.color);
         return thresholdColors;
     }, [
         thresholds,
@@ -62,73 +66,300 @@ const G2GaugeChart = ({ value, min = 0, max, target, thresholds, ticks, height =
     ]);
     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
-                }
-            },
-            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
+        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 padding = 50;
+            let svgOverlay = containerRef.current.querySelector('svg.gauge-arc-overlay');
+            if (svgOverlay) {
+                svgOverlay.innerHTML = '';
+                svgOverlay.setAttribute('width', String(width + 2 * padding));
+                svgOverlay.setAttribute('height', String(height + 2 * padding));
+                svgOverlay.setAttribute('viewBox', `0 0 ${width + 2 * padding} ${height + 2 * padding}`);
+                svgOverlay.style.top = `-${padding}px`;
+                svgOverlay.style.left = `-${padding}px`;
+            } else {
+                svgOverlay = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                svgOverlay.setAttribute('class', 'gauge-arc-overlay');
+                svgOverlay.setAttribute('width', String(width + 2 * padding));
+                svgOverlay.setAttribute('height', String(height + 2 * padding));
+                svgOverlay.setAttribute('viewBox', `0 0 ${width + 2 * padding} ${height + 2 * padding}`);
+                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];
+                const end = thresholdValues[i];
+                const color = colors[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 + padding + outerRadius * Math.cos(startAngleValue);
+                const startY = centerY + padding + outerRadius * Math.sin(startAngleValue);
+                const endX = centerX + padding + outerRadius * Math.cos(endAngleValue);
+                const endY = centerY + padding + outerRadius * Math.sin(endAngleValue);
+                const innerStartX = centerX + padding + innerRadius * Math.cos(startAngleValue);
+                const innerStartY = centerY + padding + innerRadius * Math.sin(startAngleValue);
+                const innerEndX = centerX + padding + innerRadius * Math.cos(endAngleValue);
+                const innerEndY = centerY + padding + 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 + padding + innerRadius * Math.cos(startAngleValue);
+            const startY = centerY + padding + innerRadius * Math.sin(startAngleValue);
+            const startTickEndX = centerX + padding + (outerRadius + tickLength) * Math.cos(startAngleValue);
+            const startTickEndY = centerY + padding + (outerRadius + tickLength) * Math.sin(startAngleValue);
+            const startTextX = centerX + padding + (outerRadius + textOffset) * Math.cos(startAngleValue);
+            const startTextY = centerY + padding + (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 = tickFormatter ? tickFormatter(min) : String(min);
+            svgOverlay.appendChild(startText);
+            const thresholdTextOffset = 0.12 * 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;
+                    }
                 }
-            },
-            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);
+                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 + padding + (outerRadius + currentTextOffset) * Math.cos(thresholdAngle);
+                const thresholdTextY = centerY + padding + (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', '14');
+                thresholdText.setAttribute('text-anchor', 'middle');
+                thresholdText.setAttribute('dominant-baseline', 'middle');
+                thresholdText.setAttribute('transform', `rotate(${rotationAngle} ${thresholdTextX} ${thresholdTextY})`);
+                thresholdText.textContent = tickFormatter ? tickFormatter(thresholdValue) : String(thresholdValue);
+                svgOverlay.appendChild(thresholdText);
+            }
+            const endAngleValue = endAngle;
+            const endX = centerX + padding + innerRadius * Math.cos(endAngleValue);
+            const endY = centerY + padding + innerRadius * Math.sin(endAngleValue);
+            const endTickEndX = centerX + padding + (outerRadius + tickLength) * Math.cos(endAngleValue);
+            const endTickEndY = centerY + padding + (outerRadius + tickLength) * Math.sin(endAngleValue);
+            const endTextX = centerX + padding + (outerRadius + textOffset) * Math.cos(endAngleValue);
+            const endTextY = centerY + padding + (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 = tickFormatter ? 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 + padding + pointerStartCircleRadius * Math.cos(pointerAngle);
+            const pointerStartY = centerY + padding + pointerStartCircleRadius * Math.sin(pointerAngle);
+            const pointerEndX = centerX + padding + (pointerStartCircleRadius + pointerLength) * Math.cos(pointerAngle);
+            const pointerEndY = centerY + padding + (pointerStartCircleRadius + pointerLength) * Math.sin(pointerAngle);
+            const pointerStartCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+            pointerStartCircle.setAttribute('cx', String(centerX + padding));
+            pointerStartCircle.setAttribute('cy', String(centerY + padding));
+            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 displayValue = formatter ? formatter(value, value / max * 100) : tickFormatter ? tickFormatter(value) : String(value);
+            const percent = (value / max * 100).toFixed(2);
+            const textCenterX = centerX + padding;
+            const textCenterY = centerY + padding + 0.7 * radius;
+            const valueTextY = textCenterY - 10;
+            const percentTextY = textCenterY + 10;
+            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', '18');
+            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', '14');
+                percentText.setAttribute('text-anchor', 'middle');
+                percentText.setAttribute('dominant-baseline', 'middle');
+                percentText.textContent = `占比: ${percent}%`;
+                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);
                 }
-            },
-            legend: false
+                const tooltipLabel = tooltip.label || '值';
+                const tooltipValue = tooltip.formatter ? tooltip.formatter(value) : value.toLocaleString();
+                tooltipElement.innerHTML = `
+          <div style="color: #666; margin-bottom: 4px;">${tooltipLabel}</div>
+          <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();
+                        console.log('containerRect', containerRect, mouseX, mouseY);
+                        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
+        tickFormatter,
+        showPercent,
+        pointerColor,
+        tooltip
     ]);
     return /*#__PURE__*/ jsx("div", {
         ref: containerRef,
         style: {
-            width: '100%',
+            width: "100%",
             height: `${height}px`
         }
     });

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/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.1",
   "description": "A React chart component library for the Publish platform, including BarChart, LineChart, BarLineChart and other visualization components",
   "type": "module",
   "keywords": [