@agions/taroviz 1.6.0 → 1.9.0

package/src/charts/liquid/index.tsx

@@ -0,0 +1,227 @@
+/**
+ * 水球图组件
+ * ECharts 没有内置水球图，使用 echarts-liquidfill 库实现
+ */
+import React, { memo, useEffect, useRef, useMemo } from 'react';
+import type { EChartsType, ECElementEvent } from 'echarts';
+import { getAdapter } from '../../adapters';
+import { uuid } from '../../core/utils';
+import { processAdapterConfig } from '../utils';
+import { LiquidChartProps } from './types';
+
+/**
+ * 水球图组件
+ * 使用 echarts-liquidfill 实现
+ */
+const LiquidChart: React.FC<LiquidChartProps> = memo((props) => {
+  const {
+    option,
+    width = '100%',
+    height = '300px',
+    theme,
+    style = {},
+    className = '',
+    autoResize = true,
+    loading = false,
+    loadingOption,
+    onChartInit,
+    onChartReady,
+    renderer = 'canvas',
+    onEvents = {},
+    waveData = [0.6],
+    shape = 'circle',
+    amplitude,
+    waveLength,
+    phase,
+    period,
+    backgroundColor = 'transparent',
+    color,
+    showLabel = true,
+    labelFormatter,
+  } = props;
+
+  const chartId = useRef<string>(`liquid-${uuid()}`);
+  const chartInstance = useRef<EChartsType | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const extensionRegistered = useRef<boolean>(false);
+
+  // 构建水球图配置
+  const liquidOption = useMemo(() => {
+    const baseOption = option || {};
+
+    // 如果用户提供了 option，直接返回
+    if (baseOption.series && baseOption.series.length > 0) {
+      return baseOption;
+    }
+
+    // 构建水球图 series
+    const seriesData = waveData.map((value) => {
+      const dataItem: Record<string, unknown> = { value };
+
+      if (showLabel && labelFormatter) {
+        dataItem.label = {
+          formatter: labelFormatter(value),
+        };
+      }
+
+      return dataItem;
+    });
+
+    const seriesConfig: Record<string, unknown> = {
+      type: 'liquidFill',
+      data: waveData,
+      shape,
+      backgroundColor,
+      color: color || ['#4cabce', '#4cabce'],
+      label: showLabel
+        ? {
+            show: true,
+            formatter: labelFormatter
+              ? (params: ECElementEvent) => labelFormatter(params.value as number)
+              : '{d}%',
+            textStyle: {
+              fontSize: 20,
+              fontWeight: 'bold',
+            },
+          }
+        : { show: false },
+    };
+
+    // 添加可选参数
+    if (amplitude !== undefined) {
+      seriesConfig.amplitude = amplitude;
+    }
+    if (waveLength !== undefined) {
+      seriesConfig.waveLength = waveLength;
+    }
+    if (phase !== undefined) {
+      seriesConfig.phase = phase;
+    }
+    if (period !== undefined) {
+      seriesConfig.period = period;
+    }
+
+    return {
+      ...baseOption,
+      series: [seriesConfig],
+    };
+  }, [option, waveData, shape, backgroundColor, color, showLabel, labelFormatter, amplitude, waveLength, phase, period]);
+
+  // 处理图表初始化
+  useEffect(() => {
+    let mounted = true;
+
+    const initChart = async (): Promise<(() => void) | undefined> => {
+      // 动态导入 echarts-liquidfill 并注册扩展
+      if (!extensionRegistered.current) {
+        try {
+          // eslint-disable-next-line @typescript-eslint/no-require-imports
+          const liquidfill = require('echarts-liquidfill');
+          if (liquidfill && mounted) {
+            liquidfill.register && liquidfill.register();
+            extensionRegistered.current = true;
+          }
+        } catch (e) {
+          console.warn('[TaroViz] LiquidChart: Failed to load echarts-liquidfill extension', e);
+          return undefined;
+        }
+      }
+
+      if (!mounted || !containerRef.current) return undefined;
+
+      const initConfig = processAdapterConfig({
+        canvasId: chartId.current,
+        containerRef,
+        width,
+        height,
+        theme,
+        autoResize,
+        renderer,
+        option: liquidOption,
+        onInit: (instance: EChartsType) => {
+          chartInstance.current = instance;
+
+          // 绑定事件
+          if (onEvents) {
+            Object.entries(onEvents).forEach(([eventName, handler]) => {
+              (instance as unknown as { on: (e: string, h: unknown) => void }).on(eventName, handler);
+            });
+          }
+
+          if (onChartInit) {
+            onChartInit(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;
+        }
+      };
+    };
+
+    let cleanupFn: (() => void) | undefined;
+    initChart().then((cleanup) => {
+      cleanupFn = cleanup;
+    });
+
+    return () => {
+      mounted = false;
+      cleanupFn?.();
+    };
+  }, [liquidOption, width, height, theme, autoResize, renderer, onChartInit, onChartReady, onEvents]);
+
+  // 更新配置
+  useEffect(() => {
+    if (chartInstance.current && liquidOption) {
+      chartInstance.current.setOption(liquidOption, true);
+    }
+  }, [liquidOption]);
+
+  // 控制加载状态
+  useEffect(() => {
+    if (chartInstance.current) {
+      if (loading) {
+        chartInstance.current.showLoading(loadingOption);
+      } else {
+        chartInstance.current.hideLoading();
+      }
+    }
+  }, [loading, loadingOption]);
+
+  // 自定义样式
+  const mergedStyle = {
+    width: typeof width === 'number' ? `${width}px` : width,
+    height: typeof height === 'number' ? `${height}px` : height,
+    ...style,
+  };
+
+  return (
+    <div
+      className={`taroviz-liquid ${className}`}
+      style={mergedStyle}
+      ref={containerRef as React.RefObject<HTMLDivElement>}
+    />
+  );
+});
+
+LiquidChart.displayName = 'LiquidChart';
+
+export default LiquidChart;
+
+// 导出类型
+export type { LiquidChartProps, LiquidOption, LiquidShape, LiquidSeries, LiquidSeriesDataItem } from './types';

package/src/charts/liquid/types.ts

@@ -0,0 +1,130 @@
+/**
+ * 水球图类型定义
+ * ECharts 没有内置水球图，使用 echarts-liquidfill 库实现
+ */
+import type React from 'react';
+import type { EChartsOption, EChartsType, ECElementEvent } from 'echarts';
+
+// ============================================================================
+// 水球图配置类型
+// ============================================================================
+
+/** 水球图系列数据项 */
+export interface LiquidSeriesDataItem {
+  /** 数据值，范围 [0, 1] */
+  value: number;
+  /** 数据项名称 */
+  name?: string;
+  /** 图形样式 */
+  itemStyle?: Record<string, unknown>;
+  /** 标签配置 */
+  label?: Record<string, unknown>;
+  /** 强调状态 */
+  emphasis?: Record<string, unknown>;
+}
+
+/** 水球图形状类型 */
+export type LiquidShape = 'circle' | 'rect' | 'roundRect';
+
+/** 水球图系列配置 */
+export interface LiquidSeries {
+  /** 系列类型 */
+  type?: 'liquidFill';
+  /** 系列名称 */
+  name?: string;
+  /** 数据数组 */
+  data?: (number | LiquidSeriesDataItem)[];
+  /** 图形形状 */
+  shape?: LiquidShape;
+  /** 振幅 (相对于半径的比例) */
+  amplitude?: number;
+  /** 波长 (相对于画布宽度) */
+  waveLength?: number | string;
+  /** 相位偏移 */
+  phase?: number;
+  /** 周期时间 (ms) */
+  period?: number;
+  /** 波的个数 */
+  waveCount?: number;
+  /** 是否禁用动画 */
+  animationDisabled?: boolean;
+  /** 动画时长 */
+  animationDuration?: number;
+  /** 动画缓动函数 */
+  animationEasing?: string;
+  /** 动画延迟 */
+  animationDelay?: number | ((idx: number) => number);
+  /** 颜色数组 */
+  color?: string[];
+  /** 背景色 */
+  backgroundColor?: string;
+  /** 图形内标签 */
+  label?: Record<string, unknown>;
+  /** 图形样式 */
+  itemStyle?: Record<string, unknown>;
+  /** emphasis状态 */
+  emphasis?: Record<string, unknown>;
+  /** 浪的样式 */
+  waveStyle?: Record<string, unknown>;
+}
+
+/** 水球图选项配置 */
+export interface LiquidOption extends Omit<EChartsOption, 'series'> {
+  series?: LiquidSeries[];
+}
+
+// ============================================================================
+// 组件 Props
+// ============================================================================
+
+/**
+ * 水球图组件属性
+ */
+export interface LiquidChartProps {
+  /** 图表配置项 (EChartsOption) */
+  option?: LiquidOption;
+  /** 宽度 */
+  width?: string | number;
+  /** 高度 */
+  height?: string | number;
+  /** 水球数据数组，每个值代表一个波纹，范围 [0, 1] */
+  waveData?: number[];
+  /** 图形形状 */
+  shape?: LiquidShape;
+  /** 振幅 (相对于半径的比例) */
+  amplitude?: number;
+  /** 波长 (相对于画布宽度) */
+  waveLength?: number | string;
+  /** 相位偏移 */
+  phase?: number;
+  /** 周期时间 (ms) */
+  period?: number;
+  /** 背景色 */
+  backgroundColor?: string;
+  /** 颜色数组 */
+  color?: string[];
+  /** 是否显示标签 */
+  showLabel?: boolean;
+  /** 标签格式化 */
+  labelFormatter?: (value: number) => string;
+  /** 主题 */
+  theme?: string | Record<string, unknown>;
+  /** 样式 */
+  style?: React.CSSProperties;
+  /** 类名 */
+  className?: string;
+  /** 是否自动调整大小 */
+  autoResize?: boolean;
+  /** 渲染器类型 */
+  renderer?: 'canvas' | 'svg';
+  /** 加载状态 */
+  loading?: boolean;
+  /** 加载配置 */
+  loadingOption?: Record<string, unknown>;
+  /** 图表初始化回调 */
+  onChartInit?: (chart: EChartsType) => void;
+  /** 图表就绪回调 */
+  onChartReady?: (chart: EChartsType) => void;
+  /** 事件回调 */
+  onEvents?: Record<string, (params: ECElementEvent) => void>;
+}

package/src/charts/tree/index.tsx

@@ -0,0 +1,117 @@
+/**
+ * 树图组件
+ * ECharts 内置 tree 类型
+ */
+import React, { memo, useMemo } from 'react';
+import BaseChartWrapper from '../common/BaseChartWrapper';
+import { TreeChartProps, TreeSeries } from './types';
+
+/**
+ * 树图组件
+ */
+const TreeChart: React.FC<TreeChartProps> = memo((props) => {
+  const {
+    option,
+    treeData,
+    layout = 'orthogonal',
+    orient = 'horizontal',
+    nodeGap,
+    nodeWidth,
+    initialTreeDepth,
+    symbol,
+    symbolSize,
+    showLine = true,
+    lineCurveness,
+    label,
+    labelPosition,
+    labelAlign,
+    lineStyle,
+    itemStyle,
+    ...restProps
+  } = props;
+
+  // 构建树图配置
+  const mergedOption = useMemo(() => {
+    const baseOption = option || {};
+
+    // 如果用户提供了 series，直接返回
+    if (baseOption.series && baseOption.series.length > 0) {
+      return baseOption;
+    }
+
+    // 构建树图 series
+    const seriesConfig: TreeSeries = {
+      type: 'tree',
+      layout,
+      orient,
+      data: treeData,
+      showLine,
+    };
+
+    // 添加可选参数
+    if (nodeGap !== undefined) {
+      seriesConfig.nodeGap = nodeGap;
+    }
+    if (nodeWidth !== undefined) {
+      seriesConfig.nodeWidth = nodeWidth;
+    }
+    if (initialTreeDepth !== undefined) {
+      seriesConfig.initialTreeDepth = initialTreeDepth;
+    }
+    if (symbol !== undefined) {
+      seriesConfig.symbol = symbol;
+    }
+    if (symbolSize !== undefined) {
+      seriesConfig.symbolSize = symbolSize;
+    }
+    if (lineCurveness !== undefined) {
+      seriesConfig.lineCurveness = lineCurveness;
+    }
+    if (label !== undefined) {
+      seriesConfig.label = label;
+    }
+    if (labelPosition !== undefined) {
+      seriesConfig.labelPosition = labelPosition;
+    }
+    if (labelAlign !== undefined) {
+      seriesConfig.labelAlign = labelAlign;
+    }
+    if (lineStyle !== undefined) {
+      seriesConfig.lineStyle = lineStyle;
+    }
+    if (itemStyle !== undefined) {
+      seriesConfig.itemStyle = itemStyle;
+    }
+
+    return {
+      ...baseOption,
+      series: [seriesConfig],
+    };
+  }, [
+    option,
+    treeData,
+    layout,
+    orient,
+    nodeGap,
+    nodeWidth,
+    initialTreeDepth,
+    symbol,
+    symbolSize,
+    showLine,
+    lineCurveness,
+    label,
+    labelPosition,
+    labelAlign,
+    lineStyle,
+    itemStyle,
+  ]);
+
+  return <BaseChartWrapper {...restProps} option={mergedOption as any} chartType="tree" />;
+});
+
+TreeChart.displayName = 'TreeChart';
+
+export default TreeChart;
+
+// 导出类型
+export type { TreeChartProps, TreeOption, TreeNode, TreeSeries } from './types';

package/src/charts/tree/types.ts

@@ -0,0 +1,174 @@
+/**
+ * 树图类型定义
+ * ECharts 内置 tree 类型
+ */
+import type { EChartsOption } from 'echarts';
+
+// ============================================================================
+// 树图数据节点
+// ============================================================================
+
+/**
+ * 树图数据节点
+ */
+export interface TreeNode {
+  /** 节点名称 */
+  name: string;
+  /** 节点值 */
+  value?: number;
+  /** 是否展开 */
+  collapsed?: boolean;
+  /** 图标 */
+  icon?: string;
+  /** 图形 */
+  symbol?: string;
+  /** 图形大小 */
+  symbolSize?: number | [number, number];
+  /** 标签配置 */
+  label?: Record<string, unknown>;
+  /** 元素样式 */
+  itemStyle?: Record<string, unknown>;
+  /** emphasis状态 */
+  emphasis?: Record<string, unknown>;
+  /** 线条样式 */
+  lineStyle?: Record<string, unknown>;
+  /** 子节点 */
+  children?: TreeNode[];
+  /** 其他自定义属性 */
+  [key: string]: any;
+}
+
+// ============================================================================
+// 树图系列配置
+// ============================================================================
+
+/** 树图系列配置 */
+export interface TreeSeries {
+  /** 系列类型 */
+  type?: 'tree';
+  /** 系列名称 */
+  name?: string;
+  /** 数据数组 (树的根节点) */
+  data?: TreeNode[];
+  /** 树的布局: 'orthogonal' | 'radial' */
+  layout?: string;
+  /** 树的方向: 'horizontal' | 'vertical' */
+  orient?: string;
+  /** 节点之间的间距 */
+  nodeGap?: number;
+  /** 节点的宽度 */
+  nodeWidth?: number;
+  /** 展开层级 */
+  initialTreeDepth?: number;
+  /** 标签配置 */
+  label?: Record<string, unknown>;
+  /** 标签位置 */
+  labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+  /** 标签对齐 */
+  labelAlign?: 'left' | 'right' | 'center';
+  /** 标签格式化 */
+  labelFormatter?: string | ((value: number, data: TreeNode) => string);
+  /** 线条样式 */
+  lineStyle?: Record<string, unknown>;
+  /** 是否显示连接线 */
+  showLine?: boolean;
+  /** 连接线的弯曲度 */
+  lineCurveness?: number;
+  /** 树节点图形 */
+  symbol?: string;
+  /** 树节点大小 */
+  symbolSize?: number | [number, number];
+  /** 图形内标签 */
+  innerLabel?: Record<string, unknown>;
+  /** 元素样式 */
+  itemStyle?: Record<string, unknown>;
+  /** emphasis状态 */
+  emphasis?: Record<string, unknown>;
+  /** 聚焦状态 */
+  focus?: Record<string, unknown>;
+  /** leaves配置 */
+  leaves?: Record<string, unknown>;
+  /** 动画配置 */
+  animation?: boolean;
+  /** 动画时长 */
+  animationDuration?: number;
+  /** 动画缓动函数 */
+  animationEasing?: string;
+  /** 动画延迟 */
+  animationDelay?: number | ((idx: number) => number);
+  /** 动画更新时长 */
+  animationDurationUpdate?: number;
+  /** 动画更新缓动函数 */
+  animationEasingUpdate?: string;
+}
+
+/** 树图选项配置 */
+export interface TreeOption extends Omit<EChartsOption, 'series'> {
+  series?: TreeSeries[];
+}
+
+// ============================================================================
+// 组件 Props
+// ============================================================================
+
+/**
+ * 树图组件属性
+ */
+export interface TreeChartProps {
+  /** 图表配置项 (EChartsOption) */
+  option?: TreeOption;
+  /** 宽度 */
+  width?: string | number;
+  /** 高度 */
+  height?: string | number;
+  /** 树形数据 */
+  treeData?: TreeNode[];
+  /** 树的布局: 'orthogonal' (直角树) | 'radial' (辐射树) */
+  layout?: 'orthogonal' | 'radial';
+  /** 树的方向: 'horizontal' (水平) | 'vertical' (垂直) */
+  orient?: 'horizontal' | 'vertical';
+  /** 节点之间的间距 */
+  nodeGap?: number;
+  /** 节点的宽度 */
+  nodeWidth?: number;
+  /** 展开层级 */
+  initialTreeDepth?: number;
+  /** 节点图形 */
+  symbol?: string;
+  /** 节点大小 */
+  symbolSize?: number | [number, number];
+  /** 是否显示连接线 */
+  showLine?: boolean;
+  /** 连接线的弯曲度 */
+  lineCurveness?: number;
+  /** 标签配置 */
+  label?: Record<string, unknown>;
+  /** 标签位置 */
+  labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+  /** 标签对齐 */
+  labelAlign?: 'left' | 'right' | 'center';
+  /** 线条样式 */
+  lineStyle?: Record<string, unknown>;
+  /** 元素样式 */
+  itemStyle?: Record<string, unknown>;
+  /** 主题 */
+  theme?: string | Record<string, unknown>;
+  /** 样式 */
+  style?: React.CSSProperties;
+  /** 类名 */
+  className?: string;
+  /** 是否自动调整大小 */
+  autoResize?: boolean;
+  /** 渲染器类型 */
+  renderer?: 'canvas' | 'svg';
+  /** 加载状态 */
+  loading?: boolean;
+  /** 加载配置 */
+  loadingOption?: Record<string, unknown>;
+  /** 图表初始化回调 */
+  onChartInit?: (chart: any) => void;
+  /** 图表就绪回调 */
+  onChartReady?: (chart: any) => void;
+  /** 事件回调 */
+  onEvents?: Record<string, (params: any) => 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;