@agions/taroviz 1.3.0 → 1.5.0

package/src/charts/common/BaseChartWrapper.tsx

@@ -2,13 +2,12 @@
  * 基础图表包装组件
  * 提供统一的图表初始化、渲染和生命周期管理
  */
-import * as echarts from 'echarts/core';
 import React, { useEffect, useRef, useMemo } from 'react';
 
 import { getAdapter } from '../../adapters';
 import { uuid } from '../../core/utils';
 import { BaseChartProps } from '../types';
-import { processAdapterConfig, safeRenderAdapter } from '../utils';
+import { processAdapterConfig } from '../utils';
 
 /**
  * 基础图表包装组件
@@ -31,7 +30,7 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
   chartType = 'chart',
 }) => {
   const chartId = useRef<string>(`${chartType}-${uuid()}`);
-  const chartInstance = useRef<echarts.ECharts | null>(null);
+  const chartInstance = useRef<any>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
   // 使用 useMemo 缓存适配器配置，并处理类型问题
@@ -46,56 +45,66 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
       renderer,
       option,
     });
-  }, [width, height, theme, autoResize, renderer, option, chartType]);
+  }, [width, height, theme, autoResize, renderer, option]);
 
   // 处理图表初始化
   useEffect(() => {
-    const initConfig = processAdapterConfig({
-      ...adapterConfig,
-      onInit: (instance: echarts.ECharts) => {
-        chartInstance.current = instance;
-
-        // 绑定事件
-        if (onEvents) {
-          Object.keys(onEvents).forEach((eventName) => {
-            instance.on(eventName, onEvents[eventName]);
-          });
-        }
+    const initChart = async () => {
+      const initConfig = processAdapterConfig({
+        ...adapterConfig,
+        onInit: (instance: any) => {
+          chartInstance.current = instance;
 
-        // 初始化回调
-        if (onChartInit) {
-          onChartInit(instance);
-        }
+          // 绑定事件
+          if (onEvents) {
+            Object.keys(onEvents).forEach((eventName) => {
+              instance.on(eventName, (onEvents as any)[eventName]);
+            });
+          }
+
+          // 初始化回调
+          if (onChartInit) {
+            onChartInit(instance);
+          }
 
-        // 准备好回调
-        if (onChartReady) {
-          onChartReady(instance);
+          // 准备好回调
+          if (onChartReady) {
+            onChartReady(instance);
+          }
+        },
+      });
+
+      // 获取适配器并初始化（异步动态导入）
+      const adapter = await getAdapter(initConfig);
+      adapter.init();
+
+      // 返回清理函数
+      return () => {
+        if (chartInstance.current) {
+          // 解绑事件
+          if (onEvents) {
+            Object.keys(onEvents).forEach((eventName) => {
+              chartInstance.current?.off(eventName);
+            });
+          }
+          chartInstance.current.dispose();
+          chartInstance.current = null;
         }
-      },
-    });
+      };
+    };
 
-    // 获取适配器并初始化
-    const adapter = getAdapter(initConfig);
-    adapter.init();
+    // 执行异步初始化并获取清理函数
+    const cleanupPromise = initChart();
 
-    // 组件卸载时清理
+    // 返回清理函数
     return () => {
-      if (chartInstance.current) {
-        // 解绑事件
-        if (onEvents) {
-          Object.keys(onEvents).forEach((eventName) => {
-            chartInstance.current?.off(eventName);
-          });
-        }
-        chartInstance.current.dispose();
-        chartInstance.current = null;
-      }
+      cleanupPromise.then((cleanup) => cleanup?.());
     };
   }, [adapterConfig, onChartInit, onChartReady, onEvents]);
 
   // 更新配置
   useEffect(() => {
-    if (chartInstance.current) {
+    if (chartInstance.current && option) {
       chartInstance.current.setOption(option, true);
     }
   }, [option]);
@@ -118,18 +127,12 @@ const BaseChartWrapper: React.FC<BaseChartProps & { chartType: string }> = ({
     ...style,
   };
 
-  // 使用带有处理的适配器配置创建适配器实例
-  const adapter = getAdapter(adapterConfig);
-
   return (
     <div
       className={`taroviz-${chartType} ${className}`}
       style={mergedStyle}
       ref={containerRef as React.RefObject<HTMLDivElement>}
-    >
-      {/* 安全地渲染适配器 */}
-      {safeRenderAdapter(adapter)}
-    </div>
+    />
   );
 };
 

package/src/charts/funnel/index.tsx

@@ -1,18 +1,14 @@
 /**
- * 漏斗图组件
+ * FunnelChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { FunnelChartProps } from '../types';
-
 import '@/core/echarts';
 
-/**
- * 漏斗图组件
- */
-const FunnelChart: React.FC<FunnelChartProps> = (props) => (
+const FunnelChart: React.FC<FunnelChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="funnel-chart" />
-);
+));
+FunnelChart.displayName = 'FunnelChart';
 
 export default FunnelChart;

package/src/charts/gauge/index.tsx

@@ -1,18 +1,14 @@
 /**
- * 仪表盘组件
+ * GaugeChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { GaugeChartProps } from '../types';
-
 import '@/core/echarts';
 
-/**
- * 仪表盘组件
- */
-const GaugeChart: React.FC<GaugeChartProps> = (props) => (
+const GaugeChart: React.FC<GaugeChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="gauge-chart" />
-);
+));
+GaugeChart.displayName = 'GaugeChart';
 
 export default GaugeChart;

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

@@ -0,0 +1,41 @@
+/**
+ * @version v1.5.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import GraphChart from '../index';
+
+describe('GraphChart', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<GraphChart />);
+    expect(container).toBeTruthy();
+  });
+
+  it('renders with custom className', () => {
+    const { container } = render(<GraphChart className="test-graph" />);
+    expect(container.firstChild).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' });
+  });
+
+  it('renders with basic option', () => {
+    const option = {
+      series: [
+        {
+          type: 'graph' as const,
+          nodes: [
+            { id: '1', name: 'Node 1' },
+            { id: '2', name: 'Node 2' },
+          ],
+          links: [{ source: '1', target: '2' }],
+        },
+      ],
+    };
+    const { container } = render(<GraphChart option={option} />);
+    expect(container).toBeTruthy();
+  });
+});

package/src/charts/graph/index.tsx

@@ -0,0 +1,13 @@
+/**
+ * GraphChart组件
+ */
+import React, { memo } from 'react';
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { GraphChartProps } from '../types';
+
+const GraphChart: React.FC<GraphChartProps> = memo((props) => (
+  <BaseChartWrapper {...props} chartType="graph-chart" />
+));
+GraphChart.displayName = 'GraphChart';
+
+export default GraphChart;

package/src/charts/heatmap/index.tsx

@@ -1,18 +1,14 @@
 /**
- * 热力图组件
+ * HeatmapChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { HeatmapChartProps } from '../types';
-
 import '@/core/echarts';
 
-/**
- * 热力图组件
- */
-const HeatmapChart: React.FC<HeatmapChartProps> = (props) => (
+const HeatmapChart: React.FC<HeatmapChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="heatmap-chart" />
-);
+));
+HeatmapChart.displayName = 'HeatmapChart';
 
 export default HeatmapChart;

package/src/charts/index.ts

@@ -17,10 +17,15 @@ export { default as TreeMapChart } from './treemap';
 export { default as SunburstChart } from './sunburst';
 export { default as SankeyChart } from './sankey';
 
+// 导出新增图表组件
+export { default as GraphChart } from './graph';
+export { default as CandlestickChart } from './candlestick';
+export { default as WordCloudChart } from './wordcloud';
+
 // 导出类型定义
 export * from './types';
 
 /**
  * 版本信息
  */
-export const version = '1.2.1';
+export const version = '1.4.0';

package/src/charts/line/index.tsx

@@ -1,18 +1,15 @@
 /**
  * 折线图组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { LineChartProps } from '../types';
 
 import '@/core/echarts';
 
-/**
- * 折线图组件
- */
-const LineChart: React.FC<LineChartProps> = (props) => (
+const LineChart: React.FC<LineChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="line-chart" />
-);
+));
+LineChart.displayName = 'LineChart';
 
 export default LineChart;

package/src/charts/pie/index.tsx

@@ -1,19 +1,14 @@
 /**
- * 饼图组件
+ * PieChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { BaseChartProps } from '../types';
-
-// 导入统一注册的 echarts
 import '@/core/echarts';
 
-/**
- * 饼图组件
- */
-const PieChart: React.FC<BaseChartProps> = (props) => (
+const PieChart: React.FC<BaseChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="pie-chart" />
-);
+));
+PieChart.displayName = 'PieChart';
 
 export default PieChart;

package/src/charts/radar/index.tsx

@@ -1,18 +1,14 @@
 /**
- * 雷达图组件
+ * RadarChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { RadarChartProps } from '../types';
-
 import '@/core/echarts';
 
-/**
- * 雷达图组件
- */
-const RadarChart: React.FC<RadarChartProps> = (props) => (
+const RadarChart: React.FC<RadarChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="radar-chart" />
-);
+));
+RadarChart.displayName = 'RadarChart';
 
 export default RadarChart;

package/src/charts/scatter/index.tsx

@@ -1,18 +1,14 @@
 /**
- * 散点图组件
+ * ScatterChart组件
  */
-import React from 'react';
-
+import React, { memo } from 'react';
 import BaseChartWrapper from '../common/BaseChartWrapper';
 import { ScatterChartProps } from '../types';
-
 import '@/core/echarts';
 
-/**
- * 散点图组件
- */
-const ScatterChart: React.FC<ScatterChartProps> = (props) => (
+const ScatterChart: React.FC<ScatterChartProps> = memo((props) => (
   <BaseChartWrapper {...props} chartType="scatter-chart" />
-);
+));
+ScatterChart.displayName = 'ScatterChart';
 
 export default ScatterChart;

package/src/charts/types.ts

@@ -713,7 +713,7 @@ export interface SankeyChartProps extends BaseChartProps {
  * 箱线图属性
  * 用于展示数据的分布情况
  */
-export interface BoxplotChartProps extends BaseChartProps {
+export interface BoxplotChartProps extends Omit<BaseChartProps, 'data'> {
   /** 图表类型 */
   type?: 'boxplot';
 
@@ -743,9 +743,9 @@ export interface BoxplotChartProps extends BaseChartProps {
  * K线图/股票图属性
  * 用于展示股票、外汇等金融数据
  */
-export interface CandlestickChartProps extends BaseChartProps {
+export interface CandlestickChartProps extends Omit<BaseChartProps, 'data'> {
   /** K线数据数组，每项为 [open, close, lowest, highest] */
-  data?: number[][];
+  candlestickData?: number[][];
 
   /** X轴数据 */
   xAxisData?: (string | number)[];
@@ -874,4 +874,48 @@ export interface ChartBuilderOptions<T extends BaseChartProps = BaseChartProps>
 }
 
 // 重新导出 ECharts 类型
-export type { EChartsOption, ECharts, EChartsCoreOption };
+export type { EChartsOption, ECharts } from 'echarts';
+
+// EChartsCoreOption 是 ECBasicOption 的别名
+export type { ECBasicOption as EChartsCoreOption } from 'echarts/types/dist/shared';
+
+/**
+ * 词云图属性
+ * 用于展示文本数据的词频分布
+ */
+export interface WordCloudChartProps extends BaseChartProps {
+  /** 词云数据 - 也可以通过 option.series[0].data 传入 */
+  wordCloudData?: Array<{
+    name: string;
+    value: number;
+    textStyle?: Record<string, unknown>;
+    emphasis?: Record<string, unknown>;
+  }>;
+
+  /** 词云形状 */
+  shape?: 'circle' | 'cardioid' | 'diamond' | 'triangle' | 'star' | 'pentagon' | 'square';
+
+  /** 字体大小范围 */
+  sizeRange?: [number, number];
+
+  /** 词云旋转角度范围 */
+  rotationRange?: [number, number];
+
+  /** 旋转步长 */
+  rotationStep?: number;
+
+  /** 词云间距 */
+  gridSize?: number;
+
+  /** 是否绘制词云轮廓 */
+  drawOutOfBound?: boolean;
+
+  /** 文字样式 */
+  textStyle?: Record<string, unknown>;
+
+  /** 强调状态 */
+  emphasis?: {
+    focus?: 'self' | 'adjacency';
+    textStyle?: Record<string, unknown>;
+  };
+}

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

@@ -0,0 +1,36 @@
+/**
+ * @version v1.5.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import WordCloudChart from '../index';
+
+describe('WordCloudChart', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<WordCloudChart />);
+    expect(container).toBeTruthy();
+  });
+
+  it('renders with custom width and height', () => {
+    const { container } = render(<WordCloudChart width={600} height={400} />);
+    expect(container.firstChild).toHaveStyle({ width: '600px', height: '400px' });
+  });
+
+  it('renders with word data', () => {
+    const option = {
+      series: [
+        {
+          type: 'wordCloud' as const,
+          data: [
+            { name: 'JavaScript', value: 10000 },
+            { name: 'TypeScript', value: 8000 },
+            { name: 'React', value: 6000 },
+          ],
+        },
+      ],
+    } as any;
+    const { container } = render(<WordCloudChart option={option} />);
+    expect(container).toBeTruthy();
+  });
+});

package/src/charts/wordcloud/index.tsx

@@ -0,0 +1,13 @@
+/**
+ * WordCloudChart组件
+ */
+import React, { memo } from 'react';
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { WordCloudChartProps } from '../types';
+
+const WordCloudChart: React.FC<WordCloudChartProps> = memo((props) => (
+  <BaseChartWrapper {...props} chartType="wordcloud-chart" />
+));
+WordCloudChart.displayName = 'WordCloudChart';
+
+export default WordCloudChart;

package/src/core/animation/AnimationManager.ts

@@ -141,6 +141,9 @@ export class AnimationManager {
   public static getInstance(config?: AnimationManagerConfig): AnimationManager {
     if (!AnimationManager.instance) {
       AnimationManager.instance = new AnimationManager(config);
+    } else if (config) {
+      // 如果传入了新配置，更新配置
+      AnimationManager.instance.updateConfig(config);
     }
     return AnimationManager.instance;
   }
@@ -345,6 +348,18 @@ export class AnimationManager {
     };
   }
 
+  /**
+   * 更新配置
+   */
+  public updateConfig(config: AnimationManagerConfig): void {
+    if (config.defaultConfig) {
+      this.defaultConfig = config.defaultConfig;
+    }
+    if (config.performance) {
+      this.updatePerformanceConfig(config.performance);
+    }
+  }
+
   /**
    * 获取性能配置
    */

package/src/core/components/Annotation.tsx

@@ -2,7 +2,7 @@
  * TaroViz 图表标注组件
  * 支持在图表上添加标记线、标记区域、散点等标注
  */
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import type { EChartsOption } from 'echarts';
 
 /**
@@ -209,7 +209,9 @@ export function convertAnnotationToMarkArea(config: MarkAreaConfig): EChartsOpti
 /**
  * 将散点标注配置转换为 ECharts 格式
  */
-export function convertAnnotationToScatter(config: ScatterAnnotationConfig): EChartsOption['series'] {
+export function convertAnnotationToScatter(
+  config: ScatterAnnotationConfig
+): EChartsOption['series'] {
   const { data, symbol, symbolSize, itemStyle, label } = config;
 
   return [
@@ -227,7 +229,7 @@ export function convertAnnotationToScatter(config: ScatterAnnotationConfig): ECh
         },
         data,
       },
-    },
+    } as any,
   ];
 }
 
@@ -239,18 +241,22 @@ export function useAnnotation(props: AnnotationProps): EChartsOption {
   const { type, markLine, markArea, scatter } = props;
 
   return useMemo(() => {
-    const series: EChartsOption['series'] = [];
+    // 使用 any 避免类型复杂性问题
+    const series: any[] = [];
 
     if (type === 'line' && markLine) {
-      series.push(...convertAnnotationToMarkLine(markLine));
+      const markLineResult = convertAnnotationToMarkLine(markLine);
+      series.push(...(Array.isArray(markLineResult) ? markLineResult : [markLineResult]));
     }
 
     if (type === 'area' && markArea) {
-      series.push(...convertAnnotationToMarkArea(markArea));
+      const markAreaResult = convertAnnotationToMarkArea(markArea);
+      series.push(...(Array.isArray(markAreaResult) ? markAreaResult : [markAreaResult]));
     }
 
     if (type === 'scatter' && scatter) {
-      series.push(...convertAnnotationToScatter(scatter));
+      const scatterResult = convertAnnotationToScatter(scatter);
+      series.push(...(Array.isArray(scatterResult) ? scatterResult : [scatterResult]));
     }
 
     return { series };
@@ -263,46 +269,42 @@ export function useAnnotation(props: AnnotationProps): EChartsOption {
 export const AnnotationPresets = {
   /** 平均线 */
   averageLine: (color = '#1890ff'): MarkLineConfig => ({
-    data: [{ type: 'average', name: '平均值' }],
+    data: [{ type: 'average', name: '平均值' }] as any,
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 最大值线 */
   maxLine: (color = '#f5222d'): MarkLineConfig => ({
-    data: [{ type: 'max', name: '最大值' }],
+    data: [{ type: 'max', name: '最大值' }] as any,
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 最小值线 */
   minLine: (color = '#52c41a'): MarkLineConfig => ({
-    data: [{ type: 'min', name: '最小值' }],
+    data: [{ type: 'min', name: '最小值' }] as any,
     lineStyle: { color, type: 'dashed', width: 2 },
     label: { show: true, position: 'end', color },
   }),
 
   /** 警戒线 */
   thresholdLine: (value: number, color = '#faad14'): MarkLineConfig => ({
-    data: [{ yAxis: value, name: '警戒线' }],
+    data: [{ yAxis: value, name: '警戒线' }] as any,
     lineStyle: { color, type: 'solid', width: 2 },
     label: { show: true, position: 'start', color },
   }),
 
   /** 目标区域 */
   targetArea: (min: number, max: number, color = 'rgba(82, 196, 26, 0.1)'): MarkAreaConfig => ({
-    data: [
-      [{ yAxis: min }, { yAxis: max }],
-    ],
+    data: [[{ yAxis: min }, { yAxis: max }]],
     style: { color, opacity: 0.3 },
     label: { show: true, position: 'inside', color: '#52c41a' },
   }),
 
   /** 预警区域 */
   warningArea: (min: number, max: number, color = 'rgba(250, 173, 20, 0.1)'): MarkAreaConfig => ({
-    data: [
-      [{ yAxis: min }, { yAxis: max }],
-    ],
+    data: [[{ yAxis: min }, { yAxis: max }]],
     style: { color, opacity: 0.3 },
     label: { show: true, position: 'inside', color: '#faad14' },
   }),
@@ -319,17 +321,20 @@ export function createCompositeAnnotation(
     scatter?: ScatterAnnotationConfig;
   }>
 ): EChartsOption {
-  const allSeries: EChartsOption['series'] = [];
+  const allSeries: any[] = [];
 
   annotations.forEach((annotation) => {
     if (annotation.type === 'line' && annotation.markLine) {
-      allSeries.push(...convertAnnotationToMarkLine(annotation.markLine));
+      const result = convertAnnotationToMarkLine(annotation.markLine);
+      allSeries.push(...(Array.isArray(result) ? result : [result]));
     }
     if (annotation.type === 'area' && annotation.markArea) {
-      allSeries.push(...convertAnnotationToMarkArea(annotation.markArea));
+      const result = convertAnnotationToMarkArea(annotation.markArea);
+      allSeries.push(...(Array.isArray(result) ? result : [result]));
     }
     if (annotation.type === 'scatter' && annotation.scatter) {
-      allSeries.push(...convertAnnotationToScatter(annotation.scatter));
+      const result = convertAnnotationToScatter(annotation.scatter);
+      allSeries.push(...(Array.isArray(result) ? result : [result]));
     }
   });