@publishfx/publish-chart 2.1.18 → 2.1.20

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+**2.1.20** fix(chart): TS错误去除
+- 2026-03-07T04:44:58+08:00 [fix(chart): TS错误去除](http://lf.git.oa.mt/publish_platform/web/publish/commit/d81fbe1bc27f08b5e0c6749ee1334a54a0f5202a)
+- 2026-03-07T04:43:55+08:00 [fix(chart): 堆积图height模式修改](http://lf.git.oa.mt/publish_platform/web/publish/commit/f46992872461144f696f5478c2c70d83bd162fb0)
+- 2026-03-07T04:35:13+08:00 [fix(chart): 组合图的tooltip也使用组件库自带的bounding](http://lf.git.oa.mt/publish_platform/web/publish/commit/82df0547a9a0a05208f2fcbbee22bfab40f769a8)
+- 2026-03-07T04:28:41+08:00 [fix(chart): 全面取消height参数](http://lf.git.oa.mt/publish_platform/web/publish/commit/d3d89c59770c6882dd8279285aadd079d5ee81af)
+- 2026-03-07T04:20:14+08:00 [fix(chart): 移除自定义label部分](http://lf.git.oa.mt/publish_platform/web/publish/commit/f745b401fabaa821caf5d4f05fa3512d30e630d8)
+- 2026-03-07T04:11:59+08:00 [fix(chart): 取消height参数](http://lf.git.oa.mt/publish_platform/web/publish/commit/f26b361d5091b467b39d255cc99e421e8496f597)
+- 2026-03-07T04:09:01+08:00 [fix(chart): G2的自适应不需要再传height了，直接控制容器的尺寸即可](http://lf.git.oa.mt/publish_platform/web/publish/commit/0fb36917b7cf5cffcee7fb52793be6d7fe8a55e9)
+- 2026-03-06T23:17:24+08:00 [fix(chart): 移除无用代码](http://lf.git.oa.mt/publish_platform/web/publish/commit/1e9fe9f4f291fbbaa7af0b96201ce1d6035ce0ab)
+- 2026-03-06T23:14:40+08:00 [fix(chart): 侦听window.resize,超时timeout](http://lf.git.oa.mt/publish_platform/web/publish/commit/4894c21327f75fac047876a0db8410f7c5ac6b9f)
+
 **2.1.14** fix(chart): 修复组合图折线指标传空判断
 - 2026-03-05T02:35:21+08:00 [fix(chart): 修复组合图折线指标传空判断](http://lf.git.oa.mt/publish_platform/web/publish/commit/abad3dc8688a3a06d57e2ef1c3884593f5bba88e)
 - 2026-03-05T02:30:07+08:00 [fix(chart): 副轴和非副轴分别定义偏移](http://lf.git.oa.mt/publish_platform/web/publish/commit/6390674b94bcffb02e2145ecc51927a20d89d4a0)

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

@@ -130,7 +130,6 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
                 const v = d[safeY];
                 return "-" === v || null == v ? "" : formatter.formatIndicator(v, safeIndicatorMap[safeLegend]);
             } : void 0,
-            height: height - canvasMarginBottom,
             tooltipRender: (title, items)=>{
                 currentTooltipTitleRef.current = title;
                 const container = tooltipContainerRef.current;
@@ -167,16 +166,6 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
                 title: tooltipTitle
             });
         });
-        const handleWindowResize = ()=>{
-            setTimeout(()=>{
-                if (chartRef.current && containerRef.current) {
-                    const width = containerRef.current.clientWidth;
-                    const height = containerRef.current.clientHeight;
-                    chartRef.current.changeSize(width, height);
-                }
-            }, 100);
-        };
-        window.addEventListener("resize", handleWindowResize);
         return ()=>{
             if (chartRef.current) {
                 chartRef.current.off("plot:click");
@@ -186,7 +175,6 @@ const G2BarChart = ({ height = 300, data, x = "", y = "", indicatorMap, onChartC
         };
     }, [
         filteredData,
-        height,
         x,
         y,
         safeLegend,

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

@@ -260,7 +260,6 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
             isCompare,
             isHighlight,
             isClickable: !!onChartClick,
-            height: height - canvasMarginBottom,
             formatLabel: (isDataTag || isCombineDataTag) && !isOldData ? (d)=>{
                 const indicatorId = d.groupType.split("_")[0];
                 const key = isGroupRef.current && !d.isCombine ? "total" : indicatorId;
@@ -314,27 +313,15 @@ const G2CombineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorM
                 title: tooltipTitle
             });
         });
-        const handleWindowResize = ()=>{
-            setTimeout(()=>{
-                if (chartRef.current && containerRef.current) {
-                    const width = containerRef.current.clientWidth;
-                    const height = containerRef.current.clientHeight;
-                    chartRef.current.changeSize(width, height);
-                }
-            }, 100);
-        };
-        window.addEventListener("resize", handleWindowResize);
         return ()=>{
             if (chartRef.current) {
                 chartRef.current.off("plot:click");
                 chartRef.current.destroy();
                 chartRef.current = null;
             }
-            window.removeEventListener("resize", handleWindowResize);
         };
     }, [
         filteredData,
-        height,
         x,
         y,
         z,

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

@@ -152,7 +152,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
                 const indicatorId = d.groupType.split("_")[0];
                 return "-" === formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]) ? "" : formatter.formatIndicator(d.groupValue, safeIndicatorMap[indicatorId]);
             } : void 0,
-            height: height - canvasMarginBottom,
             tooltipRender: (title, items)=>{
                 currentTooltipTitleRef.current = title;
                 const container = tooltipContainerRef.current;
@@ -194,16 +193,6 @@ const G2LineChart = ({ height = 300, data, x = "", y = "", z = "", indicatorMap,
             });
             chart.on("plot:pointerenter:", (event)=>{});
         }
-        const handleWindowResize = ()=>{
-            setTimeout(()=>{
-                if (chartRef.current && containerRef.current) {
-                    const width = containerRef.current.clientWidth;
-                    const height = containerRef.current.clientHeight;
-                    chartRef.current.changeSize(width, height);
-                }
-            }, 100);
-        };
-        window.addEventListener("resize", handleWindowResize);
         return ()=>{
             if (chartRef.current) {
                 chartRef.current.off("plot:click");

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

@@ -5,7 +5,6 @@
 import { Chart } from '@antv/g2';
 export interface CreateChartOptions {
     container: HTMLElement;
-    height?: number;
     autoFit?: boolean;
     padding?: [number, number, number, number];
     margin?: [number, number, number, number];

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

@@ -1,10 +1,9 @@
 import { Chart } from "@antv/g2";
 import { splitTextToMultiline } from "../../../utils/chartHelpers.js";
 function createChart(options) {
-    const { container, height = 300, autoFit = true } = options;
+    const { container, autoFit = true } = options;
     return new Chart({
         container,
-        height,
         autoFit,
         margin: 0
     });
@@ -73,7 +72,6 @@ function applyAxisX(mark, options = {}) {
         labelAutoRotate: false,
         labelFontSize: fontSize,
         labelFontColor: '#000',
-        size: isHorizontal ? Math.floor(containerWidth / 5) : 30,
         labelAutoEllipsis: {
             type: 'ellipsis',
             minLength: 80,
@@ -81,12 +79,6 @@ function applyAxisX(mark, options = {}) {
         },
         labelAlign: 'horizontal',
         labelDx: (_datum, _index, _data)=>0,
-        labelRender: isHorizontal ? void 0 : (datum)=>{
-            let left = '0%';
-            if (datum.value > 0.9) left = '-13%';
-            else if (datum.value < 0.1) left = '10%';
-            return `<div style="transform: translateX(${left});">${datum.label}</div>`;
-        },
         labelOpacity: 0.6,
         ...axisFilter && {
             tickFilter: axisFilter('tick'),

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

@@ -40,8 +40,6 @@ export interface RenderG2BarChartOptions {
     legend?: string;
     /** 数据标签格式化：formatLabel(datum) */
     formatLabel?: (datum: any) => string;
-    /** 图表高度 */
-    height?: number;
     /** Tooltip 自定义渲染：返回挂载的 DOM */
     tooltipRender?: (title: string, items: Array<{
         color?: string;

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

@@ -3,7 +3,7 @@ import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyN
 const Y_AXIS_FIELD = 'groupValue';
 const CLOSE_HIGHLIGHT_DEBUG = false;
 function renderG2BarChart(container, 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 { 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, tooltipRender, auxiliaryLineData = [], onNodeListChange, onChartRender } = options;
     const colorOpts = {
         themeColors,
         primaryKey: y,
@@ -11,7 +11,6 @@ function renderG2BarChart(container, options) {
     };
     const chart = createChart({
         container,
-        height,
         autoFit: true
     });
     chart.options({
@@ -119,7 +118,7 @@ function renderG2BarChart(container, options) {
         x: 0,
         y: 0,
         width: container.clientWidth || container.offsetWidth,
-        height: height
+        height: container.clientHeight || container.offsetHeight
     };
     if (tooltipRender) view.interaction('tooltip', {
         shared: true,

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

@@ -46,8 +46,6 @@ export interface RenderG2CombineChartOptions {
     isClickable?: boolean;
     /** 数据标签格式化：formatLabel(datum) */
     formatLabel?: (datum: any) => string;
-    /** 图表高度 */
-    height?: number;
     /** 时间范围（目前仅可选，预留与对比期相关的扩展） */
     timeRange?: ChartTimeRange;
     /** 多指标 id 列表，用于按顺序取色 */

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

@@ -5,10 +5,9 @@ const Y_AXIS_FIELD = 'groupValue';
 const BAR_Y_FIELD = 'barValue';
 const LINE_Y_FIELD = 'lineValue';
 function renderG2CombineChart(container, options) {
-    const { data, nodeData, x, z: _z, maxLeft, maxRight, 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, isTooltipContent = false } = options;
+    const { data, nodeData, x, z: _z, maxLeft, maxRight, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = true, isCombineDataTag = true, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], isHighlight = true, isClickable = false, indicators = [], tooltipRender, auxiliaryLineData = [], onNodeListChange, lineColors, onChartRender, isGroup, legendItems = [], indicatorId, isTooltipContent = false } = options;
     const chart = createChart({
         container,
-        height,
         autoFit: true
     });
     chart.options({
@@ -254,130 +253,52 @@ function renderG2CombineChart(container, options) {
                 } : false
         ].filter(Boolean)
     });
-    if (tooltipRender) view.interaction('tooltip', {
-        shared: true,
-        crosshairsY: true,
-        marker: false,
-        ...isTooltipContent ? {
-            mount: 'body'
-        } : {},
-        render: (event, payload)=>{
-            const { title, items } = payload;
-            let safeTitle = title.replace(/,.*$/, '');
-            const baseItems = items.filter((item)=>item.hasOwnProperty('isCombine') && !item.isCombine);
-            const safeItems = fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup);
-            const combineItems = items.filter((item)=>item.hasOwnProperty('isCombine') && item.isCombine);
-            const safeCombineItems = fillMissingIndicator(combineItems, safeTitle, isCompare, isGroup);
-            const indicatorOrder = new Map(indicators.map((id, i)=>[
-                    id,
-                    i
-                ]));
-            const sortedCombineItems = [
-                ...safeCombineItems
-            ].sort((a, b)=>{
-                const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
-                const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
-                if (orderA !== orderB) return orderA - orderB;
-                const typeRank = (item)=>{
-                    if (item.isChange) return 2;
-                    if ('compareline' === item.tipType) return 1;
-                    return 0;
-                };
-                return typeRank(a) - typeRank(b);
-            });
-            const content = tooltipRender(safeTitle, [
-                ...safeItems,
-                ...sortedCombineItems
-            ]) ?? null;
-            if (content && isTooltipContent) {
-                const domEvent = event?.event ?? event;
-                const canvas = container.querySelector('canvas');
-                const canvasRect = canvas ? canvas.getBoundingClientRect() : container.getBoundingClientRect();
-                const canvasX = domEvent?.canvasX ?? domEvent?.x ?? 0;
-                const canvasY = domEvent?.canvasY ?? domEvent?.y ?? 0;
-                const clientX = canvasRect.left + canvasX;
-                const clientY = canvasRect.top + canvasY;
-                const offsetX = 12;
-                const offsetY = 12;
-                const applyPosition = ()=>{
-                    let el = content;
-                    while(el && el.parentElement){
-                        const p = el.parentElement;
-                        if (p.classList?.contains('g2-tooltip')) {
-                            el = p;
-                            break;
-                        }
-                        el = p;
-                    }
-                    const wrapper = el && el.classList?.contains('g2-tooltip') ? el : null;
-                    if (!wrapper) return;
-                    const wRect = wrapper.getBoundingClientRect();
-                    const tooltipW = wRect.width || 260;
-                    const tooltipH = wRect.height || 300;
-                    const viewportWidth = window.innerWidth;
-                    const viewportHeight = window.innerHeight;
-                    let left = clientX + offsetX;
-                    let top = clientY + offsetY;
-                    if (left + tooltipW > viewportWidth - 10) left = clientX - tooltipW - offsetX;
-                    if (top + tooltipH > viewportHeight - 10) top = clientY - tooltipH - offsetY;
-                    if (left < 10) left = 10;
-                    if (top < 10) top = 10;
-                    wrapper.style.position = 'fixed';
-                    wrapper.style.left = `${left}px`;
-                    wrapper.style.top = `${top}px`;
-                    wrapper.style.transform = 'none';
-                    wrapper.style.pointerEvents = 'none';
-                    wrapper.style.zIndex = '99999';
-                };
-                try {
-                    applyPosition();
-                    requestAnimationFrame(applyPosition);
-                } catch  {}
-            } else if (content && !isTooltipContent) {
-                const domEvent = event?.event ?? event;
-                const clientX = domEvent?.clientX ?? domEvent?.x ?? 0;
-                const clientY = domEvent?.clientY ?? domEvent?.y ?? 0;
-                const rect = container.getBoundingClientRect();
-                const offsetX = 12;
-                const offsetY = 12;
-                const applyClamp = ()=>{
-                    let el = content;
-                    while(el && el.parentElement){
-                        const p = el.parentElement;
-                        if (p.classList?.contains('g2-tooltip')) {
-                            el = p;
-                            break;
-                        }
-                        el = p;
-                    }
-                    const wrapper = el && el.classList?.contains('g2-tooltip') ? el : null;
-                    if (!wrapper) return;
-                    const wRect = wrapper.getBoundingClientRect();
-                    const tooltipW = wRect.width || 260;
-                    const tooltipH = wRect.height || 300;
-                    const minLeft = rect.left;
-                    const maxLeft = rect.right - tooltipW;
-                    const minTop = rect.top;
-                    const maxTop = rect.bottom - tooltipH;
-                    const desiredLeft = clientX + offsetX;
-                    const desiredTop = clientY + offsetY;
-                    const left = Math.min(Math.max(desiredLeft, minLeft), Math.max(maxLeft, minLeft));
-                    const top = Math.min(Math.max(desiredTop, minTop), Math.max(maxTop, minTop));
-                    wrapper.style.position = 'fixed';
-                    wrapper.style.left = `${left}px`;
-                    wrapper.style.top = `${top}px`;
-                    wrapper.style.transform = 'translate(0px, 0px)';
-                    wrapper.style.pointerEvents = 'none';
-                    wrapper.style.zIndex = '9999';
-                };
-                try {
-                    applyClamp();
-                    requestAnimationFrame(applyClamp);
-                } catch  {}
+    if (tooltipRender) {
+        const tooltipBounding = {
+            x: 0,
+            y: 0,
+            width: container.clientWidth || container.offsetWidth,
+            height: container.clientHeight || container.offsetHeight
+        };
+        view.interaction('tooltip', {
+            shared: true,
+            crosshairsY: true,
+            marker: false,
+            bounding: tooltipBounding,
+            ...isTooltipContent ? {
+                mount: 'body'
+            } : {},
+            render: (payload)=>{
+                const { title, items } = payload;
+                let safeTitle = title.replace(/,.*$/, '');
+                const baseItems = items.filter((item)=>item.hasOwnProperty('isCombine') && !item.isCombine);
+                const safeItems = fillMissingIndicator(baseItems, safeTitle, isCompare, isGroup);
+                const combineItems = items.filter((item)=>item.hasOwnProperty('isCombine') && item.isCombine);
+                const safeCombineItems = fillMissingIndicator(combineItems, safeTitle, isCompare, isGroup);
+                const indicatorOrder = new Map(indicators.map((id, i)=>[
+                        id,
+                        i
+                    ]));
+                const sortedCombineItems = [
+                    ...safeCombineItems
+                ].sort((a, b)=>{
+                    const orderA = indicatorOrder.get(a.indicatorId) ?? 1 / 0;
+                    const orderB = indicatorOrder.get(b.indicatorId) ?? 1 / 0;
+                    if (orderA !== orderB) return orderA - orderB;
+                    const typeRank = (item)=>{
+                        if (item.isChange) return 2;
+                        if ('compareline' === item.tipType) return 1;
+                        return 0;
+                    };
+                    return typeRank(a) - typeRank(b);
+                });
+                return tooltipRender(safeTitle, [
+                    ...safeItems,
+                    ...sortedCombineItems
+                ]) ?? null;
             }
-            return content;
-        }
-    });
+        });
+    }
     view.legend(false);
     view.interaction('poptip', {
         offsetY: -20,

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

@@ -2,10 +2,9 @@ import { lines } from "@antv/g-pattern";
 import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyScaleYLinear, createChart, getMainView } from "./g2Helpers.js";
 const Y_AXIS_FIELD = 'groupValue';
 function renderG2GroupBarChart(container, options) {
-    const { data, x, y, maxY, timeRange: _timeRange, themeColors, indicators: _indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], isDataTag = false, isLegend = true, isHorizontal = false, isHighlight = true, isCompare: _isCompare = false, legend, formatLabel, height = 300, tooltipRender, auxiliaryLineData = [], onNodeListChange, legendItems = [], indicatorId } = options;
+    const { data, x, y, maxY, timeRange: _timeRange, themeColors, indicators: _indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], isDataTag = false, isLegend = true, isHorizontal = false, isHighlight = true, isCompare: _isCompare = false, legend, formatLabel, tooltipRender, auxiliaryLineData = [], onNodeListChange, legendItems = [], indicatorId } = options;
     const chart = createChart({
         container,
-        height,
         autoFit: true
     });
     chart.options({
@@ -93,7 +92,7 @@ function renderG2GroupBarChart(container, options) {
             x: 0,
             y: 0,
             width: container.clientWidth || container.offsetWidth,
-            height: height
+            height: container.clientHeight || container.offsetHeight
         };
         interval.interaction('tooltip', {
             shared: true,
@@ -114,7 +113,7 @@ function renderG2GroupBarChart(container, options) {
             x: 0,
             y: 0,
             width: container.clientWidth || container.offsetWidth,
-            height: height
+            height: container.clientHeight || container.offsetHeight
         };
         view.interaction('tooltip', {
             bounding: tooltipBounding

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

@@ -45,8 +45,6 @@ export interface RenderG2LineChartOptions {
     isHighlight?: boolean;
     /** 数据标签格式化：formatLabel(datum) */
     formatLabel?: (datum: any) => string;
-    /** 图表高度 */
-    height?: number;
     /** 图例宽度（像素，position 为 bottom 时生效） */
     legendLength?: number;
     /** 图例区域高度（像素，可选） */

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

@@ -1,7 +1,7 @@
 import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyNodeData, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
 const Y_AXIS_FIELD = 'groupValue';
 function renderG2LineChart(container, 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;
+    const { data, nodeData, x, y, minY, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], auxiliaryLineData = [], isDataTag = false, isLegend = true, isHighlight = true, formatLabel, legendLength: _legendLength, legendSize: _legendSize, tooltipRender, onNodeListChange, onChartRender } = options;
     const colorOpts = {
         themeColors,
         primaryKey: y,
@@ -9,7 +9,6 @@ function renderG2LineChart(container, options) {
     };
     const chart = createChart({
         container,
-        height,
         autoFit: true
     });
     chart.options({
@@ -84,7 +83,7 @@ function renderG2LineChart(container, options) {
         x: 0,
         y: 0,
         width: container.clientWidth || container.offsetWidth,
-        height: height
+        height: container.clientHeight || container.offsetHeight
     };
     if (tooltipRender) view.interaction('tooltip', {
         shared: true,

package/package.json

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