@particle-academy/fancy-echarts 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +213 -0
- package/dist/index.cjs +753 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +227 -0
- package/dist/index.d.ts +227 -0
- package/dist/index.js +606 -0
- package/dist/index.js.map +1 -0
- package/docs/EChart.md +207 -0
- package/docs/EChart3D.md +178 -0
- package/docs/EChartGraphic.md +149 -0
- package/docs/registration.md +152 -0
- package/docs/themes.md +152 -0
- package/docs/useECharts.md +129 -0
- package/package.json +66 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-resize-observer.ts","../src/hooks/use-echarts.ts","../src/components/EChart.tsx","../src/components/EChart3D.tsx","../src/components/EChartGraphic.tsx","../src/utils/register.ts","../src/utils/themes.ts"],"names":["useRef","useEffect","DEFAULT_STYLE","useState","jsx","forwardRef","useMemo","RadarComp","echartsRegisterTheme"],"mappings":"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","file":"index.js","sourcesContent":["import { useEffect, useRef, type RefObject } from \"react\";\r\n\r\nexport function useResizeObserver(\r\n ref: RefObject<HTMLElement | null>,\r\n callback: () => void\r\n): void {\r\n const callbackRef = useRef(callback);\r\n callbackRef.current = callback;\r\n\r\n useEffect(() => {\r\n const element = ref.current;\r\n if (!element) return;\r\n\r\n const observer = new ResizeObserver(() => {\r\n callbackRef.current();\r\n });\r\n\r\n observer.observe(element);\r\n\r\n return () => {\r\n observer.disconnect();\r\n };\r\n }, [ref]);\r\n}\r\n","import { useEffect, useRef, useState, useSyncExternalStore, type RefObject } from \"react\";\r\nimport { init, getInstanceByDom, type EChartsType } from \"echarts/core\";\r\nimport type { EChartsOption } from \"echarts\";\r\n\r\ntype ECharts = EChartsType;\r\nimport { useResizeObserver } from \"./use-resize-observer\";\r\n\r\nexport interface UseEChartsOptions {\r\n option: EChartsOption;\r\n theme?: string | object;\r\n renderer?: \"canvas\" | \"svg\";\r\n notMerge?: boolean;\r\n lazyUpdate?: boolean;\r\n showLoading?: boolean;\r\n loadingOption?: object;\r\n onEvents?: Record<string, (params: any) => void>;\r\n autoResize?: boolean;\r\n}\r\n\r\nexport interface UseEChartsReturn {\r\n chartRef: RefObject<HTMLDivElement | null>;\r\n instance: ECharts | null;\r\n}\r\n\r\n/** Detect system dark mode preference reactively. */\r\nfunction useDarkMode(): boolean {\r\n return useSyncExternalStore(\r\n (callback) => {\r\n const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\r\n mq.addEventListener(\"change\", callback);\r\n return () => mq.removeEventListener(\"change\", callback);\r\n },\r\n () => window.matchMedia(\"(prefers-color-scheme: dark)\").matches,\r\n () => false,\r\n );\r\n}\r\n\r\nexport function useECharts(options: UseEChartsOptions): UseEChartsReturn {\r\n const {\r\n option,\r\n theme,\r\n renderer = \"canvas\",\r\n notMerge = false,\r\n lazyUpdate = false,\r\n showLoading = false,\r\n loadingOption,\r\n onEvents,\r\n autoResize = true,\r\n } = options;\r\n\r\n const isDark = useDarkMode();\r\n // Auto-detect theme: use explicit theme if provided, otherwise \"dark\" or undefined\r\n const autoDark = theme === undefined && isDark;\r\n const resolvedTheme = theme !== undefined ? theme : isDark ? \"dark\" : undefined;\r\n\r\n const chartRef = useRef<HTMLDivElement | null>(null);\r\n const instanceRef = useRef<ECharts | null>(null);\r\n const [instance, setInstance] = useState<ECharts | null>(null);\r\n\r\n // Init/dispose — re-init when theme changes (including dark mode toggle)\r\n useEffect(() => {\r\n if (!chartRef.current) return;\r\n\r\n // Dispose any existing instance (handles StrictMode double-mount)\r\n const existing = getInstanceByDom(chartRef.current);\r\n if (existing) {\r\n existing.dispose();\r\n }\r\n\r\n const chart = init(chartRef.current, resolvedTheme, { renderer });\r\n instanceRef.current = chart;\r\n setInstance(chart);\r\n\r\n return () => {\r\n chart.dispose();\r\n instanceRef.current = null;\r\n setInstance(null);\r\n };\r\n }, [resolvedTheme, renderer]);\r\n\r\n // Set option\r\n useEffect(() => {\r\n const chart = instanceRef.current;\r\n if (!chart || !option) return;\r\n // When using auto-detected dark theme, force transparent background\r\n // so charts blend with the page's own dark background\r\n const finalOption = autoDark\r\n ? { backgroundColor: \"transparent\", ...option }\r\n : option;\r\n chart.setOption(finalOption, { notMerge, lazyUpdate });\r\n }, [option, notMerge, lazyUpdate, autoDark]);\r\n\r\n // Loading state\r\n useEffect(() => {\r\n const chart = instanceRef.current;\r\n if (!chart) return;\r\n if (showLoading) {\r\n chart.showLoading(\"default\", loadingOption);\r\n } else {\r\n chart.hideLoading();\r\n }\r\n }, [showLoading, loadingOption]);\r\n\r\n // Event binding\r\n useEffect(() => {\r\n const chart = instanceRef.current;\r\n if (!chart || !onEvents) return;\r\n\r\n const entries = Object.entries(onEvents);\r\n for (const [event, handler] of entries) {\r\n chart.on(event, handler);\r\n }\r\n\r\n return () => {\r\n for (const [event, handler] of entries) {\r\n chart.off(event, handler);\r\n }\r\n };\r\n }, [onEvents]);\r\n\r\n // Auto-resize\r\n useResizeObserver(chartRef, () => {\r\n if (autoResize && instanceRef.current) {\r\n instanceRef.current.resize();\r\n }\r\n });\r\n\r\n return { chartRef, instance };\r\n}\r\n","import React, { forwardRef, useMemo } from \"react\";\r\nimport type { EChartsOption } from \"echarts\";\r\nimport { useECharts } from \"../hooks/use-echarts\";\r\nimport type {\r\n EChartComponentProps,\r\n SeriesComponentProps,\r\n ChartDivProps,\r\n} from \"../types\";\r\n\r\nconst DEFAULT_STYLE: React.CSSProperties = { width: \"100%\", height: 400 };\r\n\r\n/** Base EChart component — accepts any ECharts option. */\r\nconst EChartBase = forwardRef<HTMLDivElement, EChartComponentProps>(\r\n (\r\n {\r\n option,\r\n theme,\r\n renderer,\r\n notMerge,\r\n lazyUpdate,\r\n showLoading,\r\n loadingOption,\r\n onEvents,\r\n autoResize = true,\r\n style,\r\n className,\r\n ...rest\r\n },\r\n _ref\r\n ) => {\r\n const { chartRef } = useECharts({\r\n option,\r\n theme,\r\n renderer,\r\n notMerge,\r\n lazyUpdate,\r\n showLoading,\r\n loadingOption,\r\n onEvents,\r\n autoResize,\r\n });\r\n\r\n return (\r\n <div\r\n ref={chartRef}\r\n style={{ ...DEFAULT_STYLE, ...style }}\r\n className={className}\r\n {...rest}\r\n />\r\n );\r\n }\r\n);\r\n\r\nEChartBase.displayName = \"EChart\";\r\n\r\n// --- Helper to create typed series sub-components ---\r\n\r\nfunction createSeriesComponent(\r\n seriesType: string,\r\n displayName: string\r\n): React.FC<SeriesComponentProps & ChartDivProps> {\r\n const Component: React.FC<SeriesComponentProps & ChartDivProps> = ({\r\n data,\r\n title,\r\n xAxis,\r\n yAxis,\r\n tooltip = true,\r\n legend = false,\r\n grid,\r\n seriesOptions = {},\r\n option: extraOption = {},\r\n style,\r\n className,\r\n ...rest\r\n }) => {\r\n const option = useMemo((): EChartsOption => {\r\n const base: EChartsOption = {};\r\n\r\n if (title) {\r\n base.title = { text: title };\r\n }\r\n\r\n if (tooltip === true) {\r\n base.tooltip = { trigger: \"axis\" };\r\n } else if (tooltip && typeof tooltip === \"object\") {\r\n base.tooltip = tooltip;\r\n }\r\n\r\n if (legend === true) {\r\n base.legend = {};\r\n } else if (legend && typeof legend === \"object\") {\r\n base.legend = legend;\r\n }\r\n\r\n if (grid) {\r\n base.grid = grid;\r\n }\r\n\r\n // Handle axis-based charts\r\n const axisCharts = [\r\n \"line\",\r\n \"bar\",\r\n \"scatter\",\r\n \"candlestick\",\r\n \"boxplot\",\r\n \"heatmap\",\r\n \"effectScatter\",\r\n \"pictorialBar\",\r\n ];\r\n if (axisCharts.includes(seriesType)) {\r\n base.xAxis = xAxis ?? { type: \"category\" };\r\n base.yAxis = yAxis ?? { type: \"value\" };\r\n }\r\n\r\n // Handle data format\r\n if (Array.isArray(data)) {\r\n base.series = [{ type: seriesType, data, ...seriesOptions }] as any;\r\n } else if (data && typeof data === \"object\" && \"series\" in data) {\r\n // Multi-series: { categories: [...], series: [{ name, data }, ...] }\r\n const multiData = data as {\r\n categories?: string[];\r\n series: Array<{ name?: string; data: any[]; [k: string]: any }>;\r\n };\r\n if (multiData.categories && axisCharts.includes(seriesType)) {\r\n base.xAxis = xAxis ?? {\r\n type: \"category\",\r\n data: multiData.categories,\r\n };\r\n }\r\n base.series = multiData.series.map((s) => ({\r\n type: seriesType,\r\n ...seriesOptions,\r\n ...s,\r\n })) as any;\r\n } else {\r\n base.series = [{ type: seriesType, data, ...seriesOptions }] as any;\r\n }\r\n\r\n return { ...base, ...extraOption };\r\n }, [\r\n data,\r\n title,\r\n xAxis,\r\n yAxis,\r\n tooltip,\r\n legend,\r\n grid,\r\n seriesOptions,\r\n extraOption,\r\n ]);\r\n\r\n return (\r\n <EChartBase\r\n option={option}\r\n style={style}\r\n className={className}\r\n {...rest}\r\n />\r\n );\r\n };\r\n\r\n Component.displayName = displayName;\r\n return Component;\r\n}\r\n\r\n// --- Compound component with all chart type sub-components ---\r\n\r\nexport const EChart = Object.assign(EChartBase, {\r\n Line: createSeriesComponent(\"line\", \"EChart.Line\"),\r\n Bar: createSeriesComponent(\"bar\", \"EChart.Bar\"),\r\n Pie: createSeriesComponent(\"pie\", \"EChart.Pie\"),\r\n Scatter: createSeriesComponent(\"scatter\", \"EChart.Scatter\"),\r\n Radar: createSeriesComponent(\"radar\", \"EChart.Radar\"),\r\n Heatmap: createSeriesComponent(\"heatmap\", \"EChart.Heatmap\"),\r\n Gauge: createSeriesComponent(\"gauge\", \"EChart.Gauge\"),\r\n Funnel: createSeriesComponent(\"funnel\", \"EChart.Funnel\"),\r\n Treemap: createSeriesComponent(\"treemap\", \"EChart.Treemap\"),\r\n Sunburst: createSeriesComponent(\"sunburst\", \"EChart.Sunburst\"),\r\n Sankey: createSeriesComponent(\"sankey\", \"EChart.Sankey\"),\r\n Graph: createSeriesComponent(\"graph\", \"EChart.Graph\"),\r\n Candlestick: createSeriesComponent(\"candlestick\", \"EChart.Candlestick\"),\r\n Boxplot: createSeriesComponent(\"boxplot\", \"EChart.Boxplot\"),\r\n Parallel: createSeriesComponent(\"parallel\", \"EChart.Parallel\"),\r\n ThemeRiver: createSeriesComponent(\"themeRiver\", \"EChart.ThemeRiver\"),\r\n Map: createSeriesComponent(\"map\", \"EChart.Map\"),\r\n Custom: createSeriesComponent(\"custom\", \"EChart.Custom\"),\r\n EffectScatter: createSeriesComponent(\r\n \"effectScatter\",\r\n \"EChart.EffectScatter\"\r\n ),\r\n PictorialBar: createSeriesComponent(\"pictorialBar\", \"EChart.PictorialBar\"),\r\n});\r\n","import React, { forwardRef, useEffect, useMemo, useState } from \"react\";\r\nimport type { EChartsOption } from \"echarts\";\r\nimport { useECharts } from \"../hooks/use-echarts\";\r\nimport type {\r\n EChartComponentProps,\r\n SeriesComponentProps,\r\n ChartDivProps,\r\n} from \"../types\";\r\n\r\nconst DEFAULT_STYLE: React.CSSProperties = { width: \"100%\", height: 500 };\r\n\r\nlet glLoaded = false;\r\nlet glPromise: Promise<void> | null = null;\r\n\r\nfunction loadEChartsGL(): Promise<void> {\r\n if (glLoaded) return Promise.resolve();\r\n if (!glPromise) {\r\n glPromise = import(\"echarts-gl\")\r\n .then(() => {\r\n glLoaded = true;\r\n })\r\n .catch((err: unknown) => {\r\n console.warn(\"Failed to load echarts-gl for 3D charts:\", err);\r\n });\r\n }\r\n return glPromise;\r\n}\r\n\r\n/** Wrapper that delays mount until echarts-gl is loaded */\r\nfunction WithGL({ children, style, className }: { children: React.ReactNode; style?: React.CSSProperties; className?: string }) {\r\n const [ready, setReady] = useState(glLoaded);\r\n\r\n useEffect(() => {\r\n if (glLoaded) {\r\n setReady(true);\r\n return;\r\n }\r\n loadEChartsGL().then(() => setReady(true));\r\n }, []);\r\n\r\n if (!ready) {\r\n return (\r\n <div style={{ ...DEFAULT_STYLE, ...style, display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }} className={className}>\r\n <span style={{ color: \"#9ca3af\", fontSize: 14 }}>Loading 3D engine...</span>\r\n </div>\r\n );\r\n }\r\n\r\n return <>{children}</>;\r\n}\r\n\r\n/**\r\n * EChart3D — 3D chart component that lazy-loads the bundled echarts-gl\r\n * engine on first mount (split into its own chunk to keep the main bundle small).\r\n */\r\nconst EChart3DInner = forwardRef<HTMLDivElement, EChartComponentProps>(\r\n (\r\n {\r\n option,\r\n theme,\r\n renderer,\r\n notMerge,\r\n lazyUpdate,\r\n showLoading,\r\n loadingOption,\r\n onEvents,\r\n autoResize = true,\r\n style,\r\n className,\r\n ...rest\r\n },\r\n _ref\r\n ) => {\r\n const { chartRef } = useECharts({\r\n option,\r\n theme,\r\n renderer,\r\n notMerge,\r\n lazyUpdate,\r\n showLoading,\r\n loadingOption,\r\n onEvents,\r\n autoResize,\r\n });\r\n\r\n return (\r\n <div\r\n ref={chartRef}\r\n style={{ ...DEFAULT_STYLE, ...style }}\r\n className={className}\r\n {...rest}\r\n />\r\n );\r\n }\r\n);\r\n\r\nEChart3DInner.displayName = \"EChart3DInner\";\r\n\r\nconst EChart3DBase = forwardRef<HTMLDivElement, EChartComponentProps>(\r\n (props, ref) => {\r\n const { style, className, ...rest } = props;\r\n return (\r\n <WithGL style={style} className={className}>\r\n <EChart3DInner ref={ref} style={style} className={className} {...rest} />\r\n </WithGL>\r\n );\r\n }\r\n);\r\n\r\nEChart3DBase.displayName = \"EChart3D\";\r\n\r\nfunction create3DSeriesComponent(\r\n seriesType: string,\r\n displayName: string\r\n): React.FC<SeriesComponentProps & ChartDivProps> {\r\n const Component: React.FC<SeriesComponentProps & ChartDivProps> = ({\r\n data,\r\n title,\r\n tooltip = true,\r\n seriesOptions = {},\r\n option: extraOption = {},\r\n style,\r\n className,\r\n ...rest\r\n }) => {\r\n const option = useMemo((): EChartsOption => {\r\n const base: any = {};\r\n\r\n if (title) {\r\n base.title = { text: title };\r\n }\r\n\r\n if (tooltip === true) {\r\n base.tooltip = {};\r\n } else if (tooltip && typeof tooltip === \"object\") {\r\n base.tooltip = tooltip;\r\n }\r\n\r\n if ([\"bar3D\", \"scatter3D\", \"line3D\", \"surface\"].includes(seriesType)) {\r\n base.xAxis3D = { type: \"value\" };\r\n base.yAxis3D = { type: \"value\" };\r\n base.zAxis3D = { type: \"value\" };\r\n base.grid3D = {};\r\n }\r\n\r\n base.series = [{ type: seriesType, data, ...seriesOptions }];\r\n\r\n return { ...base, ...extraOption } as EChartsOption;\r\n }, [data, title, tooltip, seriesOptions, extraOption]);\r\n\r\n return (\r\n <EChart3DBase\r\n option={option}\r\n style={style}\r\n className={className}\r\n {...rest}\r\n />\r\n );\r\n };\r\n\r\n Component.displayName = displayName;\r\n return Component;\r\n}\r\n\r\nfunction createGlobeComponent(): React.FC<\r\n Omit<SeriesComponentProps, \"data\"> &\r\n ChartDivProps & { globe?: any; series?: any[] }\r\n> {\r\n const Component: React.FC<\r\n Omit<SeriesComponentProps, \"data\"> &\r\n ChartDivProps & { globe?: any; series?: any[] }\r\n > = ({\r\n title,\r\n globe,\r\n series = [],\r\n option: extraOption = {},\r\n style,\r\n className,\r\n ...rest\r\n }) => {\r\n const option = useMemo((): EChartsOption => {\r\n const base: any = {};\r\n\r\n if (title) {\r\n base.title = { text: title };\r\n }\r\n\r\n base.globe = globe ?? {\r\n baseTexture: \"\",\r\n shading: \"lambert\",\r\n atmosphere: { show: true },\r\n };\r\n\r\n if (series.length > 0) {\r\n base.series = series;\r\n }\r\n\r\n return { ...base, ...extraOption } as EChartsOption;\r\n }, [title, globe, series, extraOption]);\r\n\r\n return (\r\n <EChart3DBase\r\n option={option}\r\n style={style}\r\n className={className}\r\n {...rest}\r\n />\r\n );\r\n };\r\n\r\n Component.displayName = \"EChart3D.Globe\";\r\n return Component;\r\n}\r\n\r\nexport const EChart3D = Object.assign(EChart3DBase, {\r\n Bar: create3DSeriesComponent(\"bar3D\", \"EChart3D.Bar\"),\r\n Scatter: create3DSeriesComponent(\"scatter3D\", \"EChart3D.Scatter\"),\r\n Line: create3DSeriesComponent(\"line3D\", \"EChart3D.Line\"),\r\n Surface: create3DSeriesComponent(\"surface\", \"EChart3D.Surface\"),\r\n Globe: createGlobeComponent(),\r\n});\r\n","import React, { forwardRef, useMemo } from \"react\";\r\nimport type { EChartsOption } from \"echarts\";\r\nimport { useECharts } from \"../hooks/use-echarts\";\r\nimport type { EChartBaseProps, ChartDivProps } from \"../types\";\r\n\r\nexport interface GraphicElement {\r\n type:\r\n | \"rect\"\r\n | \"circle\"\r\n | \"ring\"\r\n | \"arc\"\r\n | \"polygon\"\r\n | \"polyline\"\r\n | \"path\"\r\n | \"image\"\r\n | \"text\"\r\n | \"group\";\r\n left?: number | string;\r\n top?: number | string;\r\n right?: number | string;\r\n bottom?: number | string;\r\n shape?: Record<string, any>;\r\n style?: Record<string, any>;\r\n children?: GraphicElement[];\r\n onclick?: (e: any) => void;\r\n onmouseover?: (e: any) => void;\r\n onmouseout?: (e: any) => void;\r\n [key: string]: any;\r\n}\r\n\r\nexport interface EChartGraphicProps\r\n extends Omit<EChartBaseProps, \"option\">,\r\n ChartDivProps,\r\n React.HTMLAttributes<HTMLDivElement> {\r\n elements: GraphicElement[];\r\n option?: Partial<EChartsOption>;\r\n}\r\n\r\nconst DEFAULT_STYLE: React.CSSProperties = { width: \"100%\", height: 400 };\r\n\r\n/**\r\n * EChartGraphic — for custom drawing via ECharts graphic layer.\r\n * Supports rect, circle, ring, arc, polygon, polyline, path, image, text, group elements.\r\n */\r\nexport const EChartGraphic = forwardRef<HTMLDivElement, EChartGraphicProps>(\r\n (\r\n {\r\n elements,\r\n option: extraOption = {},\r\n theme,\r\n renderer,\r\n notMerge,\r\n lazyUpdate,\r\n showLoading,\r\n loadingOption,\r\n onEvents,\r\n autoResize = true,\r\n style,\r\n className,\r\n ...rest\r\n },\r\n _ref\r\n ) => {\r\n const option = useMemo((): EChartsOption => {\r\n return {\r\n graphic: {\r\n elements,\r\n },\r\n ...extraOption,\r\n } as EChartsOption;\r\n }, [elements, extraOption]);\r\n\r\n const { chartRef } = useECharts({\r\n option,\r\n theme,\r\n renderer,\r\n notMerge,\r\n lazyUpdate,\r\n showLoading,\r\n loadingOption,\r\n onEvents,\r\n autoResize,\r\n });\r\n\r\n return (\r\n <div\r\n ref={chartRef}\r\n style={{ ...DEFAULT_STYLE, ...style }}\r\n className={className}\r\n {...rest}\r\n />\r\n );\r\n }\r\n);\r\n\r\nEChartGraphic.displayName = \"EChartGraphic\";\r\n","import { use } from \"echarts/core\";\r\nimport {\r\n LineChart,\r\n BarChart,\r\n PieChart,\r\n ScatterChart,\r\n RadarChart,\r\n HeatmapChart,\r\n GaugeChart,\r\n FunnelChart,\r\n TreemapChart,\r\n SunburstChart,\r\n SankeyChart,\r\n GraphChart,\r\n CandlestickChart,\r\n BoxplotChart,\r\n ParallelChart,\r\n ThemeRiverChart,\r\n MapChart,\r\n CustomChart,\r\n EffectScatterChart,\r\n PictorialBarChart,\r\n} from \"echarts/charts\";\r\nimport {\r\n GridComponent,\r\n TooltipComponent,\r\n TitleComponent,\r\n LegendComponent,\r\n DataZoomComponent,\r\n ToolboxComponent,\r\n VisualMapComponent,\r\n GeoComponent,\r\n ParallelComponent,\r\n CalendarComponent,\r\n GraphicComponent,\r\n PolarComponent,\r\n RadarComponent as RadarComp,\r\n DatasetComponent,\r\n MarkLineComponent,\r\n MarkPointComponent,\r\n MarkAreaComponent,\r\n TimelineComponent,\r\n BrushComponent,\r\n SingleAxisComponent,\r\n} from \"echarts/components\";\r\nimport { CanvasRenderer, SVGRenderer } from \"echarts/renderers\";\r\n\r\nconst allCharts = [\r\n LineChart,\r\n BarChart,\r\n PieChart,\r\n ScatterChart,\r\n RadarChart,\r\n HeatmapChart,\r\n GaugeChart,\r\n FunnelChart,\r\n TreemapChart,\r\n SunburstChart,\r\n SankeyChart,\r\n GraphChart,\r\n CandlestickChart,\r\n BoxplotChart,\r\n ParallelChart,\r\n ThemeRiverChart,\r\n MapChart,\r\n CustomChart,\r\n EffectScatterChart,\r\n PictorialBarChart,\r\n] as const;\r\n\r\nconst allComponents = [\r\n GridComponent,\r\n TooltipComponent,\r\n TitleComponent,\r\n LegendComponent,\r\n DataZoomComponent,\r\n ToolboxComponent,\r\n VisualMapComponent,\r\n GeoComponent,\r\n ParallelComponent,\r\n CalendarComponent,\r\n GraphicComponent,\r\n PolarComponent,\r\n RadarComp,\r\n DatasetComponent,\r\n MarkLineComponent,\r\n MarkPointComponent,\r\n MarkAreaComponent,\r\n TimelineComponent,\r\n BrushComponent,\r\n SingleAxisComponent,\r\n] as const;\r\n\r\nconst allRenderers = [CanvasRenderer, SVGRenderer] as const;\r\n\r\nlet registered = false;\r\n\r\n/** Register all ECharts chart types, components, and renderers. Convenient for demos/quick starts. */\r\nexport function registerAll(): void {\r\n if (registered) return;\r\n use([...allCharts, ...allComponents, ...allRenderers] as any);\r\n registered = true;\r\n}\r\n\r\n/** Register specific chart types by name for tree-shaking optimization. */\r\nexport function registerCharts(\r\n ...chartTypes: Array<(typeof allCharts)[number]>\r\n): void {\r\n use(chartTypes as any);\r\n}\r\n\r\n/** Register specific components by reference. */\r\nexport function registerComponents(\r\n ...components: Array<(typeof allComponents)[number]>\r\n): void {\r\n use(components as any);\r\n}\r\n\r\n// Re-export individual charts and components for manual registration\r\nexport {\r\n LineChart,\r\n BarChart,\r\n PieChart,\r\n ScatterChart,\r\n RadarChart,\r\n HeatmapChart,\r\n GaugeChart,\r\n FunnelChart,\r\n TreemapChart,\r\n SunburstChart,\r\n SankeyChart,\r\n GraphChart,\r\n CandlestickChart,\r\n BoxplotChart,\r\n ParallelChart,\r\n ThemeRiverChart,\r\n MapChart,\r\n CustomChart,\r\n EffectScatterChart,\r\n PictorialBarChart,\r\n GridComponent,\r\n TooltipComponent,\r\n TitleComponent,\r\n LegendComponent,\r\n DataZoomComponent,\r\n ToolboxComponent,\r\n VisualMapComponent,\r\n GeoComponent,\r\n CalendarComponent,\r\n GraphicComponent,\r\n PolarComponent,\r\n DatasetComponent,\r\n SingleAxisComponent,\r\n CanvasRenderer,\r\n SVGRenderer,\r\n};\r\n","import { registerTheme as echartsRegisterTheme } from \"echarts/core\";\r\n\r\n/** Dark theme preset */\r\nexport const darkTheme = {\r\n backgroundColor: \"#1a1a2e\",\r\n textStyle: { color: \"#e0e0e0\" },\r\n title: { textStyle: { color: \"#ffffff\" } },\r\n legend: { textStyle: { color: \"#cccccc\" } },\r\n categoryAxis: {\r\n axisLine: { lineStyle: { color: \"#444\" } },\r\n splitLine: { lineStyle: { color: \"#333\" } },\r\n axisLabel: { color: \"#aaa\" },\r\n },\r\n valueAxis: {\r\n axisLine: { lineStyle: { color: \"#444\" } },\r\n splitLine: { lineStyle: { color: \"#333\" } },\r\n axisLabel: { color: \"#aaa\" },\r\n },\r\n color: [\r\n \"#5470c6\",\r\n \"#91cc75\",\r\n \"#fac858\",\r\n \"#ee6666\",\r\n \"#73c0de\",\r\n \"#3ba272\",\r\n \"#fc8452\",\r\n \"#9a60b4\",\r\n \"#ea7ccc\",\r\n ],\r\n};\r\n\r\n/** Vintage theme preset */\r\nexport const vintageTheme = {\r\n color: [\r\n \"#d87c7c\",\r\n \"#919e8b\",\r\n \"#d7ab82\",\r\n \"#6e7074\",\r\n \"#61a0a8\",\r\n \"#efa18d\",\r\n \"#787464\",\r\n \"#cc7e63\",\r\n \"#724e58\",\r\n \"#4b565b\",\r\n ],\r\n backgroundColor: \"#fef8ef\",\r\n textStyle: {},\r\n title: { textStyle: { color: \"#333333\" } },\r\n categoryAxis: {\r\n axisLine: { lineStyle: { color: \"#ccc\" } },\r\n splitLine: { lineStyle: { color: \"#eee\" } },\r\n },\r\n valueAxis: {\r\n axisLine: { lineStyle: { color: \"#ccc\" } },\r\n splitLine: { lineStyle: { color: \"#eee\" } },\r\n },\r\n};\r\n\r\n/** Pastel theme preset */\r\nexport const pastelTheme = {\r\n color: [\r\n \"#c4b5fd\",\r\n \"#a5f3fc\",\r\n \"#fca5a5\",\r\n \"#fde68a\",\r\n \"#a7f3d0\",\r\n \"#fbcfe8\",\r\n \"#c7d2fe\",\r\n \"#fed7aa\",\r\n ],\r\n backgroundColor: \"#fafafa\",\r\n textStyle: { color: \"#555\" },\r\n title: { textStyle: { color: \"#333\" } },\r\n};\r\n\r\n/** Register a named theme with ECharts */\r\nexport function registerTheme(name: string, theme: object): void {\r\n echartsRegisterTheme(name, theme);\r\n}\r\n\r\n/** Register all built-in theme presets */\r\nexport function registerBuiltinThemes(): void {\r\n registerTheme(\"dark-preset\", darkTheme);\r\n registerTheme(\"vintage\", vintageTheme);\r\n registerTheme(\"pastel\", pastelTheme);\r\n}\r\n"]}
|
package/docs/EChart.md
ADDED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
# EChart
|
|
2
|
+
|
|
3
|
+
Base chart component and compound series sub-components for rendering any ECharts chart type in React.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { EChart } from "@particle-academy/fancy-echarts";
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Base Component
|
|
12
|
+
|
|
13
|
+
`EChart` accepts a raw ECharts option object for full control.
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<EChart
|
|
17
|
+
option={{
|
|
18
|
+
xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
|
|
19
|
+
yAxis: { type: "value" },
|
|
20
|
+
series: [{ type: "line", data: [150, 230, 224] }],
|
|
21
|
+
}}
|
|
22
|
+
style={{ height: 400 }}
|
|
23
|
+
/>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Base Props
|
|
27
|
+
|
|
28
|
+
| Prop | Type | Default | Description |
|
|
29
|
+
|------|------|---------|-------------|
|
|
30
|
+
| `option` | `EChartsOption` | **required** | Full ECharts option object |
|
|
31
|
+
| `theme` | `string \| object` | `undefined` | Theme name or object. Auto-detects dark mode when omitted |
|
|
32
|
+
| `renderer` | `"canvas" \| "svg"` | `"canvas"` | Rendering engine |
|
|
33
|
+
| `notMerge` | `boolean` | `false` | Replace option instead of merging |
|
|
34
|
+
| `lazyUpdate` | `boolean` | `false` | Delay chart update |
|
|
35
|
+
| `showLoading` | `boolean` | `false` | Show loading animation |
|
|
36
|
+
| `loadingOption` | `object` | `undefined` | Customize loading spinner |
|
|
37
|
+
| `onEvents` | `Record<string, (params) => void>` | `undefined` | Event handlers keyed by event name |
|
|
38
|
+
| `autoResize` | `boolean` | `true` | Auto-resize on container size change |
|
|
39
|
+
| `style` | `CSSProperties` | `{ width: "100%", height: 400 }` | Container styles |
|
|
40
|
+
| `className` | `string` | `undefined` | CSS class name |
|
|
41
|
+
|
|
42
|
+
Also accepts any `HTMLDivElement` attribute.
|
|
43
|
+
|
|
44
|
+
## Series Sub-Components
|
|
45
|
+
|
|
46
|
+
All sub-components share a simplified props API. They build the ECharts option internally.
|
|
47
|
+
|
|
48
|
+
### Shared Series Props
|
|
49
|
+
|
|
50
|
+
| Prop | Type | Default | Description |
|
|
51
|
+
|------|------|---------|-------------|
|
|
52
|
+
| `data` | `any[] \| { categories?, series[] }` | **required** | Chart data (see formats below) |
|
|
53
|
+
| `title` | `string` | `undefined` | Chart title text |
|
|
54
|
+
| `xAxis` | `EChartsOption["xAxis"]` | `{ type: "category" }` | X-axis config (axis charts only) |
|
|
55
|
+
| `yAxis` | `EChartsOption["yAxis"]` | `{ type: "value" }` | Y-axis config (axis charts only) |
|
|
56
|
+
| `tooltip` | `boolean \| object` | `true` | Tooltip config. `true` = `{ trigger: "axis" }` |
|
|
57
|
+
| `legend` | `boolean \| object` | `false` | Legend config. `true` = default legend |
|
|
58
|
+
| `grid` | `EChartsOption["grid"]` | `undefined` | Grid layout config |
|
|
59
|
+
| `seriesOptions` | `Record<string, any>` | `{}` | Extra options merged into each series |
|
|
60
|
+
| `option` | `Partial<EChartsOption>` | `{}` | Extra ECharts options merged last (overrides everything) |
|
|
61
|
+
|
|
62
|
+
Plus all base props (`theme`, `renderer`, `autoResize`, etc.) and HTML div attributes.
|
|
63
|
+
|
|
64
|
+
### Data Formats
|
|
65
|
+
|
|
66
|
+
**Single series** -- pass an array directly:
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<EChart.Line data={[150, 230, 224, 218, 135]} />
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
**Multi-series** -- pass an object with `categories` and `series`:
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
<EChart.Bar
|
|
76
|
+
data={{
|
|
77
|
+
categories: ["Q1", "Q2", "Q3", "Q4"],
|
|
78
|
+
series: [
|
|
79
|
+
{ name: "2024", data: [120, 200, 150, 80] },
|
|
80
|
+
{ name: "2025", data: [180, 230, 190, 140] },
|
|
81
|
+
],
|
|
82
|
+
}}
|
|
83
|
+
legend
|
|
84
|
+
/>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Available Sub-Components
|
|
88
|
+
|
|
89
|
+
### Axis-based charts
|
|
90
|
+
|
|
91
|
+
These automatically configure `xAxis` / `yAxis`.
|
|
92
|
+
|
|
93
|
+
| Component | Series Type | Typical Data |
|
|
94
|
+
|-----------|-------------|-------------|
|
|
95
|
+
| `EChart.Line` | `line` | `number[]` or `[x, y][]` |
|
|
96
|
+
| `EChart.Bar` | `bar` | `number[]` or `[x, y][]` |
|
|
97
|
+
| `EChart.Scatter` | `scatter` | `[x, y][]` |
|
|
98
|
+
| `EChart.Candlestick` | `candlestick` | `[open, close, low, high][]` |
|
|
99
|
+
| `EChart.Boxplot` | `boxplot` | `[min, Q1, median, Q3, max][]` |
|
|
100
|
+
| `EChart.Heatmap` | `heatmap` | `[x, y, value][]` |
|
|
101
|
+
| `EChart.EffectScatter` | `effectScatter` | `[x, y][]` |
|
|
102
|
+
| `EChart.PictorialBar` | `pictorialBar` | `number[]` |
|
|
103
|
+
|
|
104
|
+
### Non-axis charts
|
|
105
|
+
|
|
106
|
+
These do NOT auto-configure axes.
|
|
107
|
+
|
|
108
|
+
| Component | Series Type | Typical Data |
|
|
109
|
+
|-----------|-------------|-------------|
|
|
110
|
+
| `EChart.Pie` | `pie` | `{ name, value }[]` |
|
|
111
|
+
| `EChart.Radar` | `radar` | `{ name, value[] }[]` (requires `radar` in `option`) |
|
|
112
|
+
| `EChart.Gauge` | `gauge` | `{ value, name? }[]` |
|
|
113
|
+
| `EChart.Funnel` | `funnel` | `{ name, value }[]` |
|
|
114
|
+
| `EChart.Treemap` | `treemap` | `{ name, value, children? }[]` |
|
|
115
|
+
| `EChart.Sunburst` | `sunburst` | `{ name, value?, children? }[]` |
|
|
116
|
+
| `EChart.Sankey` | `sankey` | Requires `nodes` and `links` via `seriesOptions` |
|
|
117
|
+
| `EChart.Graph` | `graph` | Requires `nodes` and `links` via `seriesOptions` |
|
|
118
|
+
| `EChart.Parallel` | `parallel` | `number[][]` (requires `parallelAxis` in `option`) |
|
|
119
|
+
| `EChart.ThemeRiver` | `themeRiver` | `[date, value, name][]` |
|
|
120
|
+
| `EChart.Map` | `map` | `{ name, value }[]` (requires map registration + `seriesOptions.map`) |
|
|
121
|
+
| `EChart.Custom` | `custom` | Any (requires `seriesOptions.renderItem`) |
|
|
122
|
+
|
|
123
|
+
## Examples
|
|
124
|
+
|
|
125
|
+
### Line Chart
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
<EChart.Line
|
|
129
|
+
title="Monthly Sales"
|
|
130
|
+
data={[820, 932, 901, 934, 1290, 1330, 1320]}
|
|
131
|
+
seriesOptions={{ smooth: true, areaStyle: {} }}
|
|
132
|
+
/>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Pie Chart
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
<EChart.Pie
|
|
139
|
+
title="Browser Share"
|
|
140
|
+
data={[
|
|
141
|
+
{ name: "Chrome", value: 65 },
|
|
142
|
+
{ name: "Firefox", value: 15 },
|
|
143
|
+
{ name: "Safari", value: 12 },
|
|
144
|
+
{ name: "Edge", value: 8 },
|
|
145
|
+
]}
|
|
146
|
+
seriesOptions={{ radius: ["40%", "70%"] }}
|
|
147
|
+
legend
|
|
148
|
+
/>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### Multi-Series Bar
|
|
152
|
+
|
|
153
|
+
```tsx
|
|
154
|
+
<EChart.Bar
|
|
155
|
+
title="Revenue by Quarter"
|
|
156
|
+
data={{
|
|
157
|
+
categories: ["Q1", "Q2", "Q3", "Q4"],
|
|
158
|
+
series: [
|
|
159
|
+
{ name: "Product A", data: [120, 200, 150, 80] },
|
|
160
|
+
{ name: "Product B", data: [60, 140, 190, 220] },
|
|
161
|
+
],
|
|
162
|
+
}}
|
|
163
|
+
legend
|
|
164
|
+
/>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### Scatter with Event Handling
|
|
168
|
+
|
|
169
|
+
```tsx
|
|
170
|
+
<EChart.Scatter
|
|
171
|
+
data={[[10, 20], [30, 40], [50, 60], [70, 80]]}
|
|
172
|
+
seriesOptions={{ symbolSize: 12 }}
|
|
173
|
+
onEvents={{
|
|
174
|
+
click: (params) => console.log("Clicked:", params.data),
|
|
175
|
+
}}
|
|
176
|
+
/>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### Gauge
|
|
180
|
+
|
|
181
|
+
```tsx
|
|
182
|
+
<EChart.Gauge
|
|
183
|
+
data={[{ value: 72, name: "Completion" }]}
|
|
184
|
+
seriesOptions={{ detail: { formatter: "{value}%" } }}
|
|
185
|
+
/>
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Full Control via Base Component
|
|
189
|
+
|
|
190
|
+
```tsx
|
|
191
|
+
<EChart
|
|
192
|
+
option={{
|
|
193
|
+
radar: {
|
|
194
|
+
indicator: [
|
|
195
|
+
{ name: "Sales", max: 100 },
|
|
196
|
+
{ name: "Admin", max: 100 },
|
|
197
|
+
{ name: "Tech", max: 100 },
|
|
198
|
+
],
|
|
199
|
+
},
|
|
200
|
+
series: [{
|
|
201
|
+
type: "radar",
|
|
202
|
+
data: [{ value: [80, 60, 90], name: "Team A" }],
|
|
203
|
+
}],
|
|
204
|
+
}}
|
|
205
|
+
theme="dark-preset"
|
|
206
|
+
/>
|
|
207
|
+
```
|
package/docs/EChart3D.md
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
# EChart3D
|
|
2
|
+
|
|
3
|
+
3D chart component that lazy-loads `echarts-gl` and provides sub-components for common 3D chart types.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { EChart3D } from "@particle-academy/fancy-echarts";
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
`echarts-gl` is bundled — no extra peer dependency install is required. The GL engine is dynamically loaded on first render of an `EChart3D`.
|
|
12
|
+
|
|
13
|
+
## Base Component
|
|
14
|
+
|
|
15
|
+
`EChart3D` accepts a raw ECharts option (including 3D-specific options like `grid3D`, `xAxis3D`, etc.). It automatically lazy-loads `echarts-gl` and shows a "Loading 3D engine..." placeholder until ready.
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
<EChart3D
|
|
19
|
+
option={{
|
|
20
|
+
grid3D: {},
|
|
21
|
+
xAxis3D: { type: "value" },
|
|
22
|
+
yAxis3D: { type: "value" },
|
|
23
|
+
zAxis3D: { type: "value" },
|
|
24
|
+
series: [{
|
|
25
|
+
type: "scatter3D",
|
|
26
|
+
data: [[1, 2, 3], [4, 5, 6], [7, 8, 9]],
|
|
27
|
+
}],
|
|
28
|
+
}}
|
|
29
|
+
/>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Base Props
|
|
33
|
+
|
|
34
|
+
| Prop | Type | Default | Description |
|
|
35
|
+
|------|------|---------|-------------|
|
|
36
|
+
| `option` | `EChartsOption` | **required** | Full ECharts option including 3D config |
|
|
37
|
+
| `theme` | `string \| object` | `undefined` | Theme name or object |
|
|
38
|
+
| `renderer` | `"canvas" \| "svg"` | `"canvas"` | Rendering engine |
|
|
39
|
+
| `notMerge` | `boolean` | `false` | Replace option instead of merging |
|
|
40
|
+
| `lazyUpdate` | `boolean` | `false` | Delay chart update |
|
|
41
|
+
| `showLoading` | `boolean` | `false` | Show loading animation |
|
|
42
|
+
| `loadingOption` | `object` | `undefined` | Customize loading spinner |
|
|
43
|
+
| `onEvents` | `Record<string, (params) => void>` | `undefined` | Event handlers |
|
|
44
|
+
| `autoResize` | `boolean` | `true` | Auto-resize on container change |
|
|
45
|
+
| `style` | `CSSProperties` | `{ width: "100%", height: 500 }` | Container styles |
|
|
46
|
+
| `className` | `string` | `undefined` | CSS class name |
|
|
47
|
+
|
|
48
|
+
## Sub-Components
|
|
49
|
+
|
|
50
|
+
### Shared Series Props
|
|
51
|
+
|
|
52
|
+
| Prop | Type | Default | Description |
|
|
53
|
+
|------|------|---------|-------------|
|
|
54
|
+
| `data` | `any` | **required** | Chart data (typically `[x, y, z][]`) |
|
|
55
|
+
| `title` | `string` | `undefined` | Chart title |
|
|
56
|
+
| `tooltip` | `boolean \| object` | `true` | Tooltip config |
|
|
57
|
+
| `seriesOptions` | `Record<string, any>` | `{}` | Extra options merged into the series |
|
|
58
|
+
| `option` | `Partial<EChartsOption>` | `{}` | Extra ECharts options merged last |
|
|
59
|
+
| `style` | `CSSProperties` | `undefined` | Container styles |
|
|
60
|
+
| `className` | `string` | `undefined` | CSS class name |
|
|
61
|
+
|
|
62
|
+
### EChart3D.Bar
|
|
63
|
+
|
|
64
|
+
3D bar chart. Auto-configures `xAxis3D`, `yAxis3D`, `zAxis3D`, and `grid3D`.
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<EChart3D.Bar
|
|
68
|
+
title="3D Bars"
|
|
69
|
+
data={[[0, 0, 5], [0, 1, 3], [1, 0, 8], [1, 1, 2]]}
|
|
70
|
+
/>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
**Data format:** `[x, y, z][]`
|
|
74
|
+
|
|
75
|
+
### EChart3D.Scatter
|
|
76
|
+
|
|
77
|
+
3D scatter plot. Auto-configures 3D axes and grid.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
<EChart3D.Scatter
|
|
81
|
+
data={[[1, 2, 3], [4, 5, 6], [7, 8, 9], [2, 4, 6]]}
|
|
82
|
+
seriesOptions={{ symbolSize: 8 }}
|
|
83
|
+
/>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
**Data format:** `[x, y, z][]`
|
|
87
|
+
|
|
88
|
+
### EChart3D.Line
|
|
89
|
+
|
|
90
|
+
3D line chart. Auto-configures 3D axes and grid.
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
<EChart3D.Line
|
|
94
|
+
data={[[0, 0, 0], [1, 1, 1], [2, 4, 8], [3, 9, 27]]}
|
|
95
|
+
/>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
**Data format:** `[x, y, z][]`
|
|
99
|
+
|
|
100
|
+
### EChart3D.Surface
|
|
101
|
+
|
|
102
|
+
3D surface chart. Auto-configures 3D axes and grid.
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
<EChart3D.Surface
|
|
106
|
+
title="Surface"
|
|
107
|
+
seriesOptions={{
|
|
108
|
+
wireframe: { show: true },
|
|
109
|
+
equation: {
|
|
110
|
+
x: { min: -3, max: 3, step: 0.1 },
|
|
111
|
+
y: { min: -3, max: 3, step: 0.1 },
|
|
112
|
+
z: (x, y) => Math.sin(x * x + y * y) * x / Math.PI,
|
|
113
|
+
},
|
|
114
|
+
}}
|
|
115
|
+
/>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
**Data format:** `[x, y, z][]` or use `seriesOptions.equation` for parametric surfaces.
|
|
119
|
+
|
|
120
|
+
### EChart3D.Globe
|
|
121
|
+
|
|
122
|
+
Globe visualization. Uses a different prop interface -- no `data` prop. Configure via `globe` and `series`.
|
|
123
|
+
|
|
124
|
+
```tsx
|
|
125
|
+
<EChart3D.Globe
|
|
126
|
+
title="Earth"
|
|
127
|
+
globe={{
|
|
128
|
+
baseTexture: "/earth-texture.jpg",
|
|
129
|
+
heightTexture: "/earth-height.jpg",
|
|
130
|
+
shading: "lambert",
|
|
131
|
+
atmosphere: { show: true },
|
|
132
|
+
}}
|
|
133
|
+
series={[{
|
|
134
|
+
type: "scatter3D",
|
|
135
|
+
coordinateSystem: "globe",
|
|
136
|
+
data: [[-74, 40.7, 1000], [2.35, 48.86, 800]],
|
|
137
|
+
}]}
|
|
138
|
+
/>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
#### Globe Props
|
|
142
|
+
|
|
143
|
+
| Prop | Type | Default | Description |
|
|
144
|
+
|------|------|---------|-------------|
|
|
145
|
+
| `title` | `string` | `undefined` | Chart title |
|
|
146
|
+
| `globe` | `object` | `{ baseTexture: "", shading: "lambert", atmosphere: { show: true } }` | Globe configuration |
|
|
147
|
+
| `series` | `any[]` | `[]` | Additional series to overlay on the globe |
|
|
148
|
+
| `option` | `Partial<EChartsOption>` | `{}` | Extra ECharts options merged last |
|
|
149
|
+
|
|
150
|
+
## Examples
|
|
151
|
+
|
|
152
|
+
### Scatter with Custom Grid
|
|
153
|
+
|
|
154
|
+
```tsx
|
|
155
|
+
<EChart3D.Scatter
|
|
156
|
+
title="3D Distribution"
|
|
157
|
+
data={points}
|
|
158
|
+
seriesOptions={{ symbolSize: 5, itemStyle: { opacity: 0.8 } }}
|
|
159
|
+
option={{
|
|
160
|
+
grid3D: { viewControl: { autoRotate: true } },
|
|
161
|
+
}}
|
|
162
|
+
/>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Full Control via Base
|
|
166
|
+
|
|
167
|
+
```tsx
|
|
168
|
+
<EChart3D
|
|
169
|
+
option={{
|
|
170
|
+
visualMap: { max: 100, inRange: { color: ["#50a3ba", "#eac736", "#d94e5d"] } },
|
|
171
|
+
grid3D: { viewControl: { projection: "orthographic" } },
|
|
172
|
+
xAxis3D: {},
|
|
173
|
+
yAxis3D: {},
|
|
174
|
+
zAxis3D: {},
|
|
175
|
+
series: [{ type: "bar3D", data: myData, shading: "lambert" }],
|
|
176
|
+
}}
|
|
177
|
+
/>
|
|
178
|
+
```
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
# EChartGraphic
|
|
2
|
+
|
|
3
|
+
Component for custom drawing via the ECharts graphic layer. Supports shapes, text, images, and interactive elements.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { EChartGraphic } from "@particle-academy/fancy-echarts";
|
|
9
|
+
import type { GraphicElement, EChartGraphicProps } from "@particle-academy/fancy-echarts";
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Props
|
|
13
|
+
|
|
14
|
+
| Prop | Type | Default | Description |
|
|
15
|
+
|------|------|---------|-------------|
|
|
16
|
+
| `elements` | `GraphicElement[]` | **required** | Array of graphic elements to render |
|
|
17
|
+
| `option` | `Partial<EChartsOption>` | `{}` | Extra ECharts options merged into the final option |
|
|
18
|
+
| `theme` | `string \| object` | `undefined` | Theme name or object |
|
|
19
|
+
| `renderer` | `"canvas" \| "svg"` | `"canvas"` | Rendering engine |
|
|
20
|
+
| `notMerge` | `boolean` | `false` | Replace option instead of merging |
|
|
21
|
+
| `lazyUpdate` | `boolean` | `false` | Delay chart update |
|
|
22
|
+
| `showLoading` | `boolean` | `false` | Show loading animation |
|
|
23
|
+
| `loadingOption` | `object` | `undefined` | Customize loading spinner |
|
|
24
|
+
| `onEvents` | `Record<string, (params) => void>` | `undefined` | Event handlers |
|
|
25
|
+
| `autoResize` | `boolean` | `true` | Auto-resize on container change |
|
|
26
|
+
| `style` | `CSSProperties` | `{ width: "100%", height: 400 }` | Container styles |
|
|
27
|
+
| `className` | `string` | `undefined` | CSS class name |
|
|
28
|
+
|
|
29
|
+
## GraphicElement
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
interface GraphicElement {
|
|
33
|
+
type: "rect" | "circle" | "ring" | "arc" | "polygon" | "polyline"
|
|
34
|
+
| "path" | "image" | "text" | "group";
|
|
35
|
+
left?: number | string;
|
|
36
|
+
top?: number | string;
|
|
37
|
+
right?: number | string;
|
|
38
|
+
bottom?: number | string;
|
|
39
|
+
shape?: Record<string, any>;
|
|
40
|
+
style?: Record<string, any>;
|
|
41
|
+
children?: GraphicElement[];
|
|
42
|
+
onclick?: (e: any) => void;
|
|
43
|
+
onmouseover?: (e: any) => void;
|
|
44
|
+
onmouseout?: (e: any) => void;
|
|
45
|
+
[key: string]: any; // additional ECharts graphic properties
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Examples
|
|
50
|
+
|
|
51
|
+
### Basic Shapes
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
<EChartGraphic
|
|
55
|
+
elements={[
|
|
56
|
+
{
|
|
57
|
+
type: "rect",
|
|
58
|
+
left: 50,
|
|
59
|
+
top: 50,
|
|
60
|
+
shape: { width: 200, height: 100, r: 8 },
|
|
61
|
+
style: { fill: "#5470c6", stroke: "#333", lineWidth: 2 },
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
type: "circle",
|
|
65
|
+
left: 350,
|
|
66
|
+
top: 100,
|
|
67
|
+
shape: { r: 50 },
|
|
68
|
+
style: { fill: "#91cc75" },
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
type: "text",
|
|
72
|
+
left: "center",
|
|
73
|
+
top: 200,
|
|
74
|
+
style: {
|
|
75
|
+
text: "Hello ECharts",
|
|
76
|
+
fontSize: 24,
|
|
77
|
+
fontWeight: "bold",
|
|
78
|
+
fill: "#333",
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
]}
|
|
82
|
+
/>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Interactive Element
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
<EChartGraphic
|
|
89
|
+
elements={[
|
|
90
|
+
{
|
|
91
|
+
type: "rect",
|
|
92
|
+
left: "center",
|
|
93
|
+
top: "middle",
|
|
94
|
+
shape: { width: 160, height: 50, r: 10 },
|
|
95
|
+
style: { fill: "#5470c6", text: "Click me", fontSize: 16, fill: "#fff" },
|
|
96
|
+
onclick: () => alert("Clicked!"),
|
|
97
|
+
onmouseover: (e) => { e.target.style.opacity = 0.8; },
|
|
98
|
+
onmouseout: (e) => { e.target.style.opacity = 1; },
|
|
99
|
+
},
|
|
100
|
+
]}
|
|
101
|
+
/>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Group with Children
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
<EChartGraphic
|
|
108
|
+
elements={[
|
|
109
|
+
{
|
|
110
|
+
type: "group",
|
|
111
|
+
left: 100,
|
|
112
|
+
top: 100,
|
|
113
|
+
children: [
|
|
114
|
+
{
|
|
115
|
+
type: "rect",
|
|
116
|
+
shape: { width: 120, height: 80 },
|
|
117
|
+
style: { fill: "#fac858" },
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
type: "text",
|
|
121
|
+
left: 10,
|
|
122
|
+
top: 30,
|
|
123
|
+
style: { text: "Grouped", fill: "#333", fontSize: 14 },
|
|
124
|
+
},
|
|
125
|
+
],
|
|
126
|
+
},
|
|
127
|
+
]}
|
|
128
|
+
/>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Combined with Chart Option
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
<EChartGraphic
|
|
135
|
+
elements={[
|
|
136
|
+
{
|
|
137
|
+
type: "text",
|
|
138
|
+
left: "center",
|
|
139
|
+
top: 20,
|
|
140
|
+
style: { text: "Watermark", fontSize: 48, fill: "rgba(0,0,0,0.05)" },
|
|
141
|
+
},
|
|
142
|
+
]}
|
|
143
|
+
option={{
|
|
144
|
+
xAxis: { type: "category", data: ["A", "B", "C"] },
|
|
145
|
+
yAxis: { type: "value" },
|
|
146
|
+
series: [{ type: "bar", data: [10, 20, 30] }],
|
|
147
|
+
}}
|
|
148
|
+
/>
|
|
149
|
+
```
|