@publishfx/publish-chart 2.0.3 → 2.1.1

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

@@ -0,0 +1,196 @@
+import { lines } from "@antv/g-pattern";
+import { applyAuxiliaryLineY, applyAxisX, applyAxisY, applyHighlightDate, applyScaleYLinear, createChart, getColorByGroupType, getMainView } from "./g2Helpers.js";
+const Y_AXIS_FIELD = 'groupValue';
+function renderG2BarChart(container, options) {
+    const { data, x, y, maxY, timeRange: _timeRange, themeColors, indicators = [], indicatorMap: _indicatorMap = {}, formatAxis, highlightDate = [], isDataTag = false, isLegend = true, isHorizontal = false, isHighlight = true, isCompare = false, legend, formatLabel, height = 300, tooltipRender, auxiliaryLineData = [], onNodeListChange, onChartRender } = options;
+    const colorOpts = {
+        themeColors,
+        primaryKey: y,
+        indicators
+    };
+    const chart = createChart({
+        container,
+        height,
+        autoFit: true
+    });
+    chart.options({
+        marginBottom: 0,
+        paddingBottom: 0,
+        insetBottom: 0
+    });
+    console.log('isLegend:', legend, isLegend);
+    const view = getMainView(chart);
+    view.attr('marginBottom', isLegend ? 0 : 16);
+    if (isHorizontal) view.coordinate({
+        transform: [
+            {
+                type: 'transpose'
+            }
+        ]
+    });
+    view.data(data);
+    applyScaleYLinear(view, {
+        field: 'y',
+        domainMin: 0,
+        domainMax: maxY,
+        nice: true,
+        clamp: true
+    });
+    applyHighlightDate(view, x, data, highlightDate, isHighlight);
+    console.log('g2bar data:', data, y);
+    const interval = view.interval().encode('x', x).encode('y', y).encode('color', 'groupType').transform({
+        type: 'dodgeX',
+        padding: isHorizontal ? 0.2 : 0
+    });
+    interval.style({
+        columnWidthRatio: 0.6,
+        insetLeft: (_d, index, _data, _column)=>{
+            if (isCompare) return index % 2 === 0 ? 4 : 0;
+            return 4;
+        },
+        insetRight: (_d, index, _data, _column)=>{
+            if (isCompare) return index % 2 === 1 ? 4 : 0;
+            return 4;
+        },
+        fill: (datum)=>{
+            const groupType = String(datum.groupType ?? '');
+            if (groupType.includes('_compare')) return {
+                image: lines({
+                    backgroundColor: '#fff',
+                    backgroundOpacity: 0.65,
+                    stroke: '#6aa1ff',
+                    lineWidth: 3,
+                    spacing: 3
+                }),
+                repetition: 'repeat',
+                transform: 'rotate(-30deg)'
+            };
+            return getColorByGroupType(groupType, colorOpts);
+        }
+    });
+    applyAxisX(view, {
+        grid: false
+    });
+    applyAxisY(view, {
+        labelFormatter: formatAxis
+    });
+    view.legend(false);
+    interval.tooltip({
+        items: [
+            (datum)=>({
+                    value: datum[Y_AXIS_FIELD],
+                    name: datum['groupType'],
+                    indicatorId: datum['groupType'],
+                    channel: Y_AXIS_FIELD,
+                    color: getColorByGroupType(datum['groupType'], colorOpts) || 'transparent'
+                }),
+            isCompare ? (datum)=>({
+                    value: datum[Y_AXIS_FIELD],
+                    compareTime: datum?.compareTime,
+                    name: datum['groupType'],
+                    indicatorId: datum['groupType'].replace('_compare', ''),
+                    channel: Y_AXIS_FIELD,
+                    color: getColorByGroupType(datum['groupType'], colorOpts) || 'transparent'
+                }) : null,
+            isCompare ? (datum)=>({
+                    name: datum['groupType'].replace('_compare', '_change'),
+                    indicatorId: datum['groupType'].replace('_compare', ''),
+                    value: datum?.change,
+                    isChange: true,
+                    color: 'transparent'
+                }) : null
+        ].filter(Boolean)
+    });
+    if (tooltipRender) view.interaction('tooltip', {
+        shared: true,
+        crosshairsY: true,
+        wait: 100,
+        marker: false,
+        render: (_event, payload)=>{
+            const { title, items } = payload;
+            const lastIsChange = items.filter((item)=>item.isChange);
+            let safeItems = items;
+            if (lastIsChange.length > 0) safeItems = [
+                ...items.filter((item)=>!item.isChange),
+                lastIsChange[lastIsChange.length - 1]
+            ];
+            return tooltipRender(title, safeItems ?? []) ?? null;
+        }
+    });
+    else view.interaction('tooltip', true);
+    applyAuxiliaryLineY(view, auxiliaryLineData);
+    const nodeList = [];
+    console.log('nodeList data:', data);
+    data.forEach((item)=>{
+        view.shape().data([
+            {
+                [x]: item[x],
+                [y]: 0
+            }
+        ]).encode('x', x).encode('y', y).tooltip(false).style({
+            render: ({ x: px, y: py }, context)=>{
+                const { document } = context;
+                const g = document.createElement('g', {});
+                const { paddingLeft = 24, marginLeft = 12 } = context?.coordinate?.options || {};
+                const adjustLeft = paddingLeft + marginLeft;
+                if (item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0) {
+                    nodeList.push({
+                        pointP: {
+                            x: px + adjustLeft,
+                            y: py
+                        },
+                        pointData: item.nodeInfos || {},
+                        color: item.color
+                    });
+                    const c1 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 2,
+                            fill: 'white'
+                        }
+                    });
+                    const c2 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 5,
+                            fill: item.color
+                        }
+                    });
+                    g.appendChild(c2);
+                    g.appendChild(c1);
+                }
+                return g;
+            }
+        });
+    });
+    if (isDataTag && formatLabel) interval.label({
+        text: (d)=>formatLabel(d),
+        position: isHorizontal ? 'right' : 'top',
+        offset: 0,
+        dy: isHorizontal ? 0 : -15,
+        dx: isHorizontal ? 5 : 0,
+        textAlign: isHorizontal ? 'left' : 'center',
+        transform: [
+            {
+                type: 'exceedAdjust'
+            }
+        ]
+    });
+    chart.render();
+    let hasEmittedNodeList = false;
+    chart.on('afterrender', (_e)=>{
+        if (hasEmittedNodeList) return;
+        if (onNodeListChange) onNodeListChange(nodeList);
+        console.log('chart.coordinateBBox:', chart.getContext(), view.getCoordinate());
+        const views = chart.getContext()?.views;
+        const viewCoordinate = views?.[0]?.layout;
+        if (onChartRender && viewCoordinate) onChartRender({
+            layout: viewCoordinate
+        });
+        hasEmittedNodeList = true;
+    });
+    return chart;
+}
+export { renderG2BarChart };

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

@@ -0,0 +1,71 @@
+/**
+ * G2 柱状 + 折线组合图函数式 API
+ * 复用 G2BarChart / G2LineChart 的模式：React 负责数据与配置，G2 负责纯渲染
+ */
+import { Chart } from "@antv/g2";
+import type { ChartTimeRange, IndicatorInfo } from "../../../core/ChartTypes";
+export interface RenderG2CombineChartOptions {
+    /** 已转换后的数据：约定包含 groupName、groupType、groupValue 等字段 */
+    data: any[];
+    /** X 轴字段，如 groupName */
+    x: string;
+    /** 柱状图 Y 字段，如 groupValue 或某指标字段 */
+    y: string;
+    /** 折线图 Y 字段，如另一指标字段 */
+    z: string;
+    /** 柱状图 Y 轴最大值 */
+    maxY: number;
+    /** 高亮日期，用于 x 轴 gridFilter */
+    highlightDate?: string[];
+    /** 主题色数组 */
+    themeColors: string[];
+    /** 指标映射表 */
+    indicatorMap: Record<string, IndicatorInfo>;
+    /** 柱状 Y 轴格式化 */
+    formatAxis: (val: any) => string;
+    /** 折线图 Y 轴格式化 */
+    formatLineAxis: (val: any) => string;
+    /** 是否显示数据标签 */
+    isDataTag?: boolean;
+    /** 是否显示自定义 Legend（仅影响 React 层，G2 内部不画 legend） */
+    isLegend?: boolean;
+    /** 是否启用图例高亮 */
+    isHighlight?: boolean;
+    /** 是否启用对比期 */
+    isCompare?: boolean;
+    /** 数据标签格式化：formatLabel(datum) */
+    formatLabel?: (datum: any) => string;
+    /** 图表高度 */
+    height?: number;
+    /** 时间范围（目前仅可选，预留与对比期相关的扩展） */
+    timeRange?: ChartTimeRange;
+    /** 多指标 id 列表，用于按顺序取色 */
+    indicators?: string[];
+    /** Tooltip 自定义渲染：返回挂载的 DOM，由调用方（如 React）注入 */
+    tooltipRender?: (title: string, items: Array<{
+        color?: string;
+        name: string;
+        value: any;
+        isChange?: boolean;
+        compareTime?: string;
+    }>) => HTMLElement | null;
+    /** 将计算出的节点信息传递给外层（用于渲染 NodePopover 等） */
+    onNodeListChange?: (nodes: Array<{
+        pointP: {
+            x: number;
+            y: number;
+        };
+        pointData: any;
+        color: string;
+    }>) => void;
+    /** 折线图颜色 */
+    lineColors: string[];
+    /** 图表首次渲染完成后回调，用于 NodeDetail 获取绘图区宽高与偏移 */
+    onChartRender?: (chartProps: {
+        layout: any;
+    }) => void;
+}
+/**
+ * 在容器上渲染 G2 柱状 + 折线组合图，返回 Chart 实例便于 destroy/更新
+ */
+export declare function renderG2CombineChart(container: HTMLElement, options: RenderG2CombineChartOptions): Chart;

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

@@ -0,0 +1,322 @@
+import { lines } from "@antv/g-pattern";
+import { applyAxisX, createChart, getMainView } from "./g2Helpers.js";
+const Y_AXIS_FIELD = 'groupValue';
+const BAR_Y_FIELD = 'barValue';
+const LINE_Y_FIELD = 'lineValue';
+function renderG2CombineChart(container, options) {
+    const { data, x, y, z: _z, maxY, themeColors, indicatorMap: _indicatorMap, formatAxis, formatLineAxis, isDataTag = false, isLegend: _isLegend = false, isCompare = false, formatLabel, highlightDate = [], height = 300, isHighlight = true, indicators = [], tooltipRender, onNodeListChange, lineColors, onChartRender } = options;
+    const chart = createChart({
+        container,
+        height,
+        autoFit: true
+    });
+    chart.options({
+        marginBottom: 0,
+        paddingBottom: 0,
+        insetBottom: 0
+    });
+    const view = getMainView(chart);
+    view.attr('marginBottom', 0);
+    console.log('renderG2CombineChart data:', data, 'maxY:', maxY, x, y, 'indicators:', indicators);
+    view.data(data);
+    applyAxisX(view, {
+        title: false,
+        grid: true,
+        gridStroke: '#333',
+        gridLineWidth: 50,
+        gridLineDash: [
+            1000
+        ],
+        gridFilter: highlightDate.length > 0 && isHighlight ? (val)=>highlightDate.includes(val?.label) : ()=>false
+    });
+    const barColor = themeColors[0] ?? "#5B8FF9";
+    console.log('tooltip: themeColors:', themeColors[0], barColor);
+    console.log('renderG2CombineChart interval data:', data.filter((item)=>!item.isCombine));
+    const intervalData = data.filter((item)=>!item.isCombine).map((item)=>({
+            ...item,
+            [BAR_Y_FIELD]: item[Y_AXIS_FIELD]
+        }));
+    const intervalMaxY = intervalData.reduce((max, item)=>Math.max(max, item[BAR_Y_FIELD]), 0);
+    const interval = view.interval().data(intervalData).encode("x", x).encode("y", BAR_Y_FIELD).encode("color", "groupType").transform({
+        type: 'dodgeX'
+    }).style({
+        columnWidthRatio: 0.5,
+        fill: (datum)=>{
+            const groupType = String(datum.groupType ?? '');
+            if (groupType.includes('_compare')) return {
+                image: lines({
+                    backgroundColor: '#fff',
+                    backgroundOpacity: 0.65,
+                    stroke: '#6aa1ff',
+                    lineWidth: 3,
+                    spacing: 3
+                }),
+                repetition: 'repeat',
+                transform: 'rotate(-30deg)'
+            };
+            return barColor;
+        },
+        stroke: 'transparent'
+    });
+    interval.scale('y', {
+        type: 'linear',
+        domainMin: 0,
+        domainMax: intervalMaxY,
+        nice: true,
+        clamp: true,
+        key: 'bar',
+        tickMethod: (min, max)=>Array.from({
+                length: 6
+            }, (_, i)=>min + (max - min) * i / 5)
+    });
+    interval.axis('y', {
+        position: 'left',
+        title: false,
+        grid: true,
+        gridStrokeOpacity: 0.2,
+        gridLineWidth: 1,
+        tickOpacity: 0,
+        gridLineDash: [
+            0,
+            0
+        ],
+        labelFormatter: formatAxis
+    });
+    console.log('tooltip:', barColor, isCompare);
+    interval.tooltip({
+        items: [
+            (datum)=>datum.groupType.includes('_compare') ? false : {
+                    value: datum[BAR_Y_FIELD],
+                    name: datum['groupType'],
+                    indicatorId: datum['groupType'],
+                    channel: Y_AXIS_FIELD,
+                    color: barColor || 'transparent'
+                },
+            isCompare ? (datum)=>datum.groupType.includes('_compare') ? {
+                    value: datum[BAR_Y_FIELD],
+                    compareTime: datum?.compareTime,
+                    name: datum['groupType'],
+                    indicatorId: datum['groupType'].replace('_compare', ''),
+                    channel: Y_AXIS_FIELD,
+                    color: barColor || 'transparent'
+                } : false : false,
+            isCompare ? (datum)=>datum.groupType.includes('_compare') ? {
+                    name: datum['groupType'].replace('_compare', '_change'),
+                    indicatorId: datum['groupType'].replace('_compare', ''),
+                    value: datum?.change,
+                    isChange: true,
+                    color: 'transparent'
+                } : false : false
+        ].filter(Boolean)
+    });
+    console.log('renderG2CombineChart: line data:', data.filter((item)=>item.isCombine));
+    const lineData = data.filter((item)=>item.isCombine && !item.groupType.includes('_compare')).map((item)=>({
+            ...item,
+            [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
+        }));
+    const compareLineData = data.filter((item)=>item.isCombine && item.groupType.includes('_compare')).map((item)=>({
+            ...item,
+            [LINE_Y_FIELD]: item[Y_AXIS_FIELD]
+        }));
+    const lineMaxY = lineData.reduce((max, item)=>Math.max(max, item[LINE_Y_FIELD]), 0);
+    const compareLineMaxY = compareLineData.reduce((max, item)=>Math.max(max, item[LINE_Y_FIELD]), 0);
+    const lineFinalMaxY = Math.max(lineMaxY, compareLineMaxY);
+    console.log('lineFinalMaxY:', lineFinalMaxY);
+    const line = view.line().data(lineData).encode("x", x).encode("y", LINE_Y_FIELD).encode('color', 'groupType').style({
+        lineWidth: 2,
+        stroke: (datum)=>{
+            const groupType = String(datum[0]?.groupType ?? '');
+            const color = lineColors[indicators.slice(1).indexOf(String(groupType)) ?? 0];
+            return color;
+        }
+    });
+    line.tooltip({
+        items: [
+            (datum)=>({
+                    value: datum[LINE_Y_FIELD],
+                    name: datum['groupType'],
+                    indicatorId: datum['groupType'],
+                    channel: Y_AXIS_FIELD,
+                    color: lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent'
+                })
+        ]
+    });
+    line.scale('y', {
+        type: 'linear',
+        domainMin: 0,
+        domainMax: lineFinalMaxY,
+        nice: true,
+        clamp: true,
+        key: 'bar',
+        independent: true,
+        tickMethod: (min, max)=>Array.from({
+                length: 6
+            }, (_, i)=>min + (max - min) * i / 5)
+    });
+    line.axis('y', {
+        position: 'right',
+        title: false,
+        grid: true,
+        gridStrokeOpacity: 0 === intervalMaxY ? 0.2 : 0,
+        gridLineWidth: 1,
+        gridLineDash: [
+            0,
+            0
+        ],
+        tickOpacity: 0,
+        labelFormatter: formatLineAxis
+    });
+    console.log('renderG2CombineChart: compare line data:', compareLineData);
+    const compareLine = view.line().data(compareLineData).encode('x', x).encode('y', LINE_Y_FIELD).encode('color', 'groupType').style({
+        lineDash: [
+            4,
+            4
+        ],
+        lineWidth: 2,
+        stroke: (datum, index)=>{
+            const groupType = String(datum[0]?.groupType ?? '');
+            const color = lineColors[indicators.slice(1).indexOf(String(groupType.replace('_compare', ''))) ?? 0];
+            console.log('compareLine: 222', 'index:', index, 'indicators:', indicators, 'datum:', datum, 'groupType:', groupType, 'color:', color);
+            return color ?? 'transparent';
+        }
+    });
+    compareLine.scale('y', {
+        key: 'line'
+    });
+    compareLine.axis('y', false);
+    const hasCompareData = data.some((item)=>item.groupType.includes('_compare'));
+    console.log('hasCompareData:', hasCompareData, data);
+    if (hasCompareData) compareLine.tooltip({
+        items: [
+            (datum)=>({
+                    value: datum[LINE_Y_FIELD],
+                    compareTime: datum?.compareTime,
+                    name: datum['groupType'],
+                    indicatorId: datum['groupType'].replace('_compare', ''),
+                    channel: Y_AXIS_FIELD,
+                    color: lineColors[indicators.slice(1).indexOf(String(datum['groupType'])) ?? 0] || 'transparent'
+                }),
+            (datum)=>({
+                    name: datum['groupType'].replace('_compare', '_change'),
+                    indicatorId: datum['groupType'].replace('_compare', ''),
+                    value: datum?.change,
+                    isChange: true,
+                    color: 'transparent'
+                })
+        ]
+    });
+    if (tooltipRender) line.interaction('tooltip', {
+        shared: true,
+        crosshairsY: true,
+        marker: false,
+        render: (_event, payload)=>{
+            const { title, items } = payload;
+            console.log('tooltipRender:', title, items, indicators);
+            if (indicators.length) {
+                const groupedItems = indicators.map((indicator)=>items.filter((i)=>i.indicatorId === String(indicator)));
+                console.log(groupedItems.flat(), 'tooltip groupedItems');
+                const sortedItems = groupedItems.map((group)=>[
+                        group.filter((i)=>i.name === i.indicatorId),
+                        group.filter((i)=>i.compareTime),
+                        group.filter((i)=>i.name.includes('_change'))
+                    ].filter(Boolean).flat()).flat();
+                console.log(sortedItems, 'tooltip sortedItems');
+                const formatItems = sortedItems.map((item)=>({
+                        ...item,
+                        color: lineColors[indicators.slice(1).indexOf(String(item?.indicatorId)) ?? 0] || barColor || 'transparent'
+                    }));
+                return tooltipRender(title, formatItems ?? []) ?? null;
+            }
+        }
+    });
+    view.legend(false);
+    const nodeList = [];
+    console.log('nodeList data:', data);
+    data.forEach((item)=>{
+        view.shape().data([
+            {
+                [x]: item[x],
+                [y]: 0
+            }
+        ]).encode('x', x).encode('y', y).tooltip(false).scale('y', {
+            key: 'node',
+            domainMin: 0,
+            domainMax: 1,
+            nice: true,
+            clamp: true
+        }).axis('y', {
+            grid: false,
+            title: false,
+            tick: false,
+            label: false,
+            gridStrokeOpacity: 1,
+            gridLineDash: [
+                0,
+                0
+            ]
+        }).style({
+            render: ({ x: px, y: py }, context)=>{
+                const { document } = context;
+                const g = document.createElement('g', {});
+                const { paddingLeft = 24, marginLeft = 12 } = context?.coordinate?.options || {};
+                const adjustLeft = paddingLeft + marginLeft;
+                if (item.nodeInfos?.info?.length > 0 || item.nodeInfos?.infosCompare?.length > 0) {
+                    nodeList.push({
+                        pointP: {
+                            x: px + adjustLeft,
+                            y: py
+                        },
+                        pointData: item.nodeInfos || {},
+                        color: item.color
+                    });
+                    const c1 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 2,
+                            fill: 'white'
+                        }
+                    });
+                    const c2 = document.createElement('circle', {
+                        style: {
+                            cx: px,
+                            cy: py,
+                            r: 5,
+                            fill: item.color
+                        }
+                    });
+                    g.appendChild(c2);
+                    g.appendChild(c1);
+                }
+                return g;
+            }
+        });
+    });
+    if (isDataTag && formatLabel) {
+        interval.label({
+            dy: -10,
+            dx: -10,
+            offset: 0,
+            text: (d)=>formatLabel(d)
+        });
+        line.label({
+            dy: -10,
+            dx: -10,
+            offset: 0,
+            text: (d)=>formatLabel(d)
+        });
+    }
+    chart.render();
+    let hasEmittedNodeList = false;
+    chart.on('afterrender', ()=>{
+        if (hasEmittedNodeList) return;
+        if (onNodeListChange) onNodeListChange(nodeList);
+        const viewLayout = chart.getContext()?.views?.[0]?.layout;
+        if (onChartRender && viewLayout) onChartRender({
+            layout: viewLayout
+        });
+        hasEmittedNodeList = true;
+    });
+    return chart;
+}
+export { renderG2CombineChart };

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

@@ -0,0 +1,69 @@
+import { type AuxiliaryLineItem } from './g2Helpers';
+import type { ChartTimeRange } from '../../../core/ChartTypes';
+export interface RenderG2BarChartOptions {
+    /** 已转换后的数据：约定包含 groupName、groupType、groupValue 等字段 */
+    data: any[];
+    /** X 轴字段，如 groupName */
+    x: string;
+    /** Y 轴字段，如 groupValue / cost */
+    y: string;
+    /** Y 轴最大值，用于 scale domainMax */
+    maxY: number;
+    /** 时间范围（用于对比期图例文案） */
+    timeRange?: ChartTimeRange;
+    /** 主题色数组 */
+    themeColors: string[];
+    /** 多指标 id 列表，用于按顺序取色 */
+    indicators?: string[];
+    /** 指标名映射，图例与 Tooltip 展示 */
+    indicatorMap?: Record<string, {
+        indicatorName?: string;
+    }>;
+    /** Y 轴刻度格式化 */
+    formatAxis?: (val: any) => string;
+    /** 高亮日期，用于 x 轴 gridFilter */
+    highlightDate?: string[];
+    /** 是否显示数据标签 */
+    isDataTag?: boolean;
+    /** 是否显示图例（当有 legend 字段时） */
+    isLegend?: boolean;
+    /** 是否横向展示 */
+    isHorizontal?: boolean;
+    /** 是否启用图例高亮 */
+    isHighlight?: boolean;
+    /** 图例字段名（与 y 不同时表示分组柱），通常为 groupType */
+    isCompare?: boolean;
+    legend?: string;
+    /** 数据标签格式化：formatLabel(datum) */
+    formatLabel?: (datum: any) => string;
+    /** 图表高度 */
+    height?: number;
+    /** Tooltip 自定义渲染：返回挂载的 DOM */
+    tooltipRender?: (title: string, items: Array<{
+        color?: string;
+        name: string;
+        value: any;
+    }>) => HTMLElement | null;
+    /** 辅助线 */
+    auxiliaryLineData?: AuxiliaryLineItem[];
+    /** 将计算出的节点信息传递给外层（用于渲染 NodePopover 等） */
+    onNodeListChange?: (nodes: Array<{
+        pointP: {
+            x: number;
+            y: number;
+        };
+        pointData: any;
+        color: string;
+    }>) => void;
+    /** 图例项列表（用于 tooltip 取色与文案） */
+    legendItems?: Array<{
+        id: string;
+        [key: string]: any;
+    }>;
+    /** 当前指标 id（用于 tooltip 展示） */
+    indicatorId?: string;
+}
+/**
+ * 在容器上渲染 G2 柱状图，返回 Chart 实例便于 destroy/更新
+ */
+export declare function renderG2GroupBarChart(container: HTMLElement, options: RenderG2BarChartOptions): any;