uni-echarts/dist/index.d.ts

🪀 适用于uni-app的Apache ECharts组件（仅支持Vue 3）

import type * as Echarts from 'echarts/core';
import type { init, ECElementEvent, ElementEvent, SetOptionOpts } from 'echarts/core';
import type { MaybeRefOrGetter, StyleValue, Ref, InjectionKey, ComputedRef, ComponentPublicInstance, Reactive } from 'vue';






type OptionalValue<T> = T | undefined;
type NullableValue<T> = T | null;

type Injection<T> = MaybeRefOrGetter<NullableValue<T>>;






type PublicApi = Pick<
  EChartsType,
  "getWidth" |
  "getHeight" |
  "getDom" |
  "getOption" |
  "dispatchAction" |
  "convertToPixel" |
  "convertFromPixel" |
  "containPixel" |
  "getDataURL" |
  "getConnectedDataURL" |
  "appendData" |
  "clear" |
  "isDisposed" |
  "dispose"
>;

declare function usePublicApi(chart: Ref<NullableValue<EChartsType>>): PublicApi;















type InitType = typeof init;
type InitParameters = Parameters<InitType>;

type ChartTheme = NonNullable<InitParameters[1]>;
type ChartThemeInjection = Injection<ChartTheme>;

type InitOptions = NonNullable<InitParameters[2]>;
type InitOptionsInjection = Injection<InitOptions>;

type UpdateOptions = SetOptionOpts;
type UpdateOptionsInjection = Injection<UpdateOptions>;

type EChartsType = ReturnType<InitType>;
type ZRenderType = ReturnType<EChartsType["getZr"]>;
type ZRenderHandler = ZRenderType["handler"];

type SetOptionType = EChartsType["setOption"];

type ChartOption = Parameters<SetOptionType>[0];
type ChartOptionInjection = Injection<ChartOption>;

type AutoResize = boolean | {
  throttle?: number;
  onResize?: () => void;
};

interface LoadingOptions {
  text?: string;
  textColor?: string;
  fontSize?: number | string;
  fontWeight?: number | string;
  fontStyle?: string;
  fontFamily?: string;
  maskColor?: string;
  showSpinner?: boolean;
  color?: string;
  spinnerRadius?: number;
  lineWidth?: number;
  zlevel?: number;
}

type LoadingOptionsInjection = Injection<LoadingOptions>;

interface UniEchartsProps {
  /**
   * Custom root el class.
   */
  customClass?: any;
  /**
   * Custom root el style.
   */
  customStyle?: StyleValue;
  /**
   * Same as the option of echarts.
   */
  option?: ChartOption;
  /**
   * Option inject key.
   */
  optionKey?: string;
  /**
   * Theme to be applied.
   */
  theme?: ChartTheme;
  /**
   * Optional chart init configurations.
   */
  initOptions?: InitOptions;
  /**
   * Options for updating chart option.
   */
  updateOptions?: UpdateOptions;
  /**
   * Group name to be used in chart connection.
   */
  group?: string;
  /**
   * For performance critical scenarios (having a large dataset) we'd better bypass Vue's reactivity system for `option` prop.
   */
  manualUpdate?: boolean;
  /**
   * Whether the chart should be resized automatically whenever its root is resized.
   */
  autoresize?: AutoResize;
  /**
   * Whether the chart is in loading state.
   */
  loading?: boolean;
  /**
   * Configuration item of loading animation.
   */
  loadingOptions?: LoadingOptions;
  /**
   * Canvas type.
   */
  canvasType?: "2d" | "legacy";
  /**
   * Prevent screen scroll when touching the canvas.
   */
  disableScroll?: boolean;
  /**
   * Support mouse hover behavior in PC.
   */
  supportHover?: boolean;
  /**
   * Init delay time(ms).
   */
  initDelay?: number;
}

type MouseEventName =
  | "click"
  | "dblclick"
  | "mouseout"
  | "mouseover"
  | "mouseup"
  | "mousedown"
  | "mousemove"
  | "contextmenu"
  | "globalout";

type ElementEventName =
  | MouseEventName
  | "mousewheel"
  | "drag"
  | "dragstart"
  | "dragend"
  | "dragenter"
  | "dragleave"
  | "dragover"
  | "drop";

type ZRenderEventName = `zr:${ElementEventName}`;

type OtherEventName =
  | "highlight"
  | "downplay"
  | "selectchanged"
  | "legendselectchanged"
  | "legendselected"
  | "legendunselected"
  | "legendselectall"
  | "legendinverseselect"
  | "legendscroll"
  | "datazoom"
  | "datarangeselected"
  | "graphroam"
  | "georoam"
  | "treeroam"
  | "timelinechanged"
  | "timelineplaychanged"
  | "restore"
  | "dataviewchanged"
  | "magictypechanged"
  | "geoselectchanged"
  | "geoselected"
  | "geounselected"
  | "axisareaselected"
  | "brush"
  | "brushEnd"
  | "brushselected"
  | "globalcursortaken";

type UniEventName =
  | "touchstart"
  | "touchmove"
  | "touchcancel"
  | "touchend"
  | "tap"
  | "longpress"
  | "longtap"
  | "transitionend"
  | "animationstart"
  | "animationiteration"
  | "animationend"
  | "touchforcechange";

type NativeEventName = `native:${ElementEventName}` | `native:${UniEventName}`;

type MouseEmits = {
  [key in MouseEventName]: (params: ECElementEvent) => void;
};

type ZRenderEmits = {
  [key in ZRenderEventName]: (params: ElementEvent) => void;
};

type OtherEmits = {
  [key in OtherEventName]: (params: any) => void;
};

type NativeEmits = {
  [key in NativeEventName]: (params: any) => void;
};

type UniEchartsEmits = MouseEmits & ZRenderEmits & OtherEmits & NativeEmits & {
  rendered: (params: { elapsedTime: number }) => void;
  finished: () => void;
};

interface UniEchartsInst extends PublicApi, Pick<
  EChartsType,
  "setOption" | "resize"
> {
  root: NullableValue<HTMLElement>;
  canvasId: string;
  chart: NullableValue<EChartsType>;
  toTempFilePath: (options?: Omit<UniApp.CanvasToTempFilePathOptions, "canvasId" | "canvas">) => Promise<UniApp.CanvasToTempFilePathRes>;
}

interface CanvasRect {
  top: number;
  left: number;
  width: number;
  height: number;
}

interface NormalizedTouch {
  x: number;
  y: number;
  wheelDelta: number;
}

interface GetTouchFuc {
  (event: TouchEvent, touches: TouchList): NormalizedTouch;

  (event: MouseEvent): NormalizedTouch;

  (event: TouchEvent | MouseEvent, touches?: TouchList): NormalizedTouch;
}





type MinifyEcharts = Pick<
  typeof Echarts,
  "init" | "registerPreprocessor" | "setPlatformAPI" | "use" | "throttle"
>;

declare const ECHARTS_KEY: InjectionKey<MinifyEcharts>;

declare function provideEcharts(echarts: MinifyEcharts): void;

declare function useEcharts(): MinifyEcharts;











declare function useAutoresize(chart: Ref<NullableValue<EChartsType>>, options: {
  echarts: MinifyEcharts;
  autoresize: MaybeRefOrGetter<AutoResize>;
  root: Ref<NullableValue<HTMLElement>>;
}): void;














declare const INIT_OPTIONS_KEY: InjectionKey<InitOptionsInjection>;

declare function provideEchartsInitOptions(value: InitOptionsInjection): void;

declare function useEchartsInitOptions(value: MaybeRefOrGetter<OptionalValue<InitOptions>>): {
  injectInitOptions: ComputedRef<NullableValue<InitOptions>>;
  innerInitOptions: ComputedRef<InitOptions>;
};








declare function useEchartsMouseWheel(options: {
  isPc: boolean;
  chart: Ref<NullableValue<EChartsType>>;
  getTouch: GetTouchFuc;
}): void;












declare const OPTION_KEY: "UniEcharts.option";

declare function getEchartsOptionKey(key?: string): string;

declare function provideEchartsOption(value: ChartOptionInjection): void;
declare function provideEchartsOption(key: string, value: ChartOptionInjection): void;
declare function provideEchartsOption(keyOrValue: string | ChartOptionInjection, value?: ChartOptionInjection): void;

declare function useEchartsOption(key: OptionalValue<string>, value: MaybeRefOrGetter<OptionalValue<ChartOption>>): {
  injectOption: ComputedRef<NullableValue<ChartOption>>;
  innerOption: ComputedRef<NullableValue<ChartOption>>;
};














declare const THEME_KEY: InjectionKey<ChartThemeInjection>;

declare function provideEchartsTheme(value: ChartThemeInjection): void;

declare function useEchartsTheme(value: MaybeRefOrGetter<OptionalValue<ChartTheme>>): {
  injectTheme: ComputedRef<NullableValue<ChartTheme>>;
  innerTheme: ComputedRef<ChartTheme>;
};




type VueThis = ComponentPublicInstance;

declare function useVueThis(): VueThis;















declare function useEchartsTouch(options: {
  vueThis: VueThis;
  supportHover: MaybeRefOrGetter<boolean>;
  isPc: boolean;
  canvasId: string;
  chart: Ref<NullableValue<EChartsType>>;
  canvasRect: Reactive<CanvasRect>;
  getTouch: GetTouchFuc;
}): {
  onStart: (event: TouchEvent) => void;
  onMove: (event: TouchEvent) => void;
  onEnd: (event: TouchEvent) => void;
};














declare const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection>;

declare function provideEchartsUpdateOptions(value: UpdateOptionsInjection): void;

declare function useEchartsUpdateOptions(value: MaybeRefOrGetter<OptionalValue<UpdateOptions>>): {
  injectUpdateOptions: ComputedRef<NullableValue<UpdateOptions>>;
  innerUpdateOptions: ComputedRef<UpdateOptions>;
};
















declare const LOADING_OPTIONS_KEY: InjectionKey<LoadingOptionsInjection>;

declare function provideEchartsLoadingOptions(value: LoadingOptionsInjection): void;

declare function useLoading(chart: Ref<NullableValue<EChartsType>>, options: {
  loading: MaybeRefOrGetter<boolean>;
  loadingOptions: MaybeRefOrGetter<OptionalValue<LoadingOptions>>;
}): void;

declare function useUid(): number;

type EventType = string | symbol;

type Handler<T = unknown> = (event: T) => void;

type WildcardHandler<T = Record<string, unknown>> = (
  type: keyof T,
  event: T[keyof T]
) => void;

type EventHandlerList<T = unknown> = Array<Handler<T>>;

type WildCardEventHandlerList<T = Record<string, unknown>> = Array<
  WildcardHandler<T>
>;

type EventHandlerMap<Events extends Record<EventType, unknown>> = Map<
  keyof Events | "*",
  EventHandlerList<Events[keyof Events]> | WildCardEventHandlerList<Events>
>;

interface Emitter<Events extends Record<EventType, unknown>> {
  events: EventHandlerMap<Events>;

  on: (<Key extends keyof Events>(type: Key, handler: Handler<Events[Key]>) => void) & ((type: "*", handler: WildcardHandler<Events>) => void);

  off: (<Key extends keyof Events>(
    type: Key,
    handler?: Handler<Events[Key]>
  ) => void) & ((type: "*", handler: WildcardHandler<Events>) => void);

  emit: (<Key extends keyof Events>(type: Key, event: Events[Key]) => void) & (<Key extends keyof Events>(
    type: undefined extends Events[Key] ? Key : never
  ) => void);
}

declare function mitt<Events extends Record<EventType, unknown>>(
  events?: EventHandlerMap<Events>
): Emitter<Events>;











type CanvasNode = UniApp.NodeCallbackResult["node"];
type CanvasContext = UniApp.CanvasContext;

declare class UniCanvas {

  tagName: "canvas";

  attrs: Record<string, any>;

  canvasId: string;
  context: CanvasContext;
  canvasNode: NullableValue<CanvasNode>;

  private _emitter: Emitter<Record<EventType, any>>;

  constructor(canvasId: string, context: CanvasContext, canvasNode: NullableValue<CanvasNode>);

  private _setupContext(context: CanvasContext): void;

  get width(): number;
  set width(value: number);

  get height(): number;
  set height(value: number);

  getContext(type: "2d"): OptionalValue<CanvasContext>;

  setAttribute(key: string, value: any): void;

  getAttribute(key: string): any;

  addEventListener(type: string, listener: (event: Event) => void): void;

  removeEventListener(type: string, listener: (event: Event) => void): void;

  dispatchEvent(type: string | Event, event?: Event): boolean;

  attachEvent(): void;

  detachEvent(): void;

  toTempFilePath(options?: Omit<UniApp.CanvasToTempFilePathOptions, "canvasId" | "canvas">): Promise<UniApp.CanvasToTempFilePathRes>;

  static parseFontSize(font: string): number;

  static normalizeColor(context: CanvasContext, color: string | object): string | object;

  static dispatch(
    handler: ZRenderHandler,
    event: Parameters<ZRenderHandler["dispatch"]>[0],
    touch: Parameters<ZRenderHandler["dispatch"]>[1]
  ): void;

}

declare class UniImage {

  tagName: "img";

  width: number;
  height: number;

  private _src: NullableValue<string>;

  constructor();

  get src(): NullableValue<string>;
  set src(value: NullableValue<string>);

  onload?: (res: UniApp.GetImageInfoSuccessData) => void;
  onerror?: (err: any) => void;

}

declare function setupEchartsCanvas(echarts: MinifyEcharts, options: {
  canvas: UniCanvas;
  node: NullableValue<CanvasNode>;
}): void;

declare function getIsPc(): boolean;

interface IPlatform {
  APP: "APP";
  APP_ANDROID: "APP-ANDROID";
  APP_IOS: "APP-IOS";
  APP_HARMONY: "APP-HARMONY";
  WEB: "WEB";
  MP: "MP";
  MP_WEIXIN: "MP-WEIXIN";
  MP_ALIPAY: "MP-ALIPAY";
  MP_BAIDU: "MP-BAIDU";
  MP_TOUTIAO: "MP-TOUTIAO";
  MP_LARK: "MP-LARK";
  MP_QQ: "MP-QQ";
  MP_KUAISHOU: "MP-KUAISHOU";
  MP_JD: "MP-JD";
  MP_360: "MP-360";
  MP_XHS: "MP-XHS";
  MP_HARMONY: "MP-HARMONY";
  QUICKAPP_WEBVIEW: "QUICKAPP-WEBVIEW";
  QUICKAPP_WEBVIEW_UNION: "QUICKAPP-WEBVIEW-UNION";
  QUICKAPP_WEBVIEW_HUAWEI: "QUICKAPP-WEBVIEW-HUAWEI";
  OTHER: "OTHER";
}

declare const Platform: IPlatform;

declare function getPlatform(): IPlatform[keyof IPlatform];

declare const platform: ReturnType<typeof getPlatform>;

/** App */
declare const isApp: boolean;
/** App Android */
declare const isAppAndroid: boolean;
/** App iOS */
declare const isAppIos: boolean;
/** App HarmonyOS Next */
declare const isAppHarmony: boolean;
/** Web */
declare const isWeb: boolean;
/** 小程序 */
declare const isMp: boolean;
/** 微信小程序 */
declare const isMpWeixin: boolean;
/** 支付宝小程序 */
declare const isMpAlipay: boolean;
/** 百度小程序 */
declare const isMpBaidu: boolean;
/** 头条小程序 */
declare const isMpToutiao: boolean;
/** 飞书小程序 */
declare const isMpLark: boolean;
/** QQ小程序 */
declare const isMpQq: boolean;
/** 快手小程序 */
declare const isMpKuaishou: boolean;
/** 京东小程序 */
declare const isMpJd: boolean;
/** 360小程序 */
declare const isMp360: boolean;
/** 小红书小程序 */
declare const isMpXhs: boolean;
/** 鸿蒙元服务 */
declare const isMpHarmony: boolean;
/** 快应用 */
declare const isQuickappWebview: boolean;
/** 快应用联盟 */
declare const isQuickappWebviewUnion: boolean;
/** 快应用华为 */
declare const isQuickappWebviewHuawei: boolean;
/** 其他平台 */
declare const isOtherPlatform: boolean;

declare function isEmpty(value: unknown): boolean;

declare function defaultTo(value: any, ...defaultValues: any[]): any;

declare function sleep(timeout: number): Promise<void>;

declare function upperFirst(value: string): string;

declare function lowerFirst(value: string): string;




declare function getDeviceInfo(): UniApp.GetDeviceInfoResult | UniApp.GetSystemInfoResult;

declare function getWindowInfo(): UniApp.GetWindowInfoResult | UniApp.GetSystemInfoResult;

declare function getAppBaseInfo(): UniApp.GetAppBaseInfoResult | UniApp.GetSystemInfoResult;

declare function getVersion(): string;

declare function compareVersion(v1: string, v2: string): 0 | 1 | -1;

declare function canIUseCanvas2d(): boolean;

declare function querySelect(
  component: VueThis,
  selector: string,
  fields: UniApp.NodeField
): Promise<UniApp.NodeInfo>;

export { ECHARTS_KEY, INIT_OPTIONS_KEY, LOADING_OPTIONS_KEY, OPTION_KEY, Platform, THEME_KEY, UPDATE_OPTIONS_KEY, UniCanvas, UniImage, canIUseCanvas2d, compareVersion, defaultTo, getAppBaseInfo, getDeviceInfo, getEchartsOptionKey, getIsPc, getPlatform, getVersion, getWindowInfo, isApp, isAppAndroid, isAppHarmony, isAppIos, isEmpty, isMp, isMp360, isMpAlipay, isMpBaidu, isMpHarmony, isMpJd, isMpKuaishou, isMpLark, isMpQq, isMpToutiao, isMpWeixin, isMpXhs, isOtherPlatform, isQuickappWebview, isQuickappWebviewHuawei, isQuickappWebviewUnion, isWeb, lowerFirst, mitt, platform, provideEcharts, provideEchartsInitOptions, provideEchartsLoadingOptions, provideEchartsOption, provideEchartsTheme, provideEchartsUpdateOptions, querySelect, setupEchartsCanvas, sleep, upperFirst, useAutoresize, useEcharts, useEchartsInitOptions, useEchartsMouseWheel, useEchartsOption, useEchartsTheme, useEchartsTouch, useEchartsUpdateOptions, useLoading, usePublicApi, useUid, useVueThis };
export type { AutoResize, CanvasContext, CanvasNode, CanvasRect, ChartOption, ChartOptionInjection, ChartTheme, ChartThemeInjection, EChartsType, ElementEventName, Emitter, EventHandlerList, EventHandlerMap, EventType, GetTouchFuc, Handler, IPlatform, InitOptions, InitOptionsInjection, InitParameters, InitType, LoadingOptions, LoadingOptionsInjection, MinifyEcharts, MouseEmits, MouseEventName, NativeEmits, NativeEventName, NormalizedTouch, OtherEmits, OtherEventName, PublicApi, SetOptionType, UniEchartsEmits, UniEchartsInst, UniEchartsProps, UniEventName, UpdateOptions, UpdateOptionsInjection, VueThis, WildCardEventHandlerList, WildcardHandler, ZRenderEmits, ZRenderEventName, ZRenderHandler, ZRenderType };