在大数据盛行的现在，大屏数据可视化也已经成为了一个热门的话题。大屏可视化可以运用在众多领域中，比如工业互联网、医疗、交通、工业控制等等。将各项重要指标数据以图表、各种图形等形式表现在一个页面上，各种数据一目了然。随着浏览器不断发展完善，使用 Web 做大屏展示也已经不是新鲜的事了。市面上已有不少的大屏解决方案，大部分是以放各种图表的形式呈现，基本是是 2D 的呈现。有些是根据投放屏幕的比例设计出来的，并不能自适应于其它的屏幕比例。最近学习了 Hightopo 的 HT for Web 产品，特有的矢量，在各种比例下不失真，加上布局机制，解决了不同屏幕比例下的展示问题，加上 3D 的呈现部分，可以做出别具一格的大屏系统。在这里与大家分享学习，先来张整体效果图：
本文主要介绍内容如下，文章中以 HT 作为 HT for Web 的简称：
页面搭建
数据对接
动画效果实现
其他细节优化
一、页面搭建
在这个系统中，我们需要创建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 来呈现 2D 和 3D 的内容。设计师给到的 display.json 是 2D 图纸的内容，主要是使用矢量绘制呈现，有一些图表是用了 Echarts，HT 也有机制可以让我们使用它们。scene.json 是 3D 场景的内容，大部分模型都是通过 3dMax 建模生成的，该建模工具可以导出 obj 与 mtl 文件，在 HT 中可以通过解析 obj 与 mtl 文件来生成 3d 场景中的所有复杂模型，简单的模型也可以通过 HT 来建模。关键代码如下：
var g2d = new ht.graph.GraphView();
var g3d = new ht.graph3d.Graph3dView();
// 将 3D 组件加入到 body 下
g3d.addToDOM();
// 将 2D 组件加入到 3D 组件的根 div 下，父子 DOM 事件会冒泡，这样不会影响 3D 场景的交互
g2d.addToDOM(g3d.getView());
g2d.deserialize('display.json', function(json, dm, g2d, datas){
// TODO 2D 反序列化完成回调，后面会讲到
});
g3d.deserialize('scene.json', function(json, dm, g3d, datas) {
// TODO 3D 反序列化完成回调，后面会讲到
});