@oiij/e-charts
Version:
A Vue Composable for ECharts
102 lines (101 loc) • 3 kB
text/typescript
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 };