RayChart Brings ECharts-Style Config to 3D Charts in Vue
3D dashboards are a frequent client demand, but building them from raw Three.js means days of coordinate math, camera setup, and animation tuning. RayChart collapses that to an ECharts-like config object, so a team that already knows ECharts can ship 3D visuals without hiring or becoming graphics programmers.
RayChart wraps Three.js rendering behind an ECharts-compatible option-object API. A bar chart needs only a series type and a data array dropped into a Vue component; the library handles lighting, shadows, and mouse-driven rotation automatically. The configuration style means anyone who has used ECharts can produce 3D visuals immediately, with TypeScript definitions providing editor autocomplete.
The library ships 16 chart types: bar, line, pie, scatter, radar, surface, funnel, gauge, liquid-fill, word cloud, graph, heatmap, and a 3D map. The 3D map is the standout — it bakes in fly-lines, flow lines, and path animations that would otherwise require manual curve interpolation in Three.js. A store-distribution dashboard page that previously took three days was finished in half a day.
A few practical gotchas: the container element needs an explicit height or the chart renders invisibly, and the library's CSS file must be imported separately to avoid visual breakage. The project is written in TypeScript with full type definitions, so VSCode catches misconfigured keys at development time.
RayChart's strategy — mirroring a dominant 2D library's API for a 3D equivalent — lowers the adoption barrier to near zero for the large existing ECharts user base.
The library does not bundle Vue or Three.js; it relies on peer dependencies already in the project, which avoids version conflicts and keeps the bundle smaller.
3D map fly-lines and path animations are pre-built abstractions over Three.js curve interpolation, removing the most time-consuming part of geo-visualization for dashboard developers.