@agions/taroviz 1.1.1 → 1.2.1

package/src/core/types/common.ts

@@ -0,0 +1,224 @@
+/**
+ * ECharts 类型定义
+ */
+export type EChartsOption = any;
+
+/**
+ * 图表事件监听器
+ */
+export type ChartEventListener = Record<string, (params: any) => void>;
+
+/**
+ * 图表渲染器类型
+ */
+export type ChartRenderer = 'canvas' | 'svg';
+
+/**
+ * DataURL选项
+ */
+export interface DataURLOption {
+  /**
+   * 导出的图片类型
+   */
+  type?: 'png' | 'jpeg';
+
+  /**
+   * 设备像素比
+   */
+  pixelRatio?: number;
+
+  /**
+   * 背景色
+   */
+  backgroundColor?: string;
+
+  /**
+   * 排除的组件列表
+   */
+  excludeComponents?: string[];
+}
+
+/**
+ * 图表尺寸类型
+ */
+export interface ChartSize {
+  /**
+   * 宽度
+   */
+  width?: number | string;
+
+  /**
+   * 高度
+   */
+  height?: number | string;
+}
+
+/**
+ * 图表动画设置
+ */
+export interface ChartAnimation {
+  /**
+   * 是否启用动画
+   */
+  enabled?: boolean;
+
+  /**
+   * 动画时长
+   */
+  duration?: number;
+
+  /**
+   * 动画缓动效果
+   */
+  easing?: string;
+
+  /**
+   * 初始动画时长
+   */
+  animationDuration?: number;
+
+  /**
+   * 更新动画时长
+   */
+  animationDurationUpdate?: number;
+}
+
+/**
+ * 图表主题设置
+ */
+export interface ChartTheme {
+  /**
+   * 主题名称或配置
+   */
+  theme?: string | object;
+
+  /**
+   * 背景色
+   */
+  backgroundColor?: string;
+
+  /**
+   * 文本颜色
+   */
+  textColor?: string;
+
+  /**
+   * 轴线颜色
+   */
+  axisLineColor?: string;
+
+  /**
+   * 分割线颜色
+   */
+  splitLineColor?: string;
+}
+
+/**
+ * 图表加载状态配置
+ */
+export interface ChartLoadingOptions {
+  /**
+   * 加载提示文本
+   */
+  text?: string;
+
+  /**
+   * 加载动画颜色
+   */
+  color?: string;
+
+  /**
+   * 文本颜色
+   */
+  textColor?: string;
+
+  /**
+   * 遮罩颜色
+   */
+  maskColor?: string;
+
+  /**
+   * z层级
+   */
+  zlevel?: number;
+
+  /**
+   * 字体大小
+   */
+  fontSize?: number;
+
+  /**
+   * 是否显示旋转器
+   */
+  showSpinner?: boolean;
+
+  /**
+   * 旋转器半径
+   */
+  spinnerRadius?: number;
+
+  /**
+   * 线宽
+   */
+  lineWidth?: number;
+
+  /**
+   * 字体粗细
+   */
+  fontWeight?: number | string;
+
+  /**
+   * 字体样式
+   */
+  fontStyle?: string;
+
+  /**
+   * 字体族
+   */
+  fontFamily?: string;
+}
+
+/**
+ * 图表事件声明
+ */
+export enum ChartEventType {
+  CLICK = 'click',
+  MOUSEMOVE = 'mousemove',
+  MOUSEUP = 'mouseup',
+  MOUSEDOWN = 'mousedown',
+  MOUSEOVER = 'mouseover',
+  MOUSEOUT = 'mouseout',
+  GLOBALOUT = 'globalout',
+  LEGENDSELECTED = 'legendselected',
+  LEGENDUNSELECTED = 'legendunselected',
+  LEGENDSELECTCHANGED = 'legendselectchanged',
+  LEGENDSCROLL = 'legendscroll',
+  DATAZOOM = 'datazoom',
+  DATARANGESELECTED = 'datarangeselected',
+  TIMELINECHANGED = 'timelinechanged',
+  TIMELINEPLAYCHANGED = 'timelineplaychanged',
+  RESTORE = 'restore',
+  DATAVIEWCHANGED = 'dataviewchanged',
+  MAGICTYPECHANGED = 'magictypechanged',
+  GEOSELECTCHANGED = 'geoselectchanged',
+  GEOSELECTED = 'geoselected',
+  GEOUNSELECTED = 'geounselected',
+  PIESELECTCHANGED = 'pieselectchanged',
+  PIESELECTED = 'pieselected',
+  PIEUNSELECTED = 'pieunselected',
+  MAPSELECTCHANGED = 'mapselectchanged',
+  MAPSELECTED = 'mapselected',
+  MAPUNSELECTED = 'mapunselected',
+  AXISAREASELECTED = 'axisareaselected',
+  FOCUSNODEADJACENCY = 'focusnodeadjacency',
+  UNFOCUSNODEADJACENCY = 'unfocusnodeadjacency',
+  BRUSH = 'brush',
+  BRUSHSELECTED = 'brushselected',
+  RENDERED = 'rendered',
+  FINISHED = 'finished',
+  // 自定义事件
+  CHART_READY = 'chartReady',
+  CHART_RESIZE = 'chartResize',
+  CHART_ERROR = 'chartError',
+  CHART_DISPOSE = 'chartDispose',
+}

package/src/core/types/index.ts

@@ -0,0 +1,281 @@
+// 公共类型
+export * from './common';
+
+// 平台类型
+export * from './platform';
+
+export * from './chart';
+
+// ECharts相关类型
+import type { EChartsType } from 'echarts';
+
+import { ChartOptions } from './chart';
+
+/**
+ * TaroViz核心类型定义
+ */
+
+/**
+ * ECharts类型定义
+ */
+export { EChartsType };
+
+// 导出动画相关类型
+export * from '../animation';
+
+/**
+ * ECharts选项类型定义
+ */
+export type EChartsOption = ChartOptions;
+
+/**
+ * 动画缓动函数类型
+ */
+export type AnimationEasing =
+  | 'linear'
+  | 'quadraticIn'
+  | 'quadraticOut'
+  | 'quadraticInOut'
+  | 'cubicIn'
+  | 'cubicOut'
+  | 'cubicInOut'
+  | 'quarticIn'
+  | 'quarticOut'
+  | 'quarticInOut'
+  | 'quinticIn'
+  | 'quinticOut'
+  | 'quinticInOut'
+  | 'sinusoidalIn'
+  | 'sinusoidalOut'
+  | 'sinusoidalInOut'
+  | 'exponentialIn'
+  | 'exponentialOut'
+  | 'exponentialInOut'
+  | 'circularIn'
+  | 'circularOut'
+  | 'circularInOut'
+  | 'elasticIn'
+  | 'elasticOut'
+  | 'elasticInOut'
+  | 'backIn'
+  | 'backOut'
+  | 'backInOut'
+  | 'bounceIn'
+  | 'bounceOut'
+  | 'bounceInOut';
+
+/**
+ * 渲染器类型
+ */
+export type RendererType = 'canvas' | 'svg';
+
+/**
+ * 图表事件回调类型
+ */
+export type ChartEventCallback = (params: any) => void;
+
+/**
+ * 图表事件处理器映射
+ */
+export interface ChartEventHandlers {
+  [key: string]: ChartEventCallback;
+}
+
+/**
+ * 主题类型
+ */
+export interface ThemeType {
+  color?: string[];
+  backgroundColor?: string;
+  textStyle?: {
+    color?: string;
+    fontFamily?: string;
+    fontSize?: number;
+  };
+  title?: {
+    textStyle?: {
+      color?: string;
+      fontFamily?: string;
+      fontSize?: number;
+      fontWeight?: string | number;
+    };
+    subtextStyle?: {
+      color?: string;
+      fontFamily?: string;
+      fontSize?: number;
+      fontWeight?: string | number;
+    };
+  };
+  legend?: {
+    textStyle?: {
+      color?: string;
+      fontFamily?: string;
+      fontSize?: number;
+    };
+  };
+  tooltip?: {
+    backgroundColor?: string;
+    borderColor?: string;
+    textStyle?: {
+      color?: string;
+      fontFamily?: string;
+      fontSize?: number;
+    };
+  };
+  [key: string]: any;
+}
+
+/**
+ * 渲染性能优化配置
+ */
+export interface RenderOptimizationConfig {
+  /**
+   * 是否开启渐进式渲染
+   */
+  progressive?: boolean;
+
+  /**
+   * 渐进式渲染的阈值
+   */
+  progressiveThreshold?: number;
+
+  /**
+   * 是否启用懒更新
+   */
+  lazyUpdate?: boolean;
+
+  /**
+   * 是否启用动画
+   */
+  animation?: boolean;
+
+  /**
+   * 是否启用硬件加速
+   */
+  hardwareAcceleration?: boolean;
+
+  /**
+   * 帧率限制
+   */
+  frameRate?: number;
+}
+
+/**
+ * 适配器接口定义
+ */
+export interface Adapter {
+  /**
+   * 初始化图表
+   */
+  init(options?: any): EChartsType;
+
+  /**
+   * 设置图表配置
+   */
+  setOption(option: any, notMerge?: boolean): void;
+
+  /**
+   * 获取图表实例
+   */
+  getInstance(): EChartsType | null;
+
+  /**
+   * 设置组件实例
+   */
+  setComponent?(component: any): void;
+
+  /**
+   * 绑定事件
+   */
+  on(eventName: string, handler: (params: any) => void): void;
+
+  /**
+   * 解绑事件
+   */
+  off(eventName: string, handler?: (params: any) => void): void;
+
+  /**
+   * 调整图表大小
+   */
+  resize(): void;
+
+  /**
+   * 显示加载中
+   */
+  showLoading(options?: any): void;
+
+  /**
+   * 隐藏加载中
+   */
+  hideLoading(): void;
+
+  /**
+   * 清空图表
+   */
+  clear(): void;
+
+  /**
+   * 销毁图表
+   */
+  dispose(): void;
+
+  /**
+   * 获取DataURL
+   */
+  getDataURL?(opts?: any): string | undefined;
+
+  /**
+   * 转换为DataURL
+   */
+  convertToDataURL?(opts?: any): string | undefined;
+
+  /**
+   * 渲染图表
+   */
+  render(): JSX.Element;
+}
+
+/**
+ * 适配器配置选项
+ */
+export interface AdapterConfig {
+  /**
+   * 平台类型
+   */
+  platformType?: string;
+
+  /**
+   * 目标canvas元素ID
+   */
+  canvasId?: string;
+
+  /**
+   * 图表主题
+   */
+  theme?: string;
+
+  /**
+   * 渲染器类型
+   */
+  renderer?: 'canvas' | 'svg';
+
+  /**
+   * 设备像素比
+   */
+  devicePixelRatio?: number;
+
+  /**
+   * 宽度
+   */
+  width?: number;
+
+  /**
+   * 高度
+   */
+  height?: number;
+
+  /**
+   * 额外选项
+   */
+  [key: string]: any;
+}