@visactor/vchart 1.12.0-alpha.0 → 1.12.0-alpha.4

package/esm/core/interface.d.ts

@@ -14,6 +14,7 @@ import type { IChart, IChartSpecInfo } from '../chart/interface';
 import type { Stage } from '@visactor/vrender-core';
 import type { IContainerSize } from '@visactor/vrender-components';
 import type { IBaseScale } from '@visactor/vscale';
+import type { IUpdateSpecResult } from '../model/interface';
 export type DataLinkSeries = {
     seriesId?: StringOrNumber;
     seriesIndex?: number;
@@ -38,8 +39,8 @@ export interface IVChart {
     }[]) => Promise<IVChart>;
     updateDataSync: (id: StringOrNumber, data: Datum[], options?: IParserOptions) => IVChart;
     updateFullDataSync: (data: IDataValues | IDataValues[], reRender?: boolean) => IVChart;
-    updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig, resetMediaQuery?: boolean) => Promise<IVChart>;
-    updateSpecSync: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig, resetMediaQuery?: boolean) => void;
+    updateSpec: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig, userUpdateOptions?: IUpdateSpecResult) => Promise<IVChart>;
+    updateSpecSync: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig, userUpdateOptions?: IUpdateSpecResult) => void;
     updateModelSpecSync: (filter: string | {
         type: string;
         index: number;

package/esm/core/interface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/core/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type { DataSet } from '@visactor/vdataset';\n\nimport type { IParserOptions } from '@visactor/vdataset';\nimport type {\n  Datum,\n  IDataValues,\n  IInitOption,\n  IMarkStateSpec,\n  IPoint,\n  IRegionQuerier,\n  IShowTooltipOption,\n  ISpec,\n  ITooltipHandler,\n  Maybe,\n  MaybeArray,\n  StringOrNumber\n} from '../typings';\nimport type { IMorphConfig } from '../animation/spec';\nimport type { IBoundsLike } from '@visactor/vutils';\nimport type { EventCallback, EventParams, EventQuery, EventType } from '../event/interface';\nimport type { IMark } from '../mark/interface';\nimport type { ISeries } from '../series/interface/series';\nimport type { ITheme } from '../theme';\nimport type { IComponent } from '../component/interface';\nimport type { LayoutCallBack } from '../layout/interface';\nimport type { Compiler } from '../compile/compiler';\nimport type { IChart, IChartSpecInfo } from '../chart/interface';\nimport type { Stage } from '@visactor/vrender-core';\nimport type { IContainerSize } from '@visactor/vrender-components';\nimport type { IBaseScale } from '@visactor/vscale';\n\nexport type DataLinkSeries = {\n  /**\n   * 关联的系列 id\n   * the binding series id\n   */\n  seriesId?: StringOrNumber;\n  /**\n   * 关联的系列索引\n   * the binding series index\n   */\n  seriesIndex?: number;\n};\n\nexport type DataLinkAxis = {\n  /**\n   * 关联的轴 id，目前仅支持直角坐标轴\n   * the binding axis id\n   */\n  axisId?: StringOrNumber;\n  /**\n   * 关联的轴索引，目前仅支持直角坐标轴\n   * the binding axis index\n   */\n  axisIndex?: number;\n};\n\nexport interface IVChartConstructor {\n  new (spec: ISpec, options: IInitOption): IVChart;\n  useRegisters: (comps: (() => void)[]) => any;\n}\n\nexport interface IVChart {\n  readonly id: number;\n\n  /**\n   * **同步**渲染图表。\n   * @param morphConfig 图表 morph 动画配置，可选\n   * @returns VChart 实例\n   */\n  renderSync: (morphConfig?: IMorphConfig, resetMediaQuery?: boolean) => IVChart;\n\n  /**\n   * **异步**渲染图表。\n   * @async\n   * @param morphConfig 图表 morph 动画配置，可选\n   * @returns VChart 实例\n   */\n  renderAsync: (morphConfig?: IMorphConfig, resetMediaQuery?: boolean) => Promise<IVChart>;\n\n  /**\n   * **异步**更新数据。\n   * @param id 数据 id\n   * @param data 数据值\n   * @param options 数据参数\n   * @returns VChart 实例\n   */\n  updateData: (id: StringOrNumber, data: Datum[] | string, options?: IParserOptions) => Promise<IVChart>;\n\n  /**\n   * **异步**批量更新数据。\n   * @param list 待更新的数据列表\n   * @returns VChart 实例\n   */\n  updateDataInBatches: (list: { id: string; data: Datum[]; options?: IParserOptions }[]) => Promise<IVChart>;\n\n  /**\n   * **同步**更新数据。\n   * @param id 数据 id\n   * @param data 数据值\n   * @param options 数据参数\n   * @returns VChart 实例\n   */\n  updateDataSync: (id: StringOrNumber, data: Datum[], options?: IParserOptions) => IVChart;\n\n  /**\n   * **同步方法** 更新数据\n   * @param data 图表配置结构中的数据对象\n   * @returns VChart 实例\n   */\n  updateFullDataSync: (data: IDataValues | IDataValues[], reRender?: boolean) => IVChart;\n  /**\n   * **异步**spec 更新。\n   * @param spec\n   * @param forceMerge\n   * @returns\n   */\n  updateSpec: (\n    spec: ISpec,\n    forceMerge?: boolean,\n    morphConfig?: IMorphConfig,\n    resetMediaQuery?: boolean\n  ) => Promise<IVChart>;\n\n  /**\n   * **同步方法**spec 更新。\n   * @param spec\n   * @param forceMerge\n   * @returns\n   */\n  updateSpecSync: (spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig, resetMediaQuery?: boolean) => void;\n\n  /**\n   * **同步方法** 模块 spec 更新\n   * @param filter\n   * @param spec\n   * @param forceMerge\n   * @returns\n   * @sync 1.4.0\n   */\n  updateModelSpecSync: (\n    filter: string | { type: string; index: number },\n    spec: unknown,\n    forceMerge?: boolean,\n    morphConfig?: IMorphConfig\n  ) => IVChart;\n\n  /**\n   * **异步方法** 模块 spec 更新\n   * @param filter\n   * @param spec\n   * @param forceMerge\n   * @returns\n   * @sync 1.4.0\n   */\n  updateModelSpec: (\n    filter: string | { type: string; index: number },\n    spec: unknown,\n    forceMerge?: boolean,\n    morphConfig?: IMorphConfig\n  ) => Promise<IVChart>;\n\n  /** 更新 spec 并重新编译（不渲染），返回是否成功 */\n  updateSpecAndRecompile: (spec: ISpec, forceMerge: boolean, option: IVChartRenderOption) => boolean;\n\n  /**\n   * 更新绘制区域。\n   * @param viewBox 绘制区域\n   * @param reRender 是否重新渲染，默认为 true\n   * @returns\n   */\n  updateViewBox: (viewBox: IBoundsLike, reRender?: boolean) => IVChart;\n\n  /**\n   * **异步方法**，图表尺寸更新方法。\n   * @param width 宽度\n   * @param height 高度\n   * @returns VChart 当前实例\n   */\n  resize: (width: number, height: number) => Promise<IVChart>;\n\n  /**\n   * 销毁图表。\n   */\n  release: () => void;\n\n  /**\n   * 事件监听\n   */\n  on: ((eType: EventType, handler: EventCallback<EventParams>) => void) &\n    ((eType: EventType, query: EventQuery, handler: EventCallback<EventParams>) => void);\n  off: (eType: EventType, handler?: EventCallback<EventParams>) => void;\n\n  /**\n   * 更新或设置图元状态。\n   * @param state 状态筛选器\n   * @param filter 筛选器\n   */\n  updateState: (\n    state: Record<string, Omit<IMarkStateSpec<unknown>, 'style'>>,\n    filter?: (series: ISeries, mark: IMark, stateKey: string) => boolean //series + mark 筛选\n  ) => void;\n\n  /**\n   * 更新图元选中状态。\n   * @param datum hover 图元数据\n   * @param filter 筛选器 用来筛选系列与mark\n   * @param region region 筛选器\n   */\n  setSelected: (\n    datum: MaybeArray<any> | null,\n    filter?: (series: ISeries, mark: IMark) => boolean,\n    region?: IRegionQuerier\n  ) => void;\n\n  /**\n   * 更新图元 hover 状态\n   * @param datum hover 图元数据\n   * @param filter 筛选器 用来筛选系列与mark\n   * @param region region 筛选器\n   */\n  setHovered: (\n    datum: MaybeArray<Datum> | null,\n    filter?: (series: ISeries, mark: IMark) => boolean,\n    region?: IRegionQuerier\n  ) => void;\n\n  /**\n   * 清除所有图元的状态\n   * @param state 状态名\n   *\n   * @since 1.11.0\n   */\n  clearState: (state: string) => void;\n\n  /**\n   * 清除所有图元的选中状态\n   *\n   * @since 1.11.0\n   */\n  clearSelected: () => void;\n\n  /**\n   * 清除所有图元的hover状态\n   *\n   * @since 1.11.0\n   */\n  clearHovered: () => void;\n\n  /**\n   * 获取当前主题，会返回完整的主题配置（只能获取用户通过`setCurrentTheme`方法设置过的主题，默认值为`ThemeManager`统一设置的主题）\n   * */\n  getCurrentTheme: () => ITheme;\n\n  /**\n   * 获取当前主题名称（只能获取用户通过`setCurrentTheme`方法设置过的主题，默认值为`ThemeManager`统一设置的主题）\n   */\n  getCurrentThemeName: () => string;\n\n  /**\n   * **异步方法**， 设置当前主题。\n   * @param name 主题名称\n   * @returns\n   */\n  setCurrentTheme: (name: string) => Promise<IVChart>;\n\n  /**\n   * 自定义 TooltipHandler。\n   * @param tooltipHandler\n   */\n  setTooltipHandler: (tooltipHandler: ITooltipHandler) => void;\n\n  /**\n   * 获取用户定义的 TooltipHandler\n   * @returns ITooltipHandler\n   */\n  getTooltipHandlerByUser: () => ITooltipHandler | undefined;\n\n  /**\n   * 获取 TooltipHandler\n   * @returns\n   */\n  getTooltipHandler: () => ITooltipHandler | undefined;\n\n  /**\n   * 手动调用展示 tooltip\n   * @param datum 原始数据\n   * @param options\n   * @returns\n   */\n  showTooltip: (datum: Datum, options: IShowTooltipOption) => boolean;\n\n  /**\n   * 手动调用，关闭 tooltip\n   * @returns\n   */\n  hideTooltip: () => boolean;\n\n  // 图例相关 api\n  /**\n   * 根据图例组件 id 获取图例数据\n   * @param id 组件 id\n   * @returns\n   */\n  getLegendDataById: (id: string) => Datum[];\n\n  /**\n   * 根据图例组件索引获取图例数据\n   * @param index 图例索引，默认为 0\n   * @returns\n   */\n  getLegendDataByIndex: (index?: number) => Datum[];\n\n  /**\n   * 根据图例组件 id 获取当前图例的选中项\n   * @param id 组件 id\n   * @returns\n   */\n  getLegendSelectedDataById: (id: string) => StringOrNumber[];\n\n  /**\n   * 根据图例组件索引获取当前图例的选中项\n   * @param index 图例索引，默认为 0\n   * @returns\n   */\n  getLegendSelectedDataByIndex: (index?: number) => StringOrNumber[];\n\n  /**\n   * 根据图例组件 id 更新图例选中数据\n   * @param id\n   * @returns\n   */\n  setLegendSelectedDataById: (id: string, selectedData: StringOrNumber[]) => void;\n\n  /**\n   * 根据图例组件索引更新图例选中数据\n   * @param index 图例索引，默认为 0\n   * @returns\n   */\n  setLegendSelectedDataByIndex: (index: number, selectedData: StringOrNumber[]) => void;\n\n  /**\n   * **异步方法**返回一个包含图片展示的 data URI。\n   * @returns data URI\n   */\n  getDataURL: () => Promise<any>;\n\n  /**\n   * **异步方法** 导出图表图片，只支持浏览器端。\n   * @param name 保存的图片名称\n   * @returns\n   */\n  exportImg: (name?: string) => Promise<void>;\n\n  /**\n   * 导出绘制了图表内容的 canvas\n   * @returns HTMLCanvasElement\n   * @since 1.5.2\n   */\n  exportCanvas: () => HTMLCanvasElement | undefined;\n\n  /**\n   * 目前仅支持 node 环境，用于 node 端的图片导出\n   * @returns\n   */\n  getImageBuffer: () => void;\n  /**\n   * 设置自定义布局\n   */\n  setLayout: (layout: LayoutCallBack) => void;\n  /**\n   * 强制重新布局\n   */\n  reLayout: () => void;\n\n  /**\n   * 获取编译器实例\n   * @returns\n   */\n  getCompiler: () => Compiler;\n\n  /**\n   * Get the chart instance\n   * 获取 Chart 图表实例。\n   * @returns Chart 实例\n   */\n  getChart: () => Maybe<IChart>;\n\n  /**\n   * Get the renderer instance.\n   * 获取渲染引擎实例。\n   * @returns the instance of VRender Stage\n   */\n  getStage: () => Stage;\n\n  /**\n   * 获取 canvas dom\n   * @returns HTMLCanvasElement | undefined\n   */\n  getCanvas: () => HTMLCanvasElement | undefined;\n\n  /**\n   * 获取图表的 dom 容器\n   * @returns\n   */\n  getContainer: () => Maybe<HTMLElement>;\n\n  /**\n   * 获取图表所有的组件实例\n   * @returns 组件实例\n   */\n  getComponents: () => IComponent[];\n\n  /**\n   * 获取图表的 DataSet 实例\n   * @returns DataSet 实例\n   */\n  getDataSet: () => Maybe<DataSet>;\n\n  /**\n   * 获取图表的 Scale 实例\n   * @param scaleId scale 的id\n   * @returns Scale 实例\n   * @since 1.10.4\n   */\n  getScale: (scaleId: string) => IBaseScale | null;\n\n  // 数据转换相关的 api\n  /**\n   * Convert the data to coordinate position\n   * @param datum the datum to convert\n   * @param dataLinkInfo the data link info, could be seriesId or seriesIndex, default is { seriesIndex: 0 }\n   * @param isRelativeToCanvas 是否相对画布坐标，默认为 false Whether relative to canvas coordinates, default is false\n   * @param checkInViewData 是否检查数据对应的图元是否在视图中，如果不在视图中，返回 null\n   * @returns\n   */\n  convertDatumToPosition: (\n    datum: Datum,\n    dataLinkInfo?: DataLinkSeries,\n    isRelativeToCanvas?: boolean,\n    checkInViewData?: boolean\n  ) => IPoint | null;\n\n  /**\n   * Convert the value to coordinate position\n   * @param value number | [number, number], the value to convert\n   * @param dataLinkInfo the data link info, could be seriesId,seriesIndex,axisId,axisIndex\n   * @param isRelativeToCanvas 是否相对画布坐标，默认为 false Whether relative to canvas coordinates, default is false\n   * returns\n   */\n  convertValueToPosition: ((\n    value: StringOrNumber,\n    dataLinkInfo: DataLinkAxis,\n    isRelativeToCanvas?: boolean\n  ) => number | null) &\n    ((\n      value: [StringOrNumber, StringOrNumber],\n      dataLinkInfo: DataLinkSeries,\n      isRelativeToCanvas?: boolean\n    ) => IPoint | null);\n\n  /** 停止正在进行的所有动画 */\n  stopAnimation: () => void;\n\n  /** 暂停正在进行的所有动画 */\n  pauseAnimation: () => void;\n\n  /** 恢复暂停时正在进行的所有动画 */\n  resumeAnimation: () => void;\n\n  /** 注册实例函数 */\n  registerFunction: (key: string, fun: Function) => void;\n\n  /** 注销实例函数 */\n  unregisterFunction: (key: string) => void;\n\n  /** 获取实例函数 */\n  getFunction: (key: string) => Function | null;\n\n  /** 获取实例函数列表 */\n  getFunctionList: () => string[] | null;\n\n  /** 获取图表 spec 详细信息 */\n  getSpecInfo: () => IChartSpecInfo;\n\n  /** 设置运行时 spec */\n  setRuntimeSpec: (spec: any) => void;\n\n  /** 获取运行时 spec */\n  getSpec: () => any;\n\n  /** 获取当前容器宽高 */\n  getCurrentSize: () => IContainerSize;\n}\n\nexport interface IGlobalConfig {\n  /** 是否全局显示唯一 tooltip */\n  uniqueTooltip?: boolean;\n  /** 是否监测图表 dom 变化自动 release */\n  // TODO\n  // autoRelease?: boolean;\n}\n\nexport interface IVChartRenderOption {\n  /** morphing 动画 spec */\n  morphConfig?: IMorphConfig;\n  /** 是否重新转换图表 spec */\n  transformSpec?: boolean;\n  actionSource?: VChartRenderActionSource;\n}\n\nexport type VChartRenderActionSource =\n  | 'render'\n  | 'updateSpec'\n  | 'updateModelSpec'\n  | 'setCurrentTheme'\n  | 'updateSpecAndRecompile';\n"]}
+{"version":3,"sources":["../src/core/interface.ts"],"names":[],"mappings":"","file":"interface.js","sourcesContent":["import type { DataSet } from '@visactor/vdataset';\n\nimport type { IParserOptions } from '@visactor/vdataset';\nimport type {\n  Datum,\n  IDataValues,\n  IInitOption,\n  IMarkStateSpec,\n  IPoint,\n  IRegionQuerier,\n  IShowTooltipOption,\n  ISpec,\n  ITooltipHandler,\n  Maybe,\n  MaybeArray,\n  StringOrNumber\n} from '../typings';\nimport type { IMorphConfig } from '../animation/spec';\nimport type { IBoundsLike } from '@visactor/vutils';\nimport type { EventCallback, EventParams, EventQuery, EventType } from '../event/interface';\nimport type { IMark } from '../mark/interface';\nimport type { ISeries } from '../series/interface/series';\nimport type { ITheme } from '../theme';\nimport type { IComponent } from '../component/interface';\nimport type { LayoutCallBack } from '../layout/interface';\nimport type { Compiler } from '../compile/compiler';\nimport type { IChart, IChartSpecInfo } from '../chart/interface';\nimport type { Stage } from '@visactor/vrender-core';\nimport type { IContainerSize } from '@visactor/vrender-components';\nimport type { IBaseScale } from '@visactor/vscale';\nimport type { IUpdateSpecResult } from '../model/interface';\n\nexport type DataLinkSeries = {\n  /**\n   * 关联的系列 id\n   * the binding series id\n   */\n  seriesId?: StringOrNumber;\n  /**\n   * 关联的系列索引\n   * the binding series index\n   */\n  seriesIndex?: number;\n};\n\nexport type DataLinkAxis = {\n  /**\n   * 关联的轴 id，目前仅支持直角坐标轴\n   * the binding axis id\n   */\n  axisId?: StringOrNumber;\n  /**\n   * 关联的轴索引，目前仅支持直角坐标轴\n   * the binding axis index\n   */\n  axisIndex?: number;\n};\n\nexport interface IVChartConstructor {\n  new (spec: ISpec, options: IInitOption): IVChart;\n  useRegisters: (comps: (() => void)[]) => any;\n}\n\nexport interface IVChart {\n  readonly id: number;\n\n  /**\n   * **同步**渲染图表。\n   * @param morphConfig 图表 morph 动画配置，可选\n   * @returns VChart 实例\n   */\n  renderSync: (morphConfig?: IMorphConfig, resetMediaQuery?: boolean) => IVChart;\n\n  /**\n   * **异步**渲染图表。\n   * @async\n   * @param morphConfig 图表 morph 动画配置，可选\n   * @returns VChart 实例\n   */\n  renderAsync: (morphConfig?: IMorphConfig, resetMediaQuery?: boolean) => Promise<IVChart>;\n\n  /**\n   * **异步**更新数据。\n   * @param id 数据 id\n   * @param data 数据值\n   * @param options 数据参数\n   * @returns VChart 实例\n   */\n  updateData: (id: StringOrNumber, data: Datum[] | string, options?: IParserOptions) => Promise<IVChart>;\n\n  /**\n   * **异步**批量更新数据。\n   * @param list 待更新的数据列表\n   * @returns VChart 实例\n   */\n  updateDataInBatches: (list: { id: string; data: Datum[]; options?: IParserOptions }[]) => Promise<IVChart>;\n\n  /**\n   * **同步**更新数据。\n   * @param id 数据 id\n   * @param data 数据值\n   * @param options 数据参数\n   * @returns VChart 实例\n   */\n  updateDataSync: (id: StringOrNumber, data: Datum[], options?: IParserOptions) => IVChart;\n\n  /**\n   * **同步方法** 更新数据\n   * @param data 图表配置结构中的数据对象\n   * @returns VChart 实例\n   */\n  updateFullDataSync: (data: IDataValues | IDataValues[], reRender?: boolean) => IVChart;\n  /**\n   * **异步**spec 更新。\n   * @param spec\n   * @param forceMerge\n   * @returns\n   */\n  updateSpec: (\n    spec: ISpec,\n    forceMerge?: boolean,\n    morphConfig?: IMorphConfig,\n    userUpdateOptions?: IUpdateSpecResult\n  ) => Promise<IVChart>;\n\n  /**\n   * **同步方法**spec 更新。\n   * @param spec\n   * @param forceMerge\n   * @returns\n   */\n  updateSpecSync: (\n    spec: ISpec,\n    forceMerge?: boolean,\n    morphConfig?: IMorphConfig,\n    userUpdateOptions?: IUpdateSpecResult\n  ) => void;\n\n  /**\n   * **同步方法** 模块 spec 更新\n   * @param filter\n   * @param spec\n   * @param forceMerge\n   * @returns\n   * @sync 1.4.0\n   */\n  updateModelSpecSync: (\n    filter: string | { type: string; index: number },\n    spec: unknown,\n    forceMerge?: boolean,\n    morphConfig?: IMorphConfig\n  ) => IVChart;\n\n  /**\n   * **异步方法** 模块 spec 更新\n   * @param filter\n   * @param spec\n   * @param forceMerge\n   * @returns\n   * @sync 1.4.0\n   */\n  updateModelSpec: (\n    filter: string | { type: string; index: number },\n    spec: unknown,\n    forceMerge?: boolean,\n    morphConfig?: IMorphConfig\n  ) => Promise<IVChart>;\n\n  /** 更新 spec 并重新编译（不渲染），返回是否成功 */\n  updateSpecAndRecompile: (spec: ISpec, forceMerge: boolean, option: IVChartRenderOption) => boolean;\n\n  /**\n   * 更新绘制区域。\n   * @param viewBox 绘制区域\n   * @param reRender 是否重新渲染，默认为 true\n   * @returns\n   */\n  updateViewBox: (viewBox: IBoundsLike, reRender?: boolean) => IVChart;\n\n  /**\n   * **异步方法**，图表尺寸更新方法。\n   * @param width 宽度\n   * @param height 高度\n   * @returns VChart 当前实例\n   */\n  resize: (width: number, height: number) => Promise<IVChart>;\n\n  /**\n   * 销毁图表。\n   */\n  release: () => void;\n\n  /**\n   * 事件监听\n   */\n  on: ((eType: EventType, handler: EventCallback<EventParams>) => void) &\n    ((eType: EventType, query: EventQuery, handler: EventCallback<EventParams>) => void);\n  off: (eType: EventType, handler?: EventCallback<EventParams>) => void;\n\n  /**\n   * 更新或设置图元状态。\n   * @param state 状态筛选器\n   * @param filter 筛选器\n   */\n  updateState: (\n    state: Record<string, Omit<IMarkStateSpec<unknown>, 'style'>>,\n    filter?: (series: ISeries, mark: IMark, stateKey: string) => boolean //series + mark 筛选\n  ) => void;\n\n  /**\n   * 更新图元选中状态。\n   * @param datum hover 图元数据\n   * @param filter 筛选器 用来筛选系列与mark\n   * @param region region 筛选器\n   */\n  setSelected: (\n    datum: MaybeArray<any> | null,\n    filter?: (series: ISeries, mark: IMark) => boolean,\n    region?: IRegionQuerier\n  ) => void;\n\n  /**\n   * 更新图元 hover 状态\n   * @param datum hover 图元数据\n   * @param filter 筛选器 用来筛选系列与mark\n   * @param region region 筛选器\n   */\n  setHovered: (\n    datum: MaybeArray<Datum> | null,\n    filter?: (series: ISeries, mark: IMark) => boolean,\n    region?: IRegionQuerier\n  ) => void;\n\n  /**\n   * 清除所有图元的状态\n   * @param state 状态名\n   *\n   * @since 1.11.0\n   */\n  clearState: (state: string) => void;\n\n  /**\n   * 清除所有图元的选中状态\n   *\n   * @since 1.11.0\n   */\n  clearSelected: () => void;\n\n  /**\n   * 清除所有图元的hover状态\n   *\n   * @since 1.11.0\n   */\n  clearHovered: () => void;\n\n  /**\n   * 获取当前主题，会返回完整的主题配置（只能获取用户通过`setCurrentTheme`方法设置过的主题，默认值为`ThemeManager`统一设置的主题）\n   * */\n  getCurrentTheme: () => ITheme;\n\n  /**\n   * 获取当前主题名称（只能获取用户通过`setCurrentTheme`方法设置过的主题，默认值为`ThemeManager`统一设置的主题）\n   */\n  getCurrentThemeName: () => string;\n\n  /**\n   * **异步方法**， 设置当前主题。\n   * @param name 主题名称\n   * @returns\n   */\n  setCurrentTheme: (name: string) => Promise<IVChart>;\n\n  /**\n   * 自定义 TooltipHandler。\n   * @param tooltipHandler\n   */\n  setTooltipHandler: (tooltipHandler: ITooltipHandler) => void;\n\n  /**\n   * 获取用户定义的 TooltipHandler\n   * @returns ITooltipHandler\n   */\n  getTooltipHandlerByUser: () => ITooltipHandler | undefined;\n\n  /**\n   * 获取 TooltipHandler\n   * @returns\n   */\n  getTooltipHandler: () => ITooltipHandler | undefined;\n\n  /**\n   * 手动调用展示 tooltip\n   * @param datum 原始数据\n   * @param options\n   * @returns\n   */\n  showTooltip: (datum: Datum, options: IShowTooltipOption) => boolean;\n\n  /**\n   * 手动调用，关闭 tooltip\n   * @returns\n   */\n  hideTooltip: () => boolean;\n\n  // 图例相关 api\n  /**\n   * 根据图例组件 id 获取图例数据\n   * @param id 组件 id\n   * @returns\n   */\n  getLegendDataById: (id: string) => Datum[];\n\n  /**\n   * 根据图例组件索引获取图例数据\n   * @param index 图例索引，默认为 0\n   * @returns\n   */\n  getLegendDataByIndex: (index?: number) => Datum[];\n\n  /**\n   * 根据图例组件 id 获取当前图例的选中项\n   * @param id 组件 id\n   * @returns\n   */\n  getLegendSelectedDataById: (id: string) => StringOrNumber[];\n\n  /**\n   * 根据图例组件索引获取当前图例的选中项\n   * @param index 图例索引，默认为 0\n   * @returns\n   */\n  getLegendSelectedDataByIndex: (index?: number) => StringOrNumber[];\n\n  /**\n   * 根据图例组件 id 更新图例选中数据\n   * @param id\n   * @returns\n   */\n  setLegendSelectedDataById: (id: string, selectedData: StringOrNumber[]) => void;\n\n  /**\n   * 根据图例组件索引更新图例选中数据\n   * @param index 图例索引，默认为 0\n   * @returns\n   */\n  setLegendSelectedDataByIndex: (index: number, selectedData: StringOrNumber[]) => void;\n\n  /**\n   * **异步方法**返回一个包含图片展示的 data URI。\n   * @returns data URI\n   */\n  getDataURL: () => Promise<any>;\n\n  /**\n   * **异步方法** 导出图表图片，只支持浏览器端。\n   * @param name 保存的图片名称\n   * @returns\n   */\n  exportImg: (name?: string) => Promise<void>;\n\n  /**\n   * 导出绘制了图表内容的 canvas\n   * @returns HTMLCanvasElement\n   * @since 1.5.2\n   */\n  exportCanvas: () => HTMLCanvasElement | undefined;\n\n  /**\n   * 目前仅支持 node 环境，用于 node 端的图片导出\n   * @returns\n   */\n  getImageBuffer: () => void;\n  /**\n   * 设置自定义布局\n   */\n  setLayout: (layout: LayoutCallBack) => void;\n  /**\n   * 强制重新布局\n   */\n  reLayout: () => void;\n\n  /**\n   * 获取编译器实例\n   * @returns\n   */\n  getCompiler: () => Compiler;\n\n  /**\n   * Get the chart instance\n   * 获取 Chart 图表实例。\n   * @returns Chart 实例\n   */\n  getChart: () => Maybe<IChart>;\n\n  /**\n   * Get the renderer instance.\n   * 获取渲染引擎实例。\n   * @returns the instance of VRender Stage\n   */\n  getStage: () => Stage;\n\n  /**\n   * 获取 canvas dom\n   * @returns HTMLCanvasElement | undefined\n   */\n  getCanvas: () => HTMLCanvasElement | undefined;\n\n  /**\n   * 获取图表的 dom 容器\n   * @returns\n   */\n  getContainer: () => Maybe<HTMLElement>;\n\n  /**\n   * 获取图表所有的组件实例\n   * @returns 组件实例\n   */\n  getComponents: () => IComponent[];\n\n  /**\n   * 获取图表的 DataSet 实例\n   * @returns DataSet 实例\n   */\n  getDataSet: () => Maybe<DataSet>;\n\n  /**\n   * 获取图表的 Scale 实例\n   * @param scaleId scale 的id\n   * @returns Scale 实例\n   * @since 1.10.4\n   */\n  getScale: (scaleId: string) => IBaseScale | null;\n\n  // 数据转换相关的 api\n  /**\n   * Convert the data to coordinate position\n   * @param datum the datum to convert\n   * @param dataLinkInfo the data link info, could be seriesId or seriesIndex, default is { seriesIndex: 0 }\n   * @param isRelativeToCanvas 是否相对画布坐标，默认为 false Whether relative to canvas coordinates, default is false\n   * @param checkInViewData 是否检查数据对应的图元是否在视图中，如果不在视图中，返回 null\n   * @returns\n   */\n  convertDatumToPosition: (\n    datum: Datum,\n    dataLinkInfo?: DataLinkSeries,\n    isRelativeToCanvas?: boolean,\n    checkInViewData?: boolean\n  ) => IPoint | null;\n\n  /**\n   * Convert the value to coordinate position\n   * @param value number | [number, number], the value to convert\n   * @param dataLinkInfo the data link info, could be seriesId,seriesIndex,axisId,axisIndex\n   * @param isRelativeToCanvas 是否相对画布坐标，默认为 false Whether relative to canvas coordinates, default is false\n   * returns\n   */\n  convertValueToPosition: ((\n    value: StringOrNumber,\n    dataLinkInfo: DataLinkAxis,\n    isRelativeToCanvas?: boolean\n  ) => number | null) &\n    ((\n      value: [StringOrNumber, StringOrNumber],\n      dataLinkInfo: DataLinkSeries,\n      isRelativeToCanvas?: boolean\n    ) => IPoint | null);\n\n  /** 停止正在进行的所有动画 */\n  stopAnimation: () => void;\n\n  /** 暂停正在进行的所有动画 */\n  pauseAnimation: () => void;\n\n  /** 恢复暂停时正在进行的所有动画 */\n  resumeAnimation: () => void;\n\n  /** 注册实例函数 */\n  registerFunction: (key: string, fun: Function) => void;\n\n  /** 注销实例函数 */\n  unregisterFunction: (key: string) => void;\n\n  /** 获取实例函数 */\n  getFunction: (key: string) => Function | null;\n\n  /** 获取实例函数列表 */\n  getFunctionList: () => string[] | null;\n\n  /** 获取图表 spec 详细信息 */\n  getSpecInfo: () => IChartSpecInfo;\n\n  /** 设置运行时 spec */\n  setRuntimeSpec: (spec: any) => void;\n\n  /** 获取运行时 spec */\n  getSpec: () => any;\n\n  /** 获取当前容器宽高 */\n  getCurrentSize: () => IContainerSize;\n}\n\nexport interface IGlobalConfig {\n  /** 是否全局显示唯一 tooltip */\n  uniqueTooltip?: boolean;\n  /** 是否监测图表 dom 变化自动 release */\n  // TODO\n  // autoRelease?: boolean;\n}\n\nexport interface IVChartRenderOption {\n  /** morphing 动画 spec */\n  morphConfig?: IMorphConfig;\n  /** 是否重新转换图表 spec */\n  transformSpec?: boolean;\n  actionSource?: VChartRenderActionSource;\n}\n\nexport type VChartRenderActionSource =\n  | 'render'\n  | 'updateSpec'\n  | 'updateModelSpec'\n  | 'setCurrentTheme'\n  | 'updateSpecAndRecompile';\n"]}

package/esm/core/vchart.d.ts

@@ -17,7 +17,7 @@ import type { Datum, IPoint, IRegionQuerier, IShowTooltipOption, ISpec, Maybe, M
 import type { IBoundsLike, ILogger } from '@visactor/vutils';
 import { ThemeManager } from '../theme/theme-manager';
 import type { ITheme } from '../theme';
-import type { IModel, IUpdateSpecResult } from '../model/interface';
+import type { IModel, IUpdateDataResult, IUpdateSpecResult } from '../model/interface';
 import { Compiler } from '../compile/compiler';
 import type { IMorphConfig } from '../animation/spec';
 import type { DataLinkAxis, DataLinkSeries, IGlobalConfig, IVChart, IVChartRenderOption } from './interface';
@@ -102,18 +102,18 @@ export declare class VChart implements IVChart {
     protected _renderAsync(option?: IVChartRenderOption): Promise<IVChart>;
     private _updateAnimateState;
     release(): void;
-    updateData(id: StringOrNumber, data: DataView | Datum[] | string, options?: IParserOptions): Promise<IVChart>;
+    updateData(id: StringOrNumber, data: DataView | Datum[] | string, parserOptions?: IParserOptions, userUpdateOptions?: IUpdateDataResult): Promise<IVChart>;
     private _updateDataById;
     updateDataInBatches(list: {
         id: string;
         data: Datum[];
         options?: IParserOptions;
     }[]): Promise<IVChart>;
-    updateDataSync(id: StringOrNumber, data: DataView | Datum[] | string, options?: IParserOptions): IVChart;
-    updateFullDataSync(data: IDataValues | IDataValues[], reRender?: boolean): IVChart;
+    updateDataSync(id: StringOrNumber, data: DataView | Datum[] | string, parserOptions?: IParserOptions, userUpdateOptions?: IUpdateDataResult): IVChart;
+    updateFullDataSync(data: IDataValues | IDataValues[], reRender?: boolean, userUpdateOptions?: IUpdateSpecResult): IVChart;
     updateFullData(data: IDataValues | IDataValues[], reRender?: boolean): Promise<IVChart>;
-    updateSpec(spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig): Promise<IVChart>;
-    updateSpecSync(spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig): IVChart;
+    updateSpec(spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig, userUpdateOptions?: IUpdateSpecResult): Promise<IVChart>;
+    updateSpecSync(spec: ISpec, forceMerge?: boolean, morphConfig?: IMorphConfig, userUpdateOptions?: IUpdateSpecResult): IVChart;
     updateSpecAndRecompile(spec: ISpec, forceMerge?: boolean, option?: IVChartRenderOption): boolean;
     private _updateSpec;
     updateModelSpec(filter: string | {
@@ -184,6 +184,8 @@ export declare class VChart implements IVChart {
     unregisterFunction(key: string): void;
     getFunctionList(): string[];
     setRuntimeSpec(spec: any): void;
+    updateIndicatorDataById(id: string, datum?: Datum): void;
+    updateIndicatorDataByIndex(index?: number, datum?: Datum): void;
     private _initChartPlugin;
     private _chartPluginApply;
     protected _getMode(): (typeof RenderModeEnum)["desktop-browser"] | "desktop-browser" | "mobile-browser" | "node" | "worker" | "miniApp" | "wx" | "tt" | "harmony" | "desktop-miniApp" | "lynx";

package/esm/core/vchart.js

@@ -82,7 +82,7 @@ import { getCanvasDataURL, URLToImage } from "../util/image";
 
 import { ChartEvent, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, VGRAMMAR_HOOK_EVENT } from "../constant";
 
-import { isArray, isEmpty, Logger, merge as mergeOrigin, isFunction, LoggerLevel, isEqual, get, cloneDeep } from "@visactor/vutils";
+import { isArray, isEmpty, Logger, merge as mergeOrigin, isFunction, LoggerLevel, isEqual, get, cloneDeep, isObject } from "@visactor/vutils";
 
 import { InstanceManager } from "./instance-manager";
 
@@ -314,6 +314,7 @@ export class VChart {
     }
     updateCustomConfigAndRerender(updateSpecResult, sync, option = {}) {
         if (!this._isReleased && updateSpecResult) return isFunction(updateSpecResult) && (updateSpecResult = updateSpecResult()), 
+        updateSpecResult.reAnimate && (this.stopAnimation(), this._updateAnimateState(!0)), 
         this._reCompile(updateSpecResult), sync ? this._renderSync(option) : this._renderAsync(option);
     }
     _updateCustomConfigAndRecompile(updateSpecResult, option = {}) {
@@ -388,15 +389,18 @@ export class VChart {
             return this._renderSync(option);
         }));
     }
-    _updateAnimateState() {
+    _updateAnimateState(initial) {
         var _a, _b;
-        this._option.animation && (null === (_a = this._chart) || void 0 === _a || _a.getAllRegions().forEach((region => {
-            var _a;
-            null === (_a = region.animate) || void 0 === _a || _a.updateAnimateState(AnimationStateEnum.update, !0);
-        })), null === (_b = this._chart) || void 0 === _b || _b.getAllComponents().forEach((component => {
-            var _a;
-            null === (_a = component.animate) || void 0 === _a || _a.updateAnimateState(AnimationStateEnum.update, !0);
-        })));
+        if (this._option.animation) {
+            const animationState = initial ? AnimationStateEnum.appear : AnimationStateEnum.update;
+            null === (_a = this._chart) || void 0 === _a || _a.getAllRegions().forEach((region => {
+                var _a;
+                null === (_a = region.animate) || void 0 === _a || _a.updateAnimateState(animationState, !0);
+            })), null === (_b = this._chart) || void 0 === _b || _b.getAllComponents().forEach((component => {
+                var _a;
+                null === (_a = component.animate) || void 0 === _a || _a.updateAnimateState(animationState, !0);
+            }));
+        }
     }
     release() {
         var _a, _b, _c, _d;
@@ -409,14 +413,14 @@ export class VChart {
         this._spec = null, this._specInfo = null, this._originalSpec = null, this._userEvents = null, 
         this._event = null, this._eventDispatcher = null, this._isReleased = !0, InstanceManager.unregisterInstance(this);
     }
-    updateData(id, data, options) {
+    updateData(id, data, parserOptions, userUpdateOptions) {
         return __awaiter(this, void 0, void 0, (function*() {
-            return this.updateDataSync(id, data, options);
+            return this.updateDataSync(id, data, parserOptions, userUpdateOptions);
         }));
     }
-    _updateDataById(id, data, options) {
+    _updateDataById(id, data, parserOptions) {
         const preDV = this._spec.data.find((dv => dv.name === id || dv.id === id));
-        preDV ? preDV.id === id ? preDV.values = data : preDV.name === id && preDV.parse(data, options) : isArray(data) ? this._spec.data.push({
+        preDV ? preDV.id === id ? preDV.values = data : preDV.name === id && preDV.parse(data, parserOptions) : isArray(data) ? this._spec.data.push({
             id: id,
             values: data
         }) : this._spec.data.push(data);
@@ -433,13 +437,15 @@ export class VChart {
             })), this);
         }));
     }
-    updateDataSync(id, data, options) {
-        return isNil(this._dataSet) ? this : this._chart ? (this._chart.updateData(id, data, !0, options), 
-        this._compiler.render(), this) : (this._spec.data = array(this._spec.data), this._updateDataById(id, data, options), 
+    updateDataSync(id, data, parserOptions, userUpdateOptions) {
+        return isNil(this._dataSet) ? this : this._chart ? ((null == userUpdateOptions ? void 0 : userUpdateOptions.reAnimate) && (this.stopAnimation(), 
+        this._updateAnimateState(!0)), this._chart.updateData(id, data, !0, parserOptions), 
+        this._compiler.render(), this) : (this._spec.data = array(this._spec.data), this._updateDataById(id, data, parserOptions), 
         this);
     }
-    updateFullDataSync(data, reRender = !0) {
-        if (this._chart) return this._chart.updateFullData(data), reRender && this._compiler.render(), 
+    updateFullDataSync(data, reRender = !0, userUpdateOptions) {
+        if (this._chart) return (null == userUpdateOptions ? void 0 : userUpdateOptions.reAnimate) && (this.stopAnimation(), 
+        this._updateAnimateState(!0)), this._chart.updateFullData(data), reRender && this._compiler.render(), 
         this;
         const prevData = array(this._spec.data);
         return array(data).forEach((d => {
@@ -459,9 +465,9 @@ export class VChart {
             return this.updateFullDataSync(data, reRender);
         }));
     }
-    updateSpec(spec, forceMerge = !1, morphConfig) {
+    updateSpec(spec, forceMerge = !1, morphConfig, userUpdateOptions) {
         return __awaiter(this, void 0, void 0, (function*() {
-            const result = this._updateSpec(spec, forceMerge);
+            const result = this._updateSpec(spec, forceMerge, userUpdateOptions);
             return result ? (yield this.updateCustomConfigAndRerender(result, !1, {
                 morphConfig: morphConfig,
                 transformSpec: result.reTransformSpec,
@@ -469,8 +475,8 @@ export class VChart {
             }), this) : this;
         }));
     }
-    updateSpecSync(spec, forceMerge = !1, morphConfig) {
-        const result = this._updateSpec(spec, forceMerge);
+    updateSpecSync(spec, forceMerge = !1, morphConfig, userUpdateOptions) {
+        const result = this._updateSpec(spec, forceMerge, userUpdateOptions);
         return result ? (this.updateCustomConfigAndRerender(result, !0, {
             morphConfig: morphConfig,
             transformSpec: result.reTransformSpec,
@@ -483,26 +489,29 @@ export class VChart {
             actionSource: "updateSpecAndRecompile"
         }, option));
     }
-    _updateSpec(spec, forceMerge = !1) {
+    _updateSpec(spec, forceMerge = !1, userUpdateOptions) {
         var _a, _b;
         const lastSpec = this._spec;
         if (!this._setNewSpec(spec, forceMerge)) return;
         isEqual(lastSpec.theme, this._spec.theme) || this._setCurrentTheme();
         const reSize = this._shouldChartResize(lastSpec);
-        return null === (_b = null === (_a = this._compiler) || void 0 === _a ? void 0 : _a.getVGrammarView()) || void 0 === _b || _b.updateLayoutTag(), 
-        this._spec.type !== lastSpec.type ? {
+        if (null === (_b = null === (_a = this._compiler) || void 0 === _a ? void 0 : _a.getVGrammarView()) || void 0 === _b || _b.updateLayoutTag(), 
+        this._spec.type !== lastSpec.type) return {
             reTransformSpec: !0,
             change: !0,
             reMake: !0,
             reCompile: !1,
             reSize: reSize
-        } : (this._initChartSpec(this._spec, "render"), mergeUpdateResult(this._chart.updateSpec(this._spec), {
+        };
+        this._initChartSpec(this._spec, "render");
+        const res = mergeUpdateResult(this._chart.updateSpec(this._spec), {
             reTransformSpec: !1,
             change: reSize,
             reMake: !1,
             reCompile: !1,
             reSize: reSize
-        }));
+        });
+        return userUpdateOptions ? Object.assign(Object.assign({}, res), userUpdateOptions) : res;
     }
     updateModelSpec(filter, spec, forceMerge = !1, morphConfig) {
         return __awaiter(this, void 0, void 0, (function*() {
@@ -621,7 +630,7 @@ export class VChart {
         this._autoSize !== lasAutoSize && (resize = !0), resize;
     }
     _getBackground() {
-        return ("string" == typeof this._spec.background ? this._spec.background : null) || this._currentTheme.background || this._option.background;
+        return ("string" == typeof this._spec.background || isObject(this._spec.background) && this._spec.background.gradient ? this._spec.background : null) || this._currentTheme.background || this._option.background;
     }
     getCurrentTheme() {
         return getThemeObject(this._currentThemeName);
@@ -858,6 +867,16 @@ export class VChart {
     setRuntimeSpec(spec) {
         this._spec = spec, this._updateSpecInfo();
     }
+    updateIndicatorDataById(id, datum) {
+        var _a;
+        const indicator = null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getComponentByUserId(id);
+        indicator && indicator.updateDatum(datum);
+    }
+    updateIndicatorDataByIndex(index = 0, datum) {
+        var _a;
+        const indicators = null === (_a = this._chart) || void 0 === _a ? void 0 : _a.getComponentsByType(ComponentTypeEnum.indicator);
+        indicators && indicators[index] && indicators[index].updateDatum(datum);
+    }
     _initChartPlugin() {
         const pluginList = Factory.getChartPlugins();
         pluginList.length > 0 && (this._chartPlugin = new ChartPluginService(this), this._chartPlugin.load(pluginList.map((p => new p))),