@agions/taroviz 1.11.1 → 2.0.3

package/src/components/DataFilter/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * DataFilter - 数据筛选器 UI 组件
  * 提供独立的数据筛选交互界面，支持多种筛选类型
@@ -32,7 +33,15 @@ export interface FilterField {
 }
 
 /** 筛选值类型 */
-export type FilterValue = string | number | boolean | [number, number] | [string, string] | string[] | number[] | undefined;
+export type FilterValue =
+  | string
+  | number
+  | boolean
+  | [number, number]
+  | [string, string]
+  | string[]
+  | number[]
+  | undefined;
 
 /** 筛选器完整值 */
 export interface FilterValues {
@@ -74,7 +83,8 @@ export interface DataFilterProps {
 // ============================================================================
 
 const BASE_STYLE: React.CSSProperties = {
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
   fontSize: '14px',
   color: '#333',
 };
@@ -122,7 +132,13 @@ interface SelectFilterProps {
   compact?: boolean;
 }
 
-const SelectFilter: React.FC<SelectFilterProps> = ({ field, value, onChange, disabled, compact }) => {
+const SelectFilter: React.FC<SelectFilterProps> = ({
+  field,
+  value,
+  onChange,
+  disabled,
+  compact,
+}) => {
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       const val = e.target.value;
@@ -241,7 +257,13 @@ interface CheckboxFilterProps {
   compact?: boolean;
 }
 
-const CheckboxFilter: React.FC<CheckboxFilterProps> = ({ field, value, onChange, disabled, compact }) => {
+const CheckboxFilter: React.FC<CheckboxFilterProps> = ({
+  field,
+  value,
+  onChange,
+  disabled,
+  compact,
+}) => {
   const selectedValues = useMemo(() => {
     if (Array.isArray(value)) {
       return new Set(value.map(String));
@@ -380,13 +402,13 @@ const DateFilter: React.FC<DateFilterProps> = ({ field, value, onChange, disable
  * ```tsx
  * <DataFilter
  *   fields={[
- *     { key: 'category', label: '分类', type: 'select', options: [{ label: '苹果', value: 'apple' }] },
- *     { key: 'price', label: '价格区间', type: 'range', min: 0, max: 1000 },
- *     { key: 'tags', label: '标签', type: 'checkbox', options: [{ label: '热门', value: 'hot' }] },
- *     { key: 'date', label: '日期', type: 'date' },
+ *     { _key: 'category', label: '分类', type: 'select', options: [{ label: '苹果', _value: 'apple' }] },
+ *     { _key: 'price', label: '价格区间', type: 'range', min: 0, max: 1000 },
+ *     { _key: 'tags', label: '标签', type: 'checkbox', options: [{ label: '热门', _value: 'hot' }] },
+ *     { _key: 'date', label: '日期', type: 'date' },
  *   ]}
- *   value={filters}
- *   onChange={(filters) => setFilters(filters)}
+ *   _value={_filters}
+ *   onChange={(_filters) => setFilters(_filters)}
  *   layout="horizontal"
  *   showReset
  * />

package/src/core/animation/types.ts

@@ -241,33 +241,33 @@ export enum AnimationEventType {
   /**
    * 动画开始事件
    */
-  ANIMATION_START = 'animationStart',
+  _ANIMATION_START = 'animationStart',
 
   /**
    * 动画更新事件
    */
-  ANIMATION_UPDATE = 'animationUpdate',
+  _ANIMATION_UPDATE = 'animationUpdate',
 
   /**
    * 动画结束事件
    */
-  ANIMATION_END = 'animationEnd',
+  _ANIMATION_END = 'animationEnd',
 
   /**
    * 动画取消事件
    */
-  ANIMATION_CANCEL = 'animationCancel',
+  _ANIMATION_CANCEL = 'animationCancel',
 
   /**
    * 动画重复事件
    */
-  ANIMATION_REPEAT = 'animationRepeat',
+  _ANIMATION_REPEAT = 'animationRepeat',
 }
 
 /**
  * 动画事件回调类型
  */
-export type AnimationEventHandler = (event: {
+export type AnimationEventHandler = (_event: {
   type: AnimationEventType;
   animationType: AnimationType;
   chartId?: string;

package/src/core/components/Annotation.tsx

@@ -57,7 +57,7 @@ export interface MarkLineConfig {
   label?: {
     show?: boolean;
     position?: 'start' | 'middle' | 'end' | 'insideStartBottom' | 'insideStartTop';
-    formatter?: string | ((value: any) => string);
+    formatter?: string | ((_value: unknown) => string);
     color?: string;
     fontSize?: number;
   };
@@ -81,7 +81,7 @@ export interface MarkAreaConfig {
   label?: {
     show?: boolean;
     position?: 'top' | 'bottom' | 'left' | 'right' | 'inside';
-    formatter?: string | ((value: any) => string);
+    formatter?: string | ((_value: unknown) => string);
     color?: string;
     fontSize?: number;
   };
@@ -98,7 +98,7 @@ export interface ScatterAnnotationConfig {
   /** 数据点 */
   data: Array<{
     coord: [number | string, number];
-    value?: number;
+    _value?: number;
     name: string;
   }>;
   /** 符号类型 */
@@ -111,7 +111,7 @@ export interface ScatterAnnotationConfig {
   label?: {
     show?: boolean;
     position?: string;
-    formatter?: string | ((value: unknown) => string);
+    formatter?: string | ((_value: unknown) => string);
     color?: string;
   };
 }
@@ -243,7 +243,6 @@ export function useAnnotation(props: AnnotationProps): EChartsOption {
   const { type, markLine, markArea, scatter } = props;
 
   return useMemo(() => {
-    // 使用 any 避免类型复杂性问题
     const series: any[] = [];
 
     if (type === 'line' && markLine) {
@@ -291,8 +290,8 @@ export const AnnotationPresets = {
   }),
 
   /** 警戒线 */
-  thresholdLine: (value: number, color = '#faad14'): MarkLineConfig => ({
-    data: [{ yAxis: value, name: '警戒线' }],
+  thresholdLine: (_value: number, color = '#faad14'): MarkLineConfig => ({
+    data: [{ yAxis: _value, name: '警戒线' }],
     lineStyle: { color, type: 'solid', width: 2 },
     label: { show: true, position: 'start', color },
   }),

package/src/core/components/BaseChart.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * TaroViz 基础图表组件
  * 所有图表组件的基类
@@ -6,21 +7,22 @@
  * 所有具体的图表组件（如折线图、柱状图等）都继承自该组件
  */
 import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import { deepClone } from '../utils/deepClone';
 
 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';
 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,
+  ChartEventParams,
+  ChartExportOptions,
+  ChartLinkageConfig,
 } from '../types/common';
 import type { ECElementEvent } from 'echarts';
 
@@ -28,46 +30,8 @@ import type { ECElementEvent } from 'echarts';
 // 接口定义
 // ============================================================================
 
-/** 图表事件参数类型 */
-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;
-}
-
-/** 图表导出选项 */
-export interface ChartExportOptions {
-  type?: 'png' | 'jpeg' | 'svg';
-  filename?: string;
-  pixelRatio?: number;
-  backgroundColor?: string;
-}
-
-/** 图表联动配置 */
-export interface ChartLinkageConfig {
-  linkedChartIds?: string[];
-  enableClickLinkage?: boolean;
-  enableZoomLinkage?: boolean;
-  enableLegendLinkage?: boolean;
-  enableFilterLinkage?: boolean;
-}
+/** 从 core/types 导入共享类型 */
+export { ChartEventParams, ChartExportOptions, ChartLinkageConfig } from '../types/common';
 
 // ============================================================================
 // ChartProps - 与原有接口保持完全兼容
@@ -77,15 +41,14 @@ export interface ChartProps {
   chartId?: string;
   option?: EChartsOption;
   animation?: AnimationConfig;
-  debug?: boolean | DebugPanelOptions;
   width?: number | string;
   height?: number | string;
   theme?: string | object;
   autoResize?: boolean;
   direction?: 'ltr' | 'rtl';
-  onInit?: (instance: EChartsType) => void;
-  onClick?: (params: ChartEventParams) => void;
-  onDataZoom?: (params: ChartEventParams) => void;
+  onInit?: (_instance: EChartsType) => void;
+  onClick?: (_params: ChartEventParams) => void;
+  onDataZoom?: (_params: ChartEventParams) => void;
   style?: React.CSSProperties;
   className?: string;
   children?: React.ReactNode;
@@ -100,28 +63,30 @@ export interface ChartProps {
     dataSize: number;
   }) => void;
   enableZoom?: boolean;
-  onZoom?: (data: { start: number; end: number; dataZoomIndex: number }) => void;
+  onZoom?: (data: { start: number; end: number; _dataZoomIndex: number }) => void;
   enableDataFiltering?: boolean;
-  filters?: Record<string, string | number | boolean | string[] | null>;
-  onDataFiltered?: (filteredData: unknown[], filters: Record<string, unknown>) => 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;
-  onLegendUnselect?: (params: { name: string; selected: Record<string, boolean> }) => void;
-  onLegendSelectAll?: (params: { selected: Record<string, boolean> }) => void;
-  onLegendInverseSelect?: (params: { selected: Record<string, boolean> }) => void;
+  onLegendSelect?: (_params: { name: string; selected: Record<string, boolean> }) => void;
+  onLegendUnselect?: (_params: { name: string; selected: Record<string, boolean> }) => void;
+  onLegendSelectAll?: (_params: { selected: Record<string, boolean> }) => void;
+  onLegendInverseSelect?: (_params: { selected: Record<string, boolean> }) => void;
   enableCustomTooltip?: boolean;
-  customTooltipContent?: (params: EChartsMouseEventParams | EChartsMouseEventParams[]) => React.ReactNode;
+  customTooltipContent?: (
+    _params: EChartsMouseEventParams | EChartsMouseEventParams[]
+  ) => React.ReactNode;
   customTooltipStyle?: React.CSSProperties;
-  onTooltipShow?: (params: EChartsTooltipEventParams) => void;
-  onTooltipHide?: (params: EChartsTooltipEventParams) => void;
-  onExport?: (dataURL: string, options: ChartExportOptions) => void;
+  onTooltipShow?: (_params: EChartsTooltipEventParams) => void;
+  onTooltipHide?: (_params: EChartsTooltipEventParams) => void;
+  onExport?: (_dataURL: string, options: ChartExportOptions) => void;
   linkageConfig?: ChartLinkageConfig;
   onDataUpdate?: (
     oldOption: EChartsOption | undefined,
     newOption: EChartsOption | undefined
   ) => void;
-  dataUpdateOptions?: { enabled?: boolean; deepCompare?: boolean; debounceDelay?: number };
+  _dataUpdateOptions?: { enabled?: boolean; deepCompare?: boolean; debounceDelay?: number };
 }
 
 // ============================================================================
@@ -133,7 +98,6 @@ const BaseChart: React.FC<ChartProps> = (props) => {
     chartId,
     option,
     animation,
-    debug,
     width = '100%',
     height = '300px',
     theme,
@@ -153,7 +117,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
     enableZoom: _enableZoom = false,
     onZoom,
     enableDataFiltering = false,
-    filters = {},
+    _filters = {},
     onDataFiltered,
     enableLegendInteraction = false,
     legendInteractionMode = 'single',
@@ -169,7 +133,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
     onExport: _onExport,
     linkageConfig = {},
     onDataUpdate,
-    dataUpdateOptions = {},
+    _dataUpdateOptions = {},
   } = props;
 
   // Refs
@@ -190,31 +154,22 @@ const BaseChart: React.FC<ChartProps> = (props) => {
   });
   const oldOptionRef = useRef<EChartsOption | undefined>(option);
   const adapterRef = useRef<unknown>(null);
-  const debugConfigRef = useRef<DebugPanelOptions | null>(null);
   const performanceAnalyzerRef = useRef<PerformanceAnalyzer | null>(null);
 
-  // Debug config
-  const debugConfig = useMemo(() => {
-    if (!debug) return null;
-    return typeof debug === 'boolean'
-      ? { enabled: debug, autoExpand: false }
-      : { enabled: true, ...debug };
-  }, [debug]);
-
-  // Wrapper option that applies virtual scroll + data filtering
+  // Wrapper option that applies virtual scroll + _data filtering
   const wrappedOption = useMemo(() => {
     if (!option) return undefined;
     let processed: Record<string, unknown> = { ...option };
 
-    // Apply data filtering
-    if (enableDataFiltering && filters && Object.keys(filters).length > 0) {
-      processed = JSON.parse(JSON.stringify(processed)) as typeof processed;
+    // Apply _data filtering
+    if (enableDataFiltering && _filters && Object.keys(_filters).length > 0) {
+      processed = deepClone(processed);
       if (processed.series && Array.isArray(processed.series)) {
         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);
+          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;
               virtualScrollRef.current.totalPages = Math.ceil(
@@ -225,24 +180,26 @@ const BaseChart: React.FC<ChartProps> = (props) => {
                 start + virtualScrollPageSize + virtualScrollPreloadSize,
                 filtered.length
               );
-              return { ...seriesItem, data: filtered.slice(start, end) };
+              return { ...seriesItem, _data: filtered.slice(start, end) };
             }
-            return { ...seriesItem, data: filtered };
+            return { ...seriesItem, _data: filtered };
           }
           return seriesItem;
         });
       }
     }
 
-    // Inject dataZoom when enableZoom is true (keyboard-accessible zoom)
+    // 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] : [];
+      processed = deepClone(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 = [
+        processed._dataZoom = [
           ...(existingDzArr || []),
           // Inside (mouse wheel + keyboard) — wired to keyboard nav in BaseChartWrapper
           { type: 'inside', start: 0, end: 100, zoomOnMouseWheel: true, moveOnMouseMove: false },
@@ -251,15 +208,15 @@ const BaseChart: React.FC<ChartProps> = (props) => {
     }
 
     // Apply animation config
-    const dataLength = calculateDataLength(processed);
-    const animConfig = generateEChartsAnimationConfig(animation, dataLength);
+    const _dataLength = calculateDataLength(processed);
+    const animConfig = generateEChartsAnimationConfig(animation, _dataLength);
     return { ...processed, ...animConfig } as EChartsOption;
   }, [
     option,
     animation,
     _enableZoom,
     enableDataFiltering,
-    filters,
+    _filters,
     virtualScroll,
     virtualScrollPageSize,
     virtualScrollPreloadSize,
@@ -268,9 +225,9 @@ const BaseChart: React.FC<ChartProps> = (props) => {
 
   // Internal chartInit that wraps the user's callback
   const handleChartInit = useCallback(
-    (instance: EChartsType) => {
-      chartInstanceRef.current = instance;
-      adapterRef.current = instance as unknown;
+    (_instance: EChartsType) => {
+      chartInstanceRef.current = _instance;
+      adapterRef.current = _instance as unknown;
 
       // Performance monitoring init
       if (enablePerformanceMonitoring) {
@@ -287,28 +244,33 @@ const BaseChart: React.FC<ChartProps> = (props) => {
       performanceRef.current.initStartTime = Date.now();
 
       // Register for linkage
-      if (chartId) registerChart(chartId, instance);
+      if (chartId) registerChart(chartId, _instance);
 
       // Setup internal event handlers for linkage + virtual scroll
-      if (instance) {
+      if (_instance) {
         // Click linkage
         if (linkageConfig.enableClickLinkage && chartId && linkageConfig.linkedChartIds) {
-          instance.on('click', (params: ECElementEvent) => {
+          _instance.on('click', (_params: ECElementEvent) => {
             linkageConfig.linkedChartIds!.forEach((lid) => {
               const linked = getChart(lid);
-              if (linked) linked.dispatchAction({ type: 'highlight', name: params.name });
+              if (linked) linked.dispatchAction({ type: 'highlight', name: _params.name });
             });
           });
         }
 
         // Zoom + zoom linkage + virtual scroll page update
-        instance.on('datazoom', (params: unknown) => {
-          const p = params as { start?: number; end?: number; dataZoomIndex?: number; batch?: Array<{ start?: number; end?: number; dataZoomIndex?: number }> };
+        _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: p.start || 0,
               end: p.end || 100,
-              dataZoomIndex: p.dataZoomIndex || 0,
+              _dataZoomIndex: p._dataZoomIndex || 0,
             });
           if (virtualScroll && !virtualScrollRef.current.isScrolling) {
             virtualScrollRef.current.isScrolling = true;
@@ -328,10 +290,10 @@ const BaseChart: React.FC<ChartProps> = (props) => {
               const linked = getChart(lid);
               if (linked)
                 linked.dispatchAction({
-                  type: 'dataZoom',
+                  type: '_dataZoom',
                   start: p.start,
                   end: p.end,
-                  dataZoomIndex: p.dataZoomIndex,
+                  _dataZoomIndex: p._dataZoomIndex,
                 });
             });
           }
@@ -339,8 +301,8 @@ const BaseChart: React.FC<ChartProps> = (props) => {
 
         // Legend interaction
         if (enableLegendInteraction) {
-          instance.on('legendselectchanged', (params: unknown) => {
-            const p = params as { name?: string; selected: Record<string, boolean> };
+          _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) => {
@@ -353,7 +315,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
               Object.keys(selected).forEach((k) => {
                 newSelected[k] = k === name;
               });
-              instance.setOption({ legend: { selected: newSelected } });
+              _instance.setOption({ legend: { selected: newSelected } });
               if (name !== undefined) onLegendSelect?.({ name, selected: newSelected });
             } else {
               if (name !== undefined && selected[name]) onLegendSelect?.({ name, selected });
@@ -364,11 +326,16 @@ const BaseChart: React.FC<ChartProps> = (props) => {
 
         // Custom tooltip
         if (enableCustomTooltip && customTooltipContent) {
-          instance.on('tooltipshow', (params: unknown) => onTooltipShow?.(params as EChartsTooltipEventParams));
-          instance.on('tooltiphide', (params: unknown) => onTooltipHide?.(params as EChartsTooltipEventParams));
-          instance.setOption({
+          _instance.on('tooltipshow', (_params: unknown) =>
+            onTooltipShow?.(_params as EChartsTooltipEventParams)
+          );
+          _instance.on('tooltiphide', (_params: unknown) =>
+            onTooltipHide?.(_params as EChartsTooltipEventParams)
+          );
+          _instance.setOption({
             tooltip: {
-              formatter: (params: unknown) => String(customTooltipContent(params as EChartsMouseEventParams)),
+              formatter: (_params: unknown) =>
+                String(customTooltipContent(_params as EChartsMouseEventParams)),
               ...(customTooltipStyle && {
                 backgroundColor: 'transparent',
                 borderColor: 'transparent',
@@ -379,32 +346,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
         }
       }
 
-      // Update debug panel
-      if (debugConfigRef.current?.enabled) {
-        updateDebugInfo({
-          instance: {
-            id: chartId,
-            type: 'ECharts',
-            renderer: 'canvas',
-            width: typeof width === 'number' ? width : undefined,
-            height: typeof height === 'number' ? height : undefined,
-            platform: 'web',
-          },
-          config: wrappedOption,
-          data: {
-            series: Array.isArray(wrappedOption?.series) ? wrappedOption.series : [],
-            totalDataCount: calculateDataLength(wrappedOption),
-            currentDataCount: calculateDataLength(wrappedOption),
-          },
-          performance: {
-            initTime: 0,
-            renderTime: 0,
-            dataSize: JSON.stringify(wrappedOption).length,
-          },
-        });
-      }
-
-      onInit?.(instance);
+      onInit?.(_instance);
       performanceRef.current.initEndTime = Date.now();
     },
     [
@@ -437,7 +379,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
         renderTime: p.renderEndTime - p.renderStartTime,
         initTime: p.initEndTime - p.initStartTime,
         updateTime: p.updateEndTime - p.updateStartTime,
-        dataSize: JSON.stringify(option).length,
+        dataSize: estimateDataSize(option),
       });
     }
   }, [option, onPerformance]);
@@ -446,9 +388,9 @@ const BaseChart: React.FC<ChartProps> = (props) => {
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (!onDataUpdate || dataUpdateOptions?.enabled === false) return;
+    if (!onDataUpdate || _dataUpdateOptions?.enabled === false) return;
 
-    const delay = dataUpdateOptions?.debounceDelay ?? 0;
+    const delay = _dataUpdateOptions?.debounceDelay ?? 0;
 
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
@@ -476,7 +418,7 @@ const BaseChart: React.FC<ChartProps> = (props) => {
         debounceTimerRef.current = null;
       }
     };
-  }, [option, onDataUpdate, dataUpdateOptions]);
+  }, [option, onDataUpdate, _dataUpdateOptions]);
 
   // Cleanup on unmount
   useEffect(() => {
@@ -512,38 +454,38 @@ const BaseChart: React.FC<ChartProps> = (props) => {
   return (
     <>
       <BaseChartWrapper {...wrapperProps} />
-      {debugConfig?.enabled && (
-        <DebugPanel
-          options={debugConfig}
-          debugInfo={{
-            instance: {
-              id: chartId,
-              type: 'ECharts',
-              renderer: 'canvas',
-              width: typeof width === 'number' ? width : undefined,
-              height: typeof height === 'number' ? height : undefined,
-              platform: 'web',
-            },
-            config: option,
-            data: {
-              series: Array.isArray(option?.series) ? option.series : [],
-              totalDataCount: calculateDataLength(option),
-              currentDataCount: calculateDataLength(option),
-            },
-            performance: {
-              initTime: performanceRef.current.initEndTime - performanceRef.current.initStartTime,
-              renderTime:
-                performanceRef.current.renderEndTime - performanceRef.current.renderStartTime,
-              updateTime: 0,
-              dataSize: JSON.stringify(option).length,
-            },
-          }}
-        />
-      )}
     </>
   );
 };
 
+/**
+ * Lightweight estimation of option data size without expensive JSON.stringify.
+ * Counts approximate character length by summing string values and array lengths.
+ */
+function estimateDataSize(option: unknown): number {
+  if (option == null) return 0;
+  if (typeof option === 'string') return option.length;
+  if (typeof option !== 'object') return 8; // number/boolean approximation
+
+  let size = 0;
+  const obj = option as Record<string, unknown>;
+  for (const key in obj) {
+    if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
+    size += key.length + 1; // key + colon
+    const val = obj[key];
+    if (typeof val === 'string') {
+      size += val.length + 2; // quotes
+    } else if (Array.isArray(val)) {
+      size += val.length * 4; // rough per-element estimate
+    } else if (typeof val === 'object' && val !== null) {
+      size += estimateDataSize(val);
+    } else {
+      size += 8; // number/boolean
+    }
+  }
+  return size;
+}
+
 function normalizeSizeObject(
   width: number | string,
   height: number | string,