@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
80 lines (79 loc) • 3.4 kB
TypeScript
import { echarts, EChartsOption } from '../plugins/echarts';
import { BaseChartProps, ChartThemeConfig, UseChartOptions } from '../types';
import { Ref, ComputedRef } from 'vue';
export declare const useChartOps: () => ChartThemeConfig;
export declare function useChart(options?: UseChartOptions): {
chartRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
initChart: (options?: EChartsOption, isEmpty?: boolean) => void;
updateChart: (options: EChartsOption) => void;
handleResize: () => void;
destroyChart: () => void;
getChartInstance: () => echarts.ECharts | null;
isChartInitialized: () => boolean;
emptyStateManager: {
create: () => void;
remove: () => void;
updateStyle: () => void;
};
getAxisLineStyle: (show?: boolean) => any;
getSplitLineStyle: (show?: boolean) => any;
getAxisLabelStyle: (show?: boolean) => any;
getAxisTickStyle: () => {
show: boolean;
};
getAnimationConfig: (animationDelay?: number, animationDuration?: number) => {
animationDelay: (idx: number) => number;
animationDuration: (idx: number) => number;
animationEasing: "quarticOut";
};
getTooltipStyle: (trigger?: "item" | "axis", customOptions?: any) => any;
getLegendStyle: (position?: "bottom" | "top" | "left" | "right", customOptions?: any) => any;
useChartOps: () => ChartThemeConfig;
getGridWithLegend: (showLegend: boolean, legendPosition?: "bottom" | "top" | "left" | "right", baseGrid?: any) => any;
};
interface UseChartComponentOptions<T extends BaseChartProps> {
/** Props响应式对象 */
props: T;
/** 图表配置生成函数 */
generateOptions: () => EChartsOption;
/** 空数据检查函数 */
checkEmpty?: () => boolean;
/** 自定义监听的响应式数据 */
watchSources?: (() => any)[];
/** 自定义可视事件处理 */
onVisible?: () => void;
/** useChart选项 */
chartOptions?: UseChartOptions;
}
export declare function useChartComponent<T extends BaseChartProps>(options: UseChartComponentOptions<T>): {
isEmpty: ComputedRef<boolean>;
updateChart: () => void;
handleChartVisible: () => void;
chartRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
initChart: (options?: EChartsOption, isEmpty?: boolean) => void;
handleResize: () => void;
destroyChart: () => void;
getChartInstance: () => echarts.ECharts | null;
isChartInitialized: () => boolean;
emptyStateManager: {
create: () => void;
remove: () => void;
updateStyle: () => void;
};
getAxisLineStyle: (show?: boolean) => any;
getSplitLineStyle: (show?: boolean) => any;
getAxisLabelStyle: (show?: boolean) => any;
getAxisTickStyle: () => {
show: boolean;
};
getAnimationConfig: (animationDelay?: number, animationDuration?: number) => {
animationDelay: (idx: number) => number;
animationDuration: (idx: number) => number;
animationEasing: "quarticOut";
};
getTooltipStyle: (trigger?: "item" | "axis", customOptions?: any) => any;
getLegendStyle: (position?: "bottom" | "top" | "left" | "right", customOptions?: any) => any;
useChartOps: () => ChartThemeConfig;
getGridWithLegend: (showLegend: boolean, legendPosition?: "bottom" | "top" | "left" | "right", baseGrid?: any) => any;
};
export {};