RayChart Brings ECharts-Style Config to 3D Charts in Vue

Last week I took on a data dashboard project. The requirements doc said, "Visual effects should be dazzling, preferably 3D." We all know the client's aesthetic — that "I don't understand it but it looks impressive" tech vibe.

I started by building line charts and bar charts with ECharts, and I thought they looked decent. The client took one glance: "Hmm… can you make it more three-dimensional?"

More three-dimensional. Easy for them to say.

I know a bit of Three.js, but writing a 3D bar chart from scratch — calculating coordinates, tweaking the camera, configuring lighting — would eat up a whole day, not to mention adding interactions and map fly-lines later. That was the moment I realized: I didn't need to build a wheel; I needed to find one.

Then I found RayChart.

Up and running in 3 minutes

Install via npm:

npm install raychart

Then install its two "buddies" (it doesn't bundle Vue and Three; it uses the versions already in your project):

npm install vue three

And… that's it. Look at the code:

const option = {
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70, 110, 130]
  }]
}

Place a component in the template:

<div style="height: 500px">
  <RayBar :option="option" />
</div>

Done. A 3D bar chart appears, complete with rotation, lighting, and shadows — drag with the mouse to spin it.

You've probably noticed: the configuration syntax is nearly identical to ECharts. Anyone who has used ECharts can pick this up instantly.

What it can actually draw

I counted the supported chart types: bar, line, pie, scatter, radar, surface, funnel, gauge, liquid-fill, word cloud, graph, heatmap, plus a 3D map — 16 types in total.

The 3D map is the headline act. For projects like smart cities, store distribution, or logistics routes, fly-lines, flow lines, and path animations are all built in — no need to hand-tune Three.js curve interpolation. The "nationwide store distribution" page on my dashboard took half a day; previously it would have taken at least three.

The liquid-fill chart is also interesting. For metrics like completion rate or water-level percentage, watching the liquid slowly rise inside a sphere feels far better than staring at a bare number.

A few small pitfalls I stumbled into

1. You must set a height on the container outside the component, otherwise the chart simply "disappears" — I fell into this trap.
2. Remember to import the stylesheet: import 'raychart/dist/raychart.css', or some effects will look distorted.
3. It's written in TypeScript with full type definitions, so VSCode provides autocomplete when writing the config — you're unlikely to mistype a key name.

A final word

After years of doing data visualization, my biggest takeaway is: what the client wants isn't a chart; it's the feeling that "the data has been seen."

The same dataset, shown as a 2D line versus a 3D solid bar on a big screen, carries a completely different presence. RayChart is the tool that quickly produces that "feeling" — you don't need to know computer graphics, you don't need to tweak matrices. You give it the data, it gives you the effect.

I delivered that project last week, approved in one round. As the client signed off, they said, "This effect works, it looks pretty premium."

Alright, worth it.