react-use-echarts 0.0.10 → 1.0.0

package/dist/themes/presets/macarons.json.d.ts

@@ -0,0 +1,419 @@
+declare const _default: {
+  "color": [
+    "#2ec7c9",
+    "#b6a2de",
+    "#5ab1ef",
+    "#ffb980",
+    "#d87a80",
+    "#8d98b3",
+    "#e5cf0d",
+    "#97b552",
+    "#95706d",
+    "#dc69aa",
+    "#07a2a4",
+    "#9a7fd1",
+    "#588dd5",
+    "#f5994e",
+    "#c05050",
+    "#59678c",
+    "#c9ab00",
+    "#7eb00a",
+    "#6f5553",
+    "#c14089"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#008acd"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "borderWidth": 1
+    },
+    "lineStyle": {
+      "width": 2
+    },
+    "symbolSize": 3,
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "borderWidth": 1
+    },
+    "lineStyle": {
+      "width": 2
+    },
+    "symbolSize": 3,
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "barBorderWidth": 0,
+      "barBorderColor": "#ccc"
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "color": "#d87a80",
+      "color0": "#2ec7c9",
+      "borderColor": "#d87a80",
+      "borderColor0": "#2ec7c9",
+      "borderWidth": 1
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "borderWidth": 0,
+      "borderColor": "#ccc"
+    },
+    "lineStyle": {
+      "width": 1,
+      "color": "#aaa"
+    },
+    "symbolSize": 3,
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2ec7c9",
+      "#b6a2de",
+      "#5ab1ef",
+      "#ffb980",
+      "#d87a80",
+      "#8d98b3",
+      "#e5cf0d",
+      "#97b552",
+      "#95706d",
+      "#dc69aa",
+      "#07a2a4",
+      "#9a7fd1",
+      "#588dd5",
+      "#f5994e",
+      "#c05050",
+      "#59678c",
+      "#c9ab00",
+      "#7eb00a",
+      "#6f5553",
+      "#c14089"
+    ],
+    "label": {
+      "color": "#eee"
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "areaColor": "#dddddd",
+      "borderColor": "#eeeeee",
+      "borderWidth": 0.5
+    },
+    "label": {
+      "color": "#d87a80"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(254,153,78,1)",
+        "borderColor": "#444",
+        "borderWidth": 1
+      },
+      "label": {
+        "color": "rgb(100,0,0)"
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "areaColor": "#dddddd",
+      "borderColor": "#eeeeee",
+      "borderWidth": 0.5
+    },
+    "label": {
+      "color": "#d87a80"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(254,153,78,1)",
+        "borderColor": "#444",
+        "borderWidth": 1
+      },
+      "label": {
+        "color": "rgb(100,0,0)"
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#008acd"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#333"
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.3)",
+          "rgba(200,200,200,0.3)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#008acd"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#333"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.3)",
+          "rgba(200,200,200,0.3)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#008acd"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#333"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.3)",
+          "rgba(200,200,200,0.3)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#008acd"
+      }
+    },
+    "axisTick": {
+      "show": true,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#333"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.3)",
+          "rgba(200,200,200,0.3)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "borderColor": "#2ec7c9"
+    },
+    "emphasis": {
+      "iconStyle": {
+        "borderColor": "#18a4a6"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#333333"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#008acd",
+        "width": "1"
+      },
+      "crossStyle": {
+        "color": "#008acd",
+        "width": "1"
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#008acd",
+      "width": 1
+    },
+    "itemStyle": {
+      "color": "#008acd",
+      "borderWidth": 1
+    },
+    "controlStyle": {
+      "color": "#008acd",
+      "borderColor": "#008acd",
+      "borderWidth": 0.5
+    },
+    "checkpointStyle": {
+      "color": "#2ec7c9",
+      "borderColor": "#2ec7c9"
+    },
+    "label": {
+      "color": "#008acd"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "color": "#a9334c"
+      },
+      "controlStyle": {
+        "color": "#008acd",
+        "borderColor": "#008acd",
+        "borderWidth": 0.5
+      },
+      "label": {
+        "color": "#008acd"
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#5ab1ef",
+      "#e0ffff"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(47,69,84,0)",
+    "dataBackgroundColor": "rgba(239,239,255,0.3)",
+    "fillerColor": "rgba(182,162,222,0.2)",
+    "handleColor": "#008acd",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "color": "#eeeeee"
+    },
+    "emphasis": {
+      "label": {
+        "color": "#eeeeee"
+      }
+    }
+  }
+}
+;
+
+export default _default;

package/dist/types/index.d.ts

@@ -0,0 +1,118 @@
+import { EChartsOption, ECharts, SetOptionOpts } from 'echarts';
+/**
+ * Built-in theme names
+ * 内置主题名称
+ */
+export type BuiltinTheme = 'light' | 'dark' | 'macarons';
+/**
+ * Event configuration interface for ECharts
+ * ECharts 事件配置接口
+ * @example
+ * ```typescript
+ * const events: EChartsEvents = {
+ *   'click': {
+ *     handler: (params) => console.log('clicked', params),
+ *     query: '.series-name',
+ *     context: this
+ *   }
+ * }
+ * ```
+ */
+export interface EChartsEvents {
+    /**
+     * Event name as key
+     * 事件名称作为键
+     */
+    [eventName: string]: {
+        /**
+         * Event handler function
+         * 事件处理函数
+         */
+        handler: (params: unknown) => void;
+        /**
+         * Query condition for the event
+         * 事件的查询条件
+         */
+        query?: string | object;
+        /**
+         * Context for the event handler
+         * 事件处理函数的上下文
+         */
+        context?: object;
+    };
+}
+/**
+ * Configuration options for useEcharts hook
+ * useEcharts hook 的配置选项
+ */
+export interface UseEchartsOptions {
+    /**
+     * ECharts configuration options
+     * ECharts 配置项
+     */
+    option: EChartsOption;
+    /**
+     * Theme: built-in preset name | custom object | null
+     * 主题：内置预设名 | 自定义对象 | null
+     */
+    theme?: BuiltinTheme | object | null;
+    /**
+     * Renderer type
+     * 渲染器类型
+     * @default 'canvas'
+     */
+    renderer?: 'canvas' | 'svg';
+    /**
+     * Lazy initialization: only init when container enters viewport
+     * 懒加载：仅当容器进入视口时初始化
+     */
+    lazyInit?: boolean | IntersectionObserverInit;
+    /**
+     * Chart group ID for linkage
+     * 图表组 ID，用于联动
+     */
+    group?: string;
+    /**
+     * Default setOption options
+     * setOption 默认选项（替代原 notMerge / lazyUpdate）
+     */
+    setOptionOpts?: SetOptionOpts;
+    /**
+     * Whether to show loading state
+     * 是否显示加载状态
+     * @default false
+     */
+    showLoading?: boolean;
+    /**
+     * Loading options
+     * 加载配置项
+     */
+    loadingOption?: object;
+    /**
+     * Event configurations
+     * 事件配置
+     */
+    onEvents?: EChartsEvents;
+}
+/**
+ * Return type for useEcharts hook
+ * useEcharts hook 的返回类型
+ */
+export interface UseEchartsReturn {
+    /**
+     * Function to update chart options
+     * 动态更新配置
+     */
+    setOption: (option: EChartsOption, opts?: SetOptionOpts) => void;
+    /**
+     * Function to get the ECharts instance
+     * 获取实例
+     * @returns Returns the current ECharts instance, or undefined if not initialized
+     */
+    getInstance: () => ECharts | undefined;
+    /**
+     * Manually trigger resize
+     * 手动触发 resize
+     */
+    resize: () => void;
+}

package/dist/utils/connect.d.ts

@@ -0,0 +1,49 @@
+import { ECharts } from 'echarts';
+/**
+ * Add chart instance to group
+ * 将图表实例添加到组
+ * @param instance ECharts instance
+ * @param groupId Group ID
+ */
+export declare function addToGroup(instance: ECharts, groupId: string): void;
+/**
+ * Remove chart instance from group
+ * 从组中移除图表实例
+ * @param instance ECharts instance
+ * @param groupId Group ID
+ */
+export declare function removeFromGroup(instance: ECharts, groupId: string): void;
+/**
+ * Update group for chart instance
+ * 更新图表实例的组
+ * @param instance ECharts instance
+ * @param oldGroupId Previous group ID (if any)
+ * @param newGroupId New group ID (if any)
+ */
+export declare function updateGroup(instance: ECharts, oldGroupId?: string, newGroupId?: string): void;
+/**
+ * Get all instances in a group
+ * 获取组中的所有实例
+ * @param groupId Group ID
+ * @returns Array of chart instances
+ */
+export declare function getGroupInstances(groupId: string): ECharts[];
+/**
+ * Get group ID for an instance
+ * 获取实例所属的组 ID
+ * @param instance ECharts instance
+ * @returns Group ID or undefined
+ */
+export declare function getInstanceGroup(instance: ECharts): string | undefined;
+/**
+ * Check if instance is in any group
+ * 检查实例是否在任何组中
+ * @param instance ECharts instance
+ * @returns True if in a group
+ */
+export declare function isInGroup(instance: ECharts): boolean;
+/**
+ * Clear all groups (for testing/cleanup)
+ * 清除所有组（用于测试/清理）
+ */
+export declare function clearGroups(): void;

package/dist/utils/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Instance cache utilities
+ * 实例缓存工具函数
+ */
+export { getCachedInstance, setCachedInstance, replaceCachedInstance, releaseCachedInstance, getReferenceCount, clearInstanceCache, } from './instance-cache';
+/**
+ * Chart connection utilities
+ * 图表连接工具函数
+ */
+export { addToGroup, removeFromGroup, updateGroup, getGroupInstances, getInstanceGroup, isInGroup, clearGroups, } from './connect';

package/dist/utils/instance-cache.d.ts

@@ -0,0 +1,42 @@
+import { ECharts } from 'echarts';
+/**
+ * Get cached instance for element
+ * 获取元素的缓存实例
+ * @param element DOM element
+ * @returns Cached instance or undefined
+ */
+export declare function getCachedInstance(element: HTMLElement): ECharts | undefined;
+/**
+ * Set or increment reference count for instance
+ * 设置实例或增加引用计数
+ * @param element DOM element
+ * @param instance ECharts instance
+ * @returns The instance (cached or new)
+ */
+export declare function setCachedInstance(element: HTMLElement, instance: ECharts): ECharts;
+/**
+ * Replace cached instance (for theme changes)
+ * 替换缓存实例（用于主题切换）
+ * @param element DOM element
+ * @param instance New ECharts instance
+ * @returns The new instance
+ */
+export declare function replaceCachedInstance(element: HTMLElement, instance: ECharts): ECharts;
+/**
+ * Decrement reference count and dispose if zero
+ * 减少引用计数，如果为零则销毁实例
+ * @param element DOM element
+ */
+export declare function releaseCachedInstance(element: HTMLElement): void;
+/**
+ * Get reference count for element
+ * 获取元素的引用计数
+ * @param element DOM element
+ * @returns Reference count or 0 if not cached
+ */
+export declare function getReferenceCount(element: HTMLElement): number;
+/**
+ * Clear all cached instances (for testing/cleanup)
+ * 清除所有缓存实例（用于测试/清理）
+ */
+export declare function clearInstanceCache(): void;