1、大屏可视化概述：什么是大屏可视化、应用场景、技术选型对比

大家好，我是这门课的主讲。今天咱们聊聊大屏可视化。

说实话，我第一次接触大屏项目是在2017年。那时候客户要一个「能放在展厅里、看起来很酷的大屏幕」。我心想，这不就是做个图表放大吗？结果一做就是三个月，踩了无数坑。

嗯，今天这节是开胃菜。咱们把概念理清楚，后面才好动手。

什么是大屏可视化？

大屏可视化，说白了就是把数据变成图形，投到超大屏幕上。你想想看，一块3米宽、1.5米高的屏幕，上面跑着实时数据、动态图表、地图轨迹——这就是大屏。

它跟普通报表不一样。普通报表是给人「看」的，大屏是给人「感受」的。我习惯把大屏比作「数据驾驶舱」——你坐在驾驶位，仪表盘、导航、油量全在眼前，扫一眼就知道全局。

应用场景有哪些？

我这些年做过的项目，基本覆盖了这几个方向：

• 智慧城市：交通流量、安防监控、环境指数。我记得有个项目，市长站在大屏前看实时车流，那个压力真大——数据不能错，一秒都不能断。
• 企业运营中心：销售看板、生产进度、设备状态。说白了就是老板的「数据仪表盘」。
• 指挥调度中心：应急指挥、军事演练、物流调度。这种场景对实时性要求最高，我曾经遇到过数据延迟 3 秒就被客户投诉。
• 展览展示：科技馆、企业展厅、发布会。这种更偏视觉，动效要炫，但数据可以不是实时的。

技术选型对比：ECharts vs D3.js vs Three.js

这是新手最纠结的问题。我直接说结论：没有银弹，看场景选。

维度	ECharts	D3.js	Three.js
定位	开箱即用的图表库	数据驱动的 DOM 操作库	WebGL 3D 引擎
上手难度	低，配置项即可	中高，需要 SVG/CSS 基础	高，需要 3D 数学基础
图表类型	20+ 内置图表	任意，但需手写	3D 场景、模型
性能	中等，万级数据	高，可定制渲染	极高，GPU 加速
大屏适用度	★★★★★	★★★☆☆	★★★★☆

ECharts：大屏首选

我个人习惯，80% 的大屏项目都用 ECharts。为什么？

• 配置简单，一个 option 对象搞定
• 主题丰富，暗色系大屏直接套用
• 社区活跃，遇到问题百度一下就有答案

举个例子，一个基础的折线图：

// ECharts 示例
const chart = echarts.init(document.getElementById('main'));
chart.setOption({
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [150, 230, 224] }]
});

你看，10 行代码就出来了。我在项目中遇到紧急需求，经常用 ECharts 快速出图，客户看了也说好。

D3.js：灵活但费时

D3.js 不是图表库，它是数据驱动 DOM 的工具。你可以用它画任何东西——桑基图、弦图、力导向图，甚至自定义形状。

但代价是：一切都要手写。我曾经用 D3 做一个自定义仪表盘，光刻度线就调了三天。

// D3.js 示例：画一个圆
d3.select('svg')
  .append('circle')
  .attr('cx', 100)
  .attr('cy', 100)
  .attr('r', 50)
  .style('fill', 'steelblue');

说实话，大屏项目里我很少用 D3。除非你要做高度定制化的图表，或者数据量特别大（百万级），否则 ECharts 更香。

Three.js：3D 场景利器

Three.js 是 WebGL 的封装，用来做 3D 场景。大屏上常见的「数字孪生」「3D 地图」「旋转地球」都是它做的。

但门槛确实高。你需要理解场景、相机、光源、材质这些概念。我刚开始学的时候，一个立方体转了三天才转对方向。

// Three.js 示例：创建一个旋转立方体
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

选型总结

好了，咱们捋一下：

• 常规大屏（折线图、柱状图、饼图、地图）→ ECharts
• 定制化图表（特殊形状、复杂交互）→ D3.js
• 3D 场景（数字孪生、3D 地图、模型展示）→ Three.js

你可能会问：「能不能混着用？」当然可以。我有个项目就是 ECharts 做 2D 图表，Three.js 做 3D 场景，中间用 iframe 或者 canvas 桥接。但要注意性能——别让浏览器崩了。

嗯，这一节就到这里。下一节咱们开始动手，从设计稿到代码，一步步搭一个大屏出来。