ECharts 太平面？试试这款 Vue 3D 图表库

上周接了个数据大屏的活，需求文档里写着"视觉效果要炫，最好 3D"。甲方爸爸的审美，大家都懂------就是那种"我看不懂但觉得厉害"的科技感。

一开始我用 ECharts 搭了折线图和柱状图，自认为还行。结果甲方看了一眼："嗯......能不能让它立体一点？"

立体一点。说得轻巧。

Three.js 我倒是会一点，但让我从零写个 3D 柱状图，光算坐标、调相机、配光照就得折腾一整天，更别说后面还要做交互、做地图飞线。那一刻我意识到：我需要的不是造轮子，是找轮子。

然后我找到了 RayChart。

3 分钟上手

npm 装一下：

npm install raychart

再装它的两个"好兄弟"（vue 和 three 它不自带，用的是你自己项目里的版本）：

npm install vue three

然后......就没有然后了。看代码：

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

模板里放一个组件：

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

完了。3D 柱状图出来了，带旋转、带光照、带阴影，鼠标一拖就能转。

你可能看出来了，这配置写法跟 ECharts 几乎一模一样。用过 ECharts 的人，无缝上手。

它到底能画什么

我把它支持的图表类型数了数：柱状、折线、饼图、散点、雷达、曲面、漏斗、仪表、水球、词云、关系图、热力图，外加一个 3D 地图，一共 16 种。

3D 地图是重头戏。做智慧城市、门店分布、物流轨迹这类项目，飞线、流动线、路径动画全是现成的，不用自己调 Three.js 的曲线插值。我那个大屏里的"全国门店分布"页面，半天搞定，以前最少写三天。

水球图也很有意思。做完成率、水位占比这种指标，一个圆球里水位慢慢涨上来，观感比光秃秃的数字好太多。

几个我踩过的小坑

1. 组件外面一定要给容器设高度，不然图表直接"隐身"，这个坑我掉进去过。
2. 记得引入样式：import 'raychart/dist/raychart.css'，不然部分效果会变形。
3. 它是 TypeScript 写的，类型定义全带，VSCode 里写配置有提示，基本不会配错键名。

最后说两句

做可视化这几年，我最大的感受是：甲方要的不是图表，是"数据被看见"的感觉。

同样的数据，2D 折线和 3D 立体柱，往大屏上一放，气场完全不一样。RayChart 就是帮你把这种"感觉"快速做出来的工具------不用你懂图形学，不用你调矩阵，你把数据给它，它把效果给你。

我那项目上周交付了，一次过稿。甲方在验收单上签字的时候说了句："这个效果可以，挺高级的。"

行，值了。