import { SetOptionOpts, EChartsOption } from 'echarts';
import { init, ECharts, use } from 'echarts/core';
import { HTMLAttributes, FC } from 'react';

type EChartsEventProp = 'onAxisAreaSelected' | 'onBrush' | 'onBrushEnd' | 'onBrushSelected' | 'onClick' | 'onContextMenu' | 'onDataRangeSelected' | 'onDataViewChanged' | 'onDataZoom' | 'onDoubleClick' | 'onDownplay' | 'onFinished' | 'onGeoSelectChanged' | 'onGeoSelected' | 'onGeoUnselected' | 'onGlobalCursorTaken' | 'onGlobalOut' | 'onHighlight' | 'onLegendInverseSelect' | 'onLegendScroll' | 'onLegendSelectChanged' | 'onLegendSelected' | 'onLegendUnselected' | 'onMagicTypeChanged' | 'onMouseDown' | 'onMouseMove' | 'onMouseOut' | 'onMouseOver' | 'onRendered' | 'onRestore' | 'onSelectChanged' | 'onTimelineChanged' | 'onTimelinePlayChanged';
type EChartEventsProps = {
    [K in EChartsEventProp]?: () => any;
};

type UseEChartsOptions = EChartEventsProps & SetOptionOpts & EChartsOption & Parameters<typeof init>[2] & {
    group?: ECharts['group'];
    theme?: Parameters<typeof init>[1];
    use?: Parameters<typeof use>[0];
};
declare function useECharts<T extends HTMLElement>(options: UseEChartsOptions): [(node: T) => void, ECharts | undefined];

declare const useConnect: (group: string) => (boolean | ((connected: boolean) => void))[];

type EChartProps = UseEChartsOptions & Omit<HTMLAttributes<HTMLDivElement>, keyof UseEChartsOptions | EChartsEventProp>;
/**
 * EChart component that wraps ECharts functionality in a React component
 *
 * @example
 * ```tsx
 * <EChart
 *   style={{ height: '400px' }}
 *   xAxis={{ type: 'category', data: ['A', 'B', 'C'] }}
 *   yAxis={{ type: 'value' }}
 *   series={[{ type: 'bar', data: [1, 2, 3] }]}
 * />
 * ```
 */
declare const EChart: FC<EChartProps>;

export { EChart, type EChartProps, type UseEChartsOptions, useConnect, useECharts };