@agions/taroviz 1.7.0 → 1.10.0

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/types.ts

@@ -681,7 +681,7 @@ export interface SankeyChartProps extends BaseChartProps {
   nodeWidth?: number;
 
   /** 节点排序方式 */
-  nodeSort?: 'ascending' | 'descending' | 'none' | ((a: any, b: any) => number);
+  nodeSort?: 'ascending' | 'descending' | 'none' | ((a: unknown, b: unknown) => number);
 
   /** 边的曲度 */
   linkCurveness?: number;

package/src/core/animation/AnimationManager.ts

@@ -13,21 +13,33 @@ import {
 } from './types';
 
 /**
- * 动画预设集合
+ * Checks the OS/browser prefers-reduced-motion setting.
+ * Returns true if the user has requested reduced motion.
+ */
+function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/**
+ * Professional animation presets following frontend-design-pro skill guidelines:
+ * - Easing: cubic-bezier(0.16, 1, 0.3, 1) ("cubicOut") for natural deceleration
+ * - Durations: 100-200ms micro, 300-500ms transitions, never >600ms
+ * - NO bounce/elastic — anti-patterns that feel廉价 (cheap)
  */
 const DEFAULT_ANIMATION_PRESETS: AnimationPreset[] = [
   {
     name: 'default',
-    description: '默认动画配置',
+    description: '默认动画配置 — 专业级 (300-500ms, cubicOut)',
     config: {
       enabled: true,
-      duration: 1000,
+      duration: 400,
       easing: 'cubicOut',
-      appearDuration: 1200,
+      appearDuration: 450,
       appearEasing: 'cubicOut',
-      updateDuration: 800,
+      updateDuration: 300,
       updateEasing: 'cubicOut',
-      disappearDuration: 600,
+      disappearDuration: 250,
       disappearEasing: 'cubicIn',
       threshold: 1000,
       progressive: true,
@@ -36,17 +48,17 @@ const DEFAULT_ANIMATION_PRESETS: AnimationPreset[] = [
   },
   {
     name: 'fast',
-    description: '快速动画配置',
+    description: '快速动画配置 — 微交互 (150-200ms)',
     config: {
       enabled: true,
-      duration: 500,
-      easing: 'linear',
-      appearDuration: 600,
-      appearEasing: 'linear',
-      updateDuration: 400,
-      updateEasing: 'linear',
-      disappearDuration: 300,
-      disappearEasing: 'linear',
+      duration: 150,
+      easing: 'cubicOut',
+      appearDuration: 200,
+      appearEasing: 'cubicOut',
+      updateDuration: 150,
+      updateEasing: 'cubicOut',
+      disappearDuration: 100,
+      disappearEasing: 'cubicIn',
       threshold: 2000,
       progressive: true,
       progressiveStep: 1000,
@@ -54,55 +66,57 @@ const DEFAULT_ANIMATION_PRESETS: AnimationPreset[] = [
   },
   {
     name: 'slow',
-    description: '慢速动画配置',
+    description: '慢速动画配置 — 页面过渡 (500-600ms, capped)',
     config: {
       enabled: true,
-      duration: 2000,
+      duration: 500,
       easing: 'cubicInOut',
-      appearDuration: 2400,
+      appearDuration: 600,
       appearEasing: 'cubicInOut',
-      updateDuration: 1600,
+      updateDuration: 400,
       updateEasing: 'cubicInOut',
-      disappearDuration: 1200,
+      disappearDuration: 300,
       disappearEasing: 'cubicInOut',
       threshold: 500,
       progressive: true,
       progressiveStep: 250,
     },
   },
+  // DEPRECATED — bounce is an anti-pattern per frontend-design-pro skill
   {
     name: 'bounce',
-    description: '弹跳动画配置',
+    description: '[已废弃] 弹跳动画 — 请使用 default 或 fast',
     config: {
-      enabled: true,
-      duration: 1500,
-      easing: 'bounceOut',
-      appearDuration: 1800,
-      appearEasing: 'bounceOut',
-      updateDuration: 1200,
-      updateEasing: 'bounceOut',
-      disappearDuration: 900,
-      disappearEasing: 'bounceIn',
+      enabled: false, // disabled by default — anti-pattern
+      duration: 0,
+      easing: 'cubicOut',
+      appearDuration: 0,
+      appearEasing: 'cubicOut',
+      updateDuration: 0,
+      updateEasing: 'cubicOut',
+      disappearDuration: 0,
+      disappearEasing: 'cubicIn',
       threshold: 500,
-      progressive: true,
+      progressive: false,
       progressiveStep: 250,
     },
   },
+  // DEPRECATED — elastic is an anti-pattern per frontend-design-pro skill
   {
     name: 'elastic',
-    description: '弹性动画配置',
+    description: '[已废弃] 弹性动画 — 请使用 default 或 fast',
     config: {
-      enabled: true,
-      duration: 1500,
-      easing: 'elasticOut',
-      appearDuration: 1800,
-      appearEasing: 'elasticOut',
-      updateDuration: 1200,
-      updateEasing: 'elasticOut',
-      disappearDuration: 900,
-      disappearEasing: 'elasticIn',
+      enabled: false, // disabled by default — anti-pattern
+      duration: 0,
+      easing: 'cubicOut',
+      appearDuration: 0,
+      appearEasing: 'cubicOut',
+      updateDuration: 0,
+      updateEasing: 'cubicOut',
+      disappearDuration: 0,
+      disappearEasing: 'cubicIn',
       threshold: 500,
-      progressive: true,
+      progressive: false,
       progressiveStep: 250,
     },
   },
@@ -213,6 +227,7 @@ export class AnimationManager {
 
   /**
    * 根据数据量和动画类型获取优化后的动画配置
+   * 尊重 prefers-reduced-motion 无障碍设置
    */
   public getOptimizedConfig(
     config: Partial<AnimationConfig> = {},
@@ -224,6 +239,18 @@ export class AnimationManager {
       ...config,
     };
 
+    // Respect OS/browser prefers-reduced-motion setting (WCAG)
+    if (prefersReducedMotion()) {
+      return {
+        ...mergedConfig,
+        enabled: false,
+        duration: 0,
+        appearDuration: 0,
+        updateDuration: 0,
+        disappearDuration: 0,
+      };
+    }
+
     // 根据数据量优化动画
     if (mergedConfig.threshold && dataLength > mergedConfig.threshold) {
       mergedConfig.enabled = false;

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

@@ -9,6 +9,7 @@ import React, { useEffect, useRef, useMemo, useCallback } from 'react';
 
 import { generateEChartsAnimationConfig } from '../animation';
 import { EChartsOption, EChartsType, AnimationConfig } from '../types';
+import type { DataZoomComponentOption } from 'echarts';
 import { registerChart, removeChart, getChart } from '../utils/chartInstances';
 import { DebugPanel, DebugPanelOptions, updateDebugInfo } from '../utils/debug';
 import { PerformanceAnalyzer } from '../utils/performance';
@@ -21,8 +22,27 @@ import type { BaseChartProps } from '../../charts/types';
 // ============================================================================
 
 /** 图表事件参数类型 */
-export interface ChartEventParams {
-  [key: string]: any;
+export interface ChartEventParams extends Record<string, unknown> {
+  componentType?: string;
+  componentSubType?: string;
+  componentIndex?: number;
+  seriesType?: string;
+  seriesIndex?: number;
+  seriesId?: string;
+  seriesName?: string;
+  name?: string;
+  dataIndex?: number;
+  data?: unknown;
+  dataType?: string;
+  value?: unknown;
+  color?: string;
+  borderColor?: string;
+  dimensionNames?: string[];
+  encode?: Record<string, number[]>;
+  marker?: string;
+  status?: string;
+  dimensionIndex?: number;
+  percent?: number;
 }
 
 /** 图表导出选项 */
@@ -75,8 +95,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;
@@ -146,7 +166,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
   } = props;
 
   // Refs
-  const chartInstanceRef = useRef<any>(null);
+  const chartInstanceRef = useRef<EChartsType | null>(null);
   const performanceRef = useRef({
     initStartTime: 0,
     initEndTime: 0,
@@ -162,7 +182,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
     isScrolling: false,
   });
   const oldOptionRef = useRef<EChartsOption | undefined>(option);
-  const adapterRef = useRef<any>(null);
+  const adapterRef = useRef<unknown>(null);
   const debugConfigRef = useRef<DebugPanelOptions | null>(null);
   const performanceAnalyzerRef = useRef<PerformanceAnalyzer | null>(null);
 
@@ -206,6 +226,22 @@ const BaseChart: React.FC<ChartProps> = (props) => {
       }
     }
 
+    // Inject dataZoom when enableZoom is true (keyboard-accessible zoom)
+    if (_enableZoom) {
+      processed = JSON.parse(JSON.stringify(processed));
+      // Avoid duplicate dataZoom entries
+      const existingDzArr = Array.isArray(processed.dataZoom)
+        ? processed.dataZoom as DataZoomComponentOption[]
+        : processed.dataZoom ? [processed.dataZoom as DataZoomComponentOption] : [];
+      if (!existingDzArr.some((dz) => dz?.type === 'inside')) {
+        processed.dataZoom = [
+          ...(existingDzArr || []),
+          // Inside (mouse wheel + keyboard) — wired to keyboard nav in BaseChartWrapper
+          { type: 'inside', start: 0, end: 100, zoomOnMouseWheel: true, moveOnMouseMove: false },
+        ];
+      }
+    }
+
     // Apply animation config
     const dataLength = calculateDataLength(processed);
     const animConfig = generateEChartsAnimationConfig(animation, dataLength);
@@ -213,6 +249,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
   }, [
     option,
     animation,
+    _enableZoom,
     enableDataFiltering,
     filters,
     virtualScroll,
@@ -223,13 +260,14 @@ const BaseChart: React.FC<ChartProps> = (props) => {
 
   // Internal chartInit that wraps the user's callback
   const handleChartInit = useCallback(
-    (instance: any) => {
+    (instance: EChartsType) => {
       chartInstanceRef.current = instance;
-      adapterRef.current = instance;
+      adapterRef.current = instance as unknown;
 
       // Performance monitoring init
       if (enablePerformanceMonitoring) {
         performanceAnalyzerRef.current = PerformanceAnalyzer.getInstance({
+          chartId,
           enabled: true,
           metrics: ['initTime', 'renderTime', 'updateTime', 'dataSize', 'frameRate'],
           sampleInterval: 1000,
@@ -394,15 +432,40 @@ const BaseChart: React.FC<ChartProps> = (props) => {
     }
   }, [option, onPerformance]);
 
-  // Data update callback
+  // Data update callback — supports debounce
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   useEffect(() => {
-    if (onDataUpdate && dataUpdateOptions?.enabled !== false) {
+    if (!onDataUpdate || dataUpdateOptions?.enabled === false) return;
+
+    const delay = dataUpdateOptions?.debounceDelay ?? 0;
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    if (delay > 0) {
+      debounceTimerRef.current = setTimeout(() => {
+        const oldOpt = oldOptionRef.current;
+        if (oldOpt !== option) {
+          onDataUpdate(oldOpt, option);
+          oldOptionRef.current = option;
+        }
+      }, delay);
+    } else {
       const oldOpt = oldOptionRef.current;
       if (oldOpt !== option) {
         onDataUpdate(oldOpt, option);
         oldOptionRef.current = option;
       }
     }
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+    };
   }, [option, onDataUpdate, dataUpdateOptions]);
 
   // Cleanup on unmount
@@ -413,7 +476,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
         performanceAnalyzerRef.current.dispose();
         performanceAnalyzerRef.current = null;
       }
-      if (adapterRef.current) adapterRef.current.dispose();
+      if (adapterRef.current) (adapterRef.current as EChartsType).dispose();
     };
   }, [chartId]);
 
@@ -422,7 +485,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)';
             }}
           >
             重试

package/src/core/components/LazyChart.tsx

@@ -18,7 +18,7 @@ const LazySunburstChart = lazy(() => import('../../charts/sunburst'));
 const LazySankeyChart = lazy(() => import('../../charts/sankey'));
 
 // 统一的图表类型到懒加载组件映射
-const LAZY_CHART_MODULES: Record<string, () => Promise<{ default: ComponentType<any> }>> = {
+const LAZY_CHART_MODULES: Record<string, () => Promise<{ default: ComponentType<Record<string, unknown>> }>> = {
   line: () => import('../../charts/line'),
   bar: () => import('../../charts/bar'),
   pie: () => import('../../charts/pie'),
@@ -35,10 +35,12 @@ const LAZY_CHART_MODULES: Record<string, () => Promise<{ default: ComponentType<
 export const LAZY_CHART_TYPES = Object.keys(LAZY_CHART_MODULES);
 
 /**
- * 默认加载状态组件
+ * 默认加载状态组件（使用 CSS 变量，与 ThemeManager 对齐）
  */
 const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中...' }) => (
   <div
+    role="status"
+    aria-label={text}
     style={{
       display: 'flex',
       alignItems: 'center',
@@ -46,8 +48,8 @@ const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中
       width: '100%',
       height: '100%',
       minHeight: '200px',
-      backgroundColor: '#f5f5f5',
-      borderRadius: '8px',
+      backgroundColor: 'var(--tv-bg-color-secondary, #f5f5f5)',
+      borderRadius: 'var(--tv-border-radius, 8px)',
     }}
   >
     <div style={{ textAlign: 'center' }}>
@@ -55,12 +57,13 @@ const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中
         style={{
           width: '40px',
           height: '40px',
-          border: '3px solid #1890ff',
+          border: '3px solid var(--tv-primary-color, #1890ff)',
           borderTopColor: 'transparent',
           borderRadius: '50%',
           animation: 'taroviz-spin 1s linear infinite',
           margin: '0 auto 12px',
         }}
+        aria-hidden="true"
       />
       <style>
         {`
@@ -69,7 +72,9 @@ const DefaultLoadingFallback: React.FC<{ text?: string }> = ({ text = '加载中
           }
         `}
       </style>
-      <span style={{ color: '#666', fontSize: '14px' }}>{text}</span>
+      <span style={{ color: 'var(--tv-text-color-secondary, #666)', fontSize: 'var(--tv-font-size, 14px)' }}>
+        {text}
+      </span>
     </div>
   </div>
 );
@@ -136,8 +141,8 @@ export function preloadAllCharts(): Promise<void[]> {
  * 创建懒加载图表映射
  * 用于动态导入图表
  */
-export function createLazyChart(chartType: string): ComponentType<any> | null {
-  const lazyCharts: Record<string, ComponentType<any>> = {
+export function createLazyChart(chartType: string): ComponentType<Record<string, unknown>> | null {
+  const lazyCharts: Record<string, ComponentType<Record<string, unknown>>> = {
     line: LazyLineChart,
     bar: LazyBarChart,
     pie: LazyPieChart,
@@ -159,7 +164,7 @@ export function createLazyChart(chartType: string): ComponentType<any> | null {
  * 用于按名称动态获取懒加载图表组件
  */
 export const LazyChartRegistry = {
-  get(chartType: string): ComponentType<any> | null {
+  get(chartType: string): ComponentType<Record<string, unknown>> | null {
     return createLazyChart(chartType);
   },