@agions/taroviz 1.9.0 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agions/taroviz",
-  "version": "1.9.0",
+  "version": "1.11.1",
   "description": "基于 Taro 和 ECharts 的多端图表组件库",
   "type": "module",
   "main": "dist/cjs/index.js",

package/src/charts/boxplot/types.ts

@@ -1,6 +1,8 @@
 /**
  * 箱线图类型定义
  */
+import type { EChartsType, ECElementEvent } from 'echarts';
+import type { LoadingOptions } from '../types';
 
 export type BoxplotChartProps = {
   option?: BoxplotOption;
@@ -8,11 +10,11 @@ export type BoxplotChartProps = {
   height?: string | number;
   className?: string;
   style?: React.CSSProperties;
-  onEvents?: Record<string, (params: any) => void>;
+  onEvents?: Record<string, (params: ECElementEvent) => void>;
   loading?: boolean;
-  loadingOption?: any;
+  loadingOption?: LoadingOptions;
   theme?: string;
-  onChartReady?: (chart: any) => void;
+  onChartReady?: (chart: EChartsType) => void;
   opts?: {
     devicePixelRatio?: number;
     renderer?: 'canvas' | 'svg';

package/src/charts/candlestick/__tests__/index.test.tsx

@@ -14,7 +14,10 @@ describe('CandlestickChart', () => {
 
   it('renders with custom width and height', () => {
     const { container } = render(<CandlestickChart width={500} height={400} />);
-    expect(container.firstChild).toHaveStyle({ width: '500px', height: '400px' });
+    // BaseChartWrapper renders a fragment with a hidden accessibility table (first child)
+    // and the actual chart div (last child), so we query the last child for styles
+    const chartDiv = container.lastChild;
+    expect(chartDiv).toHaveStyle({ width: '500px', height: '400px' });
   });
 
   it('renders with stock data', () => {

package/src/charts/graph/__tests__/index.test.tsx

@@ -14,12 +14,18 @@ describe('GraphChart', () => {
 
   it('renders with custom className', () => {
     const { container } = render(<GraphChart className="test-graph" />);
-    expect(container.firstChild).toHaveClass('test-graph');
+    // BaseChartWrapper renders a fragment with a hidden accessibility table (first child)
+    // and the actual chart div (last child), so we query the last child for className
+    const chartDiv = container.lastChild;
+    expect(chartDiv).toHaveClass('test-graph');
   });
 
   it('renders with custom width and height', () => {
     const { container } = render(<GraphChart width={500} height={400} />);
-    expect(container.firstChild).toHaveStyle({ width: '500px', height: '400px' });
+    // BaseChartWrapper renders a fragment with a hidden accessibility table (first child)
+    // and the actual chart div (last child), so we query the last child for styles
+    const chartDiv = container.lastChild;
+    expect(chartDiv).toHaveStyle({ width: '500px', height: '400px' });
   });
 
   it('renders with basic option', () => {

package/src/charts/parallel/types.ts

@@ -2,17 +2,20 @@
  * 平行坐标图类型定义
  */
 
+import type { EChartsType, ECElementEvent } from 'echarts';
+import type { LoadingOptions } from '../types';
+
 export type ParallelChartProps = {
   option?: ParallelOption;
   width?: string | number;
   height?: string | number;
   className?: string;
   style?: React.CSSProperties;
-  onEvents?: Record<string, (params: any) => void>;
+  onEvents?: Record<string, (params: ECElementEvent) => void>;
   loading?: boolean;
-  loadingOption?: any;
+  loadingOption?: LoadingOptions;
   theme?: string;
-  onChartReady?: (chart: any) => void;
+  onChartReady?: (chart: EChartsType) => void;
   opts?: {
     devicePixelRatio?: number;
     renderer?: 'canvas' | 'svg';

package/src/charts/tree/types.ts

@@ -2,7 +2,7 @@
  * 树图类型定义
  * ECharts 内置 tree 类型
  */
-import type { EChartsOption } from 'echarts';
+import type { EChartsOption, EChartsType, ECElementEvent } from 'echarts';
 
 // ============================================================================
 // 树图数据节点
@@ -166,9 +166,9 @@ export interface TreeChartProps {
   /** 加载配置 */
   loadingOption?: Record<string, unknown>;
   /** 图表初始化回调 */
-  onChartInit?: (chart: any) => void;
+  onChartInit?: (chart: EChartsType) => void;
   /** 图表就绪回调 */
-  onChartReady?: (chart: any) => void;
+  onChartReady?: (chart: EChartsType) => void;
   /** 事件回调 */
-  onEvents?: Record<string, (params: any) => void>;
+  onEvents?: Record<string, (params: ECElementEvent) => void>;
 }

package/src/charts/wordcloud/__tests__/index.test.tsx

@@ -14,7 +14,10 @@ describe('WordCloudChart', () => {
 
   it('renders with custom width and height', () => {
     const { container } = render(<WordCloudChart width={600} height={400} />);
-    expect(container.firstChild).toHaveStyle({ width: '600px', height: '400px' });
+    // BaseChartWrapper renders a fragment with a hidden accessibility table (first child)
+    // and the actual chart div (last child), so we query the last child for styles
+    const chartDiv = container.lastChild;
+    expect(chartDiv).toHaveStyle({ width: '600px', height: '400px' });
   });
 
   it('renders with word data', () => {

package/src/core/animation/AnimationManager.ts

@@ -10,6 +10,9 @@ import {
   AnimationManagerConfig,
   AnimationType,
   AnimationEventType,
+  AnimationEventHandler,
+  AnimationEventData,
+  EChartsAnimationConfigResult,
 } from './types';
 
 /**
@@ -131,7 +134,7 @@ export class AnimationManager {
   private templates: Map<string, AnimationTemplate> = new Map();
   private defaultConfig: AnimationConfig;
   private performanceConfig: AnimationManagerConfig['performance'];
-  private eventHandlers: Map<string, Set<(event: any) => void>> = new Map();
+  private eventHandlers: Map<string, Set<AnimationEventHandler>> = new Map();
 
   /**
    * 私有构造函数
@@ -304,7 +307,7 @@ export class AnimationManager {
   public generateEChartsAnimationConfig(
     config: Partial<AnimationConfig> = {},
     dataLength: number = 0
-  ): any {
+  ): EChartsAnimationConfigResult {
     const optimizedConfig = this.getOptimizedConfig(config, dataLength);
 
     if (!optimizedConfig.enabled) {
@@ -331,7 +334,7 @@ export class AnimationManager {
   /**
    * 绑定动画事件
    */
-  public on(eventType: AnimationEventType, handler: (event: any) => void): void {
+  public on(eventType: AnimationEventType, handler: AnimationEventHandler): void {
     if (!this.eventHandlers.has(eventType)) {
       this.eventHandlers.set(eventType, new Set());
     }
@@ -341,7 +344,7 @@ export class AnimationManager {
   /**
    * 解绑动画事件
    */
-  public off(eventType: AnimationEventType, handler?: (event: any) => void): void {
+  public off(eventType: AnimationEventType, handler?: AnimationEventHandler): void {
     if (!handler) {
       this.eventHandlers.delete(eventType);
       return;
@@ -352,7 +355,7 @@ export class AnimationManager {
   /**
    * 触发动画事件
    */
-  public emit(eventType: AnimationEventType, data: any): void {
+  public emit(eventType: AnimationEventType, data: AnimationEventData): void {
     const handlers = this.eventHandlers.get(eventType);
     if (handlers) {
       handlers.forEach((handler) => {
@@ -427,7 +430,7 @@ export function getAnimationPreset(name: string): AnimationPreset | undefined {
 export function generateEChartsAnimationConfig(
   config: Partial<AnimationConfig> = {},
   dataLength: number = 0
-): any {
+): EChartsAnimationConfigResult {
   const manager = AnimationManager.getInstance();
   return manager.generateEChartsAnimationConfig(config, dataLength);
 }

package/src/core/animation/types.ts

@@ -174,6 +174,36 @@ export interface AnimationTemplate {
   scenarios?: string[];
 }
 
+/**
+ * ECharts 动画配置返回类型
+ */
+export interface EChartsAnimationConfigResult {
+  animation: boolean;
+  animationDuration?: number;
+  animationEasing?: string;
+  animationDelay?: number;
+  animationDurationUpdate?: number;
+  animationEasingUpdate?: string;
+  animationDelayUpdate?: number;
+  animationThreshold?: number;
+  progressive?: boolean;
+  progressiveThreshold?: number;
+  progressiveChunkMode?: string;
+}
+
+/**
+ * 动画事件数据
+ */
+export interface AnimationEventData {
+  type: AnimationEventType;
+  animationType: AnimationType;
+  chartId?: string;
+  seriesIndex?: number;
+  dataIndex?: number;
+  timestamp: number;
+  duration: number;
+}
+
 /**
  * 动画管理器配置
  */

package/src/core/components/Annotation.tsx

@@ -32,7 +32,7 @@ export interface MarkAreaStyle {
 }
 
 /**
- * 标记线数据点
+ * 标记线数据点 — 支持常规坐标和 ECharts 统计类型
  */
 export interface MarkLineDataPoint {
   /** X轴值 */
@@ -41,6 +41,8 @@ export interface MarkLineDataPoint {
   yAxis?: string | number;
   /** 数据点名称 */
   name?: string;
+  /** ECharts 统计/特殊类型（'average' | 'max' | 'min' | 'median'） */
+  type?: string;
 }
 
 /**
@@ -97,7 +99,7 @@ export interface ScatterAnnotationConfig {
   data: Array<{
     coord: [number | string, number];
     value?: number;
-    name?: string;
+    name: string;
   }>;
   /** 符号类型 */
   symbol?: string;
@@ -109,7 +111,7 @@ export interface ScatterAnnotationConfig {
   label?: {
     show?: boolean;
     position?: string;
-    formatter?: string | ((value: any) => string);
+    formatter?: string | ((value: unknown) => string);
     color?: string;
   };
 }
@@ -223,14 +225,14 @@ export function convertAnnotationToScatter(
         itemStyle,
         label: {
           show: label?.show !== false,
-          position: label?.position || 'top',
+          position: label?.position || ('top' as const),
           formatter: label?.formatter,
           color: label?.color || '#333',
         },
         data,
       },
-    } as any,
-  ];
+    },
+  ] as unknown as EChartsOption['series'];
 }
 
 /**
@@ -269,28 +271,28 @@ export function useAnnotation(props: AnnotationProps): EChartsOption {
 export const AnnotationPresets = {
   /** 平均线 */
   averageLine: (color = '#1890ff'): MarkLineConfig => ({
-    data: [{ type: 'average', name: '平均值' }] as any,
+    data: [{ type: 'average', name: '平均值' }],
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 最大值线 */
   maxLine: (color = '#f5222d'): MarkLineConfig => ({
-    data: [{ type: 'max', name: '最大值' }] as any,
+    data: [{ type: 'max', name: '最大值' }],
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 最小值线 */
   minLine: (color = '#52c41a'): MarkLineConfig => ({
-    data: [{ type: 'min', name: '最小值' }] as any,
+    data: [{ type: 'min', name: '最小值' }],
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 警戒线 */
   thresholdLine: (value: number, color = '#faad14'): MarkLineConfig => ({
-    data: [{ yAxis: value, name: '警戒线' }] as any,
+    data: [{ yAxis: value, name: '警戒线' }],
     lineStyle: { color, type: 'solid', width: 2 },
     label: { show: true, position: 'start', color },
   }),

package/src/core/components/BaseChart.tsx

@@ -16,6 +16,13 @@ import { PerformanceAnalyzer } from '../utils/performance';
 import { normalizeSize, calculateDataLength, filterDataByKeys } from '../utils/chartUtils';
 import BaseChartWrapper from '../../charts/common/BaseChartWrapper';
 import type { BaseChartProps } from '../../charts/types';
+import type {
+  EChartsMouseEventParams,
+  EChartsDataZoomEventParams,
+  EChartsLegendEventParams,
+  EChartsTooltipEventParams,
+} from '../types/common';
+import type { ECElementEvent } from 'echarts';
 
 // ============================================================================
 // 接口定义
@@ -95,8 +102,8 @@ export interface ChartProps {
   enableZoom?: boolean;
   onZoom?: (data: { start: number; end: number; dataZoomIndex: number }) => void;
   enableDataFiltering?: boolean;
-  filters?: Record<string, any>;
-  onDataFiltered?: (filteredData: any[], filters: Record<string, any>) => void;
+  filters?: Record<string, string | number | boolean | string[] | null>;
+  onDataFiltered?: (filteredData: unknown[], filters: Record<string, unknown>) => void;
   enableLegendInteraction?: boolean;
   legendInteractionMode?: 'single' | 'multiple' | 'all';
   onLegendSelect?: (params: { name: string; selected: Record<string, boolean> }) => void;
@@ -104,10 +111,10 @@ export interface ChartProps {
   onLegendSelectAll?: (params: { selected: Record<string, boolean> }) => void;
   onLegendInverseSelect?: (params: { selected: Record<string, boolean> }) => void;
   enableCustomTooltip?: boolean;
-  customTooltipContent?: (params: any) => React.ReactNode;
+  customTooltipContent?: (params: EChartsMouseEventParams | EChartsMouseEventParams[]) => React.ReactNode;
   customTooltipStyle?: React.CSSProperties;
-  onTooltipShow?: (params: any) => void;
-  onTooltipHide?: (params: any) => void;
+  onTooltipShow?: (params: EChartsTooltipEventParams) => void;
+  onTooltipHide?: (params: EChartsTooltipEventParams) => void;
   onExport?: (dataURL: string, options: ChartExportOptions) => void;
   linkageConfig?: ChartLinkageConfig;
   onDataUpdate?: (
@@ -197,15 +204,16 @@ const BaseChart: React.FC<ChartProps> = (props) => {
   // Wrapper option that applies virtual scroll + data filtering
   const wrappedOption = useMemo(() => {
     if (!option) return undefined;
-    let processed = { ...option };
+    let processed: Record<string, unknown> = { ...option };
 
     // Apply data filtering
     if (enableDataFiltering && filters && Object.keys(filters).length > 0) {
-      processed = JSON.parse(JSON.stringify(processed));
+      processed = JSON.parse(JSON.stringify(processed)) as typeof processed;
       if (processed.series && Array.isArray(processed.series)) {
-        processed.series = processed.series.map((s: any) => {
-          if (s.data && Array.isArray(s.data)) {
-            const filtered = filterDataByKeys(s.data, filters);
+        processed.series = (processed.series as unknown[]).map((s: unknown) => {
+          const seriesItem = s as { data?: unknown[]; [key: string]: unknown };
+          if (seriesItem.data && Array.isArray(seriesItem.data)) {
+            const filtered = filterDataByKeys(seriesItem.data, filters);
             if (onDataFiltered) onDataFiltered(filtered, filters);
             if (virtualScroll) {
               virtualScrollRef.current.totalDataCount = filtered.length;
@@ -217,11 +225,11 @@ const BaseChart: React.FC<ChartProps> = (props) => {
                 start + virtualScrollPageSize + virtualScrollPreloadSize,
                 filtered.length
               );
-              return { ...s, data: filtered.slice(start, end) };
+              return { ...seriesItem, data: filtered.slice(start, end) };
             }
-            return { ...s, data: filtered };
+            return { ...seriesItem, data: filtered };
           }
-          return s;
+          return seriesItem;
         });
       }
     }
@@ -285,7 +293,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
       if (instance) {
         // Click linkage
         if (linkageConfig.enableClickLinkage && chartId && linkageConfig.linkedChartIds) {
-          instance.on('click', (params: any) => {
+          instance.on('click', (params: ECElementEvent) => {
             linkageConfig.linkedChartIds!.forEach((lid) => {
               const linked = getChart(lid);
               if (linked) linked.dispatchAction({ type: 'highlight', name: params.name });
@@ -294,17 +302,18 @@ const BaseChart: React.FC<ChartProps> = (props) => {
         }
 
         // Zoom + zoom linkage + virtual scroll page update
-        instance.on('datazoom', (params: any) => {
+        instance.on('datazoom', (params: unknown) => {
+          const p = params as { start?: number; end?: number; dataZoomIndex?: number; batch?: Array<{ start?: number; end?: number; dataZoomIndex?: number }> };
           if (onZoom)
             onZoom({
-              start: params.start || 0,
-              end: params.end || 100,
-              dataZoomIndex: params.dataZoomIndex || 0,
+              start: p.start || 0,
+              end: p.end || 100,
+              dataZoomIndex: p.dataZoomIndex || 0,
             });
           if (virtualScroll && !virtualScrollRef.current.isScrolling) {
             virtualScrollRef.current.isScrolling = true;
             const newPage = Math.floor(
-              ((params.start || 0) / 100) * virtualScrollRef.current.totalPages
+              ((p.start || 0) / 100) * virtualScrollRef.current.totalPages
             );
             if (newPage !== virtualScrollRef.current.currentPage) {
               virtualScrollRef.current.currentPage = newPage;
@@ -320,9 +329,9 @@ const BaseChart: React.FC<ChartProps> = (props) => {
               if (linked)
                 linked.dispatchAction({
                   type: 'dataZoom',
-                  start: params.start,
-                  end: params.end,
-                  dataZoomIndex: params.dataZoomIndex,
+                  start: p.start,
+                  end: p.end,
+                  dataZoomIndex: p.dataZoomIndex,
                 });
             });
           }
@@ -330,8 +339,9 @@ const BaseChart: React.FC<ChartProps> = (props) => {
 
         // Legend interaction
         if (enableLegendInteraction) {
-          instance.on('legendselectchanged', (params: any) => {
-            const { name, selected } = params;
+          instance.on('legendselectchanged', (params: unknown) => {
+            const p = params as { name?: string; selected: Record<string, boolean> };
+            const { name, selected } = p;
             if (linkageConfig.enableLegendLinkage && chartId && linkageConfig.linkedChartIds) {
               linkageConfig.linkedChartIds!.forEach((lid) => {
                 const linked = getChart(lid);
@@ -344,21 +354,21 @@ const BaseChart: React.FC<ChartProps> = (props) => {
                 newSelected[k] = k === name;
               });
               instance.setOption({ legend: { selected: newSelected } });
-              onLegendSelect?.({ name, selected: newSelected });
+              if (name !== undefined) onLegendSelect?.({ name, selected: newSelected });
             } else {
-              if (selected[name]) onLegendSelect?.({ name, selected });
-              else onLegendUnselect?.({ name, selected });
+              if (name !== undefined && selected[name]) onLegendSelect?.({ name, selected });
+              else if (name !== undefined) onLegendUnselect?.({ name, selected });
             }
           });
         }
 
         // Custom tooltip
         if (enableCustomTooltip && customTooltipContent) {
-          instance.on('tooltipshow', (params: any) => onTooltipShow?.(params));
-          instance.on('tooltiphide', (params: any) => onTooltipHide?.(params));
+          instance.on('tooltipshow', (params: unknown) => onTooltipShow?.(params as EChartsTooltipEventParams));
+          instance.on('tooltiphide', (params: unknown) => onTooltipHide?.(params as EChartsTooltipEventParams));
           instance.setOption({
             tooltip: {
-              formatter: (params: any) => String(customTooltipContent(params)),
+              formatter: (params: unknown) => String(customTooltipContent(params as EChartsMouseEventParams)),
               ...(customTooltipStyle && {
                 backgroundColor: 'transparent',
                 borderColor: 'transparent',
@@ -485,7 +495,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
   };
 
   const wrapperProps: BaseChartProps & { chartType: string } = {
-    option: wrappedOption as any,
+    option: wrappedOption as unknown as Record<string, unknown>,
     width,
     height,
     theme: typeof theme === 'string' ? theme : (theme as Record<string, unknown>),

package/src/core/components/ErrorBoundary.tsx

@@ -65,25 +65,30 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
         return fallback(error, this.handleReset);
       }
 
-      // 默认错误展示
+      // 默认错误展示（使用 CSS 变量，与 ThemeManager 对齐）
       return (
         <div
+          role="alert"
+          aria-live="assertive"
           style={{
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
-            padding: '20px',
-            backgroundColor: '#fff',
-            border: '1px solid #ff4d4f',
-            borderRadius: '8px',
-            color: '#333',
+            padding: 'var(--tv-border-radius, 16px)',
+            backgroundColor: 'var(--tv-bg-color, #fff)',
+            border: '1px solid var(--tv-error-color, #ff4d4f)',
+            borderRadius: 'var(--tv-border-radius, 8px)',
+            color: 'var(--tv-text-color, #333)',
             minHeight: '200px',
+            fontFamily: 'var(--tv-font-family, sans-serif)',
           }}
         >
-          <div style={{ fontSize: '48px', marginBottom: '16px' }}>⚠️</div>
-          <h3 style={{ margin: '0 0 12px', color: '#ff4d4f' }}>图表渲染失败</h3>
-          <p style={{ margin: '0 0 16px', color: '#666', textAlign: 'center' }}>
+          <div style={{ fontSize: '48px', marginBottom: '16px' }} aria-hidden="true">⚠️</div>
+          <h3 style={{ margin: '0 0 12px', color: 'var(--tv-error-color, #ff4d4f)', fontWeight: 700 }}>
+            图表渲染失败
+          </h3>
+          <p style={{ margin: '0 0 16px', color: 'var(--tv-text-color-secondary, #666)', textAlign: 'center', maxWidth: '320px' }}>
             图表在渲染过程中遇到错误，请检查数据配置是否正确
           </p>
           {showDetails && (
@@ -91,15 +96,15 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
               style={{
                 width: '100%',
                 padding: '12px',
-                backgroundColor: '#f5f5f5',
-                borderRadius: '4px',
-                fontSize: '12px',
-                fontFamily: 'monospace',
+                backgroundColor: 'var(--tv-bg-color-secondary, #f5f5f5)',
+                borderRadius: 'var(--tv-border-radius-small, 4px)',
+                fontSize: 'var(--tv-font-size-small, 12px)',
+                fontFamily: 'var(--tv-font-family, monospace)',
                 overflow: 'auto',
                 maxHeight: '150px',
               }}
             >
-              <summary style={{ cursor: 'pointer', marginBottom: '8px' }}>错误详情</summary>
+              <summary style={{ cursor: 'pointer', marginBottom: '8px', fontWeight: 600 }}>错误详情</summary>
               <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
                 {error.message}
                 {'\n\n'}
@@ -112,12 +117,20 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
             style={{
               marginTop: '16px',
               padding: '8px 24px',
-              backgroundColor: '#1890ff',
+              backgroundColor: 'var(--tv-primary-color, #1890ff)',
               color: '#fff',
               border: 'none',
-              borderRadius: '4px',
+              borderRadius: 'var(--tv-border-radius-small, 4px)',
               cursor: 'pointer',
-              fontSize: '14px',
+              fontSize: 'var(--tv-font-size, 14px)',
+              fontWeight: 600,
+              transition: 'background-color var(--tv-transition-duration, 0.3s)',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.backgroundColor = 'var(--tv-primary-color-hover, #40a9ff)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.backgroundColor = 'var(--tv-primary-color, #1890ff)';
             }}
           >
             重试