import * as _vueuse_core0 from "@vueuse/core";
import { BarChart, BarSeriesOption, LineSeriesOption, PieSeriesOption } from "echarts/charts";
import { DatasetComponentOption, GridComponentOption, LegendComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption } from "echarts/components";
import { ComposeOption, ECharts, EChartsInitOpts, use } from "echarts/core";
import * as vue from "vue";
import { MaybeRefOrGetter, TemplateRef } from "vue";

//#region src/index.d.ts
/**
 * ECharts 图表配置类型
 */
type EChartsOption = ComposeOption<BarSeriesOption | LineSeriesOption | PieSeriesOption | TitleComponentOption | LegendComponentOption | TooltipComponentOption | GridComponentOption | ToolboxComponentOption | DatasetComponentOption>;
/**
 * 基础图表类型
 */
declare const BASE_CHARTS: (typeof BarChart)[];
/**
 * 注册 ECharts 扩展
 *
 * @param ext - 扩展组件数组
 *
 * @example
 * ```ts
 * import { register } from '@oiij/e-charts'
 * import { RadarChart } from 'echarts/charts'
 *
 * register([RadarChart])
 * ```
 */
declare function register(ext: Parameters<typeof use>[0]): void;
/**
 * 使用 ECharts 选项类型
 */
type UseEChartsOptions = {
  /**
   * 图表配置
   */
  chartOption?: MaybeRefOrGetter<EChartsOption>;
  /**
   * 是否开启暗黑模式
   */
  darkMode?: MaybeRefOrGetter<boolean>;
  /**
   * 初始化选项
   */
  initOptions?: EChartsInitOpts;
};
/**
 * 使用 ECharts
 *
 * @param templateRef - 图表容器的模板引用
 * @param options - 图表选项
 * @returns ECharts 实例和工具方法
 *
 * @example
 * ```vue
 * <script setup>
 * import { ref } from 'vue'
 * import { useECharts } from '@oiij/e-charts'
 *
 * const chartRef = ref()
 * const { chartOption, onRendered } = useECharts(chartRef, {
 *   chartOption: {
 *     title: {
 *       text: '示例图表'
 *     },
 *     series: [
 *       {
 *         type: 'bar',
 *         data: [10, 20, 30, 40, 50]
 *       }
 *     ]
 *   }
 * })
 *
 * onRendered((instance) => {
 *   console.log('图表渲染完成', instance)
 * })
 * </script>
 *
 * <template>
 *   <div ref="chartRef" style="width: 100%; height: 400px;"></div>
 * </template>
 * ```
 */
declare function useECharts(templateRef: TemplateRef<HTMLElement>, options?: UseEChartsOptions): {
  templateRef: Readonly<vue.ShallowRef<HTMLElement | null>>;
  eChartInst: vue.ShallowRef<ECharts | null, ECharts | null>;
  chartOption: vue.Ref<EChartsOption | undefined, EChartsOption | undefined>;
  darkMode: vue.Ref<boolean | undefined, boolean | undefined>;
  setOption: (option?: EChartsOption) => void;
  setDarkMode: (darkMode?: boolean) => void;
  onRendered: _vueuse_core0.EventHookOn<[ECharts]>;
  onUpdate: _vueuse_core0.EventHookOn<[EChartsOption]>;
  onResize: _vueuse_core0.EventHookOn<[{
    width: number;
    height: number;
  }]>;
  onDispose: _vueuse_core0.EventHookOn<any>;
};
//#endregion
export { BASE_CHARTS, EChartsOption, UseEChartsOptions, register, useECharts };