Rendering 3D charts requires an expensive WebGL engine (echarts-gl) that breaks the main bundle and frustrates data visualization workflows. Without lazy-loading, every consumer pays the bundle penalty upfront even if they never render a 3D chart. Without stable handles, agents cannot read chart state or drive interactions via MCP bridges. Without JSON-friendly data shapes, servers must pre-compose echarts options instead of letting agents populate charts reactively.

EChart3D is a lazy-loaded, controlled Apache ECharts wrapper that defers echarts-gl into its own chunk until first mount. It exposes the full option prop (EChartsOption from echarts), binds chart events via onEvents, and offers convenience subcomponents—EChart3D.Bar, EChart3D.Scatter, EChart3D.Line, EChart3D.Surface, and EChart3D.Globe—that auto-wire 3D axes and grids so you only pass data and optional seriesOptions. The base component auto-detects system dark mode (transparent background) and auto-resizes on container change. Renderer is configurable as "canvas" (default) or "svg".

Import EChart3D from @particle-academy/fancy-echarts, then either pass a full option object—<EChart3D option={{ xAxis3D: { type: "value" }, series: [{ type: "scatter3D", data }] }} />—or use a convenience subcomponent—<EChart3D.Bar data={data} title="Sales" />. Call registerCharts or registerAll once at app startup to register echarts series/components; echarts-gl loads on mount and is optional (peer dependency). Agents can drive via onEvents (read state) or by updating option (mutate chart); stable handles live in the echarts instance (accessed via ref on the chart DOM node) and ECharts’ built-in selection/click APIs.