前端通过什么技术可以绘制这样炫酷的数据显示界面呢？
可以直接用 H5 + JS + CSS 等技术实现，但是实际情况，从头开始显然不现实，你可以站在「巨人」的肩膀上。
1 ECharts
ECharts 是百度开源的前端互动式图表库，有非常多开箱即用的图表，功能强大，社区活跃，文档资源丰富。已经由百度贡献给了 Apache 开源基金会，算是同类产品中非常优秀的了。
使用非常简单，例如，绘制一个折线图。
ECharts 的设计理念是配置式的，也就是绘制图表理论上不需要编写代码（除了初始化），只需要提供一个配置对象即可，所有的内容都可以通过配置调整。而且呈现的内容是互动式的，并且可以通过主题整体更换配色。
上面的例子非常简单，下面来点复杂的。
上面的图片均来自官方例子，官方例子库已经提供来几十种图表的数百种案例，基本可以先选择想要实现的效果，然后模仿生成配置来实现。
Examples - Apache ECharts (incubating)?www.echartsjs.com2 AntV
AntV 是蚂蚁金服开源的数据可视化解决方案，包含了一系列开源库，如 G2 可视化引擎，G2Plot 图表库，G6 图可视化引擎，F2 移动可视化引擎，Graphin 图分析组件，ChartCube 在线图表制作，L7 地理空间可视化框架。
功能强大，涵盖面也非常广。例如 G2Plot 是图表库，对标的就是 ECharts，而 G2 是可视化引擎，是更低级但功能更强大的 API，可以理解为绘图库。AntV 的设计理念是声明式，而 G2 是基于一套比较成熟的图形语法《The Grammar of Graphics》(Leland Wilkinson 著) 开发的。
下面是使用 G2Plot 绘制折线图。
官方也有非常完善的文档和案例库。
AntV?antv.vision
3 HighCharts
HighCharts 也是比较著名的开源图表库，个人非商业使用免费。语法也是和 ECharts 差不多的配置式。
官方也提供了非常丰富的文档和案例库，有中文。
https://www.highcharts.com/demo?www.highcharts.com
4 D3
D3 是另一款非常著名的互动式绘图引擎，也算是偏底层绘图的库，类似于 G2。
绘图功能非常强大和灵活，但是因为偏底层，所以实现代码量较多。
官方文档和案例库也是非常丰富的，不过都是英文的。也有用户中文翻译的文档。
Gallery?observablehq.com
先介绍这么多，上面的只要掌握一款，基本上就能实现你需要的可视化功能。
总结一下
- 如果需要快速上手，且绘制图表都比较常见，推荐使用 ECharts。
- 如果需要往这方面深入研究，且应用平台比较多，图表需要非常个性化，推荐使用 AntV 或者 D3。
- ECharts 入门简单，上手容易，但是想要实现个性化的图表就有点困难。
- AntV 有一套理论基础，入门比较难，但是上手之后多款产品覆盖面广，个性化定制比较容易。
- HighCharts 入门简单，但是商业使用需要授权。
- D3 入门比较难，但是上手之后个性化定制比较容易。
有很多数据可视化的开源库，这里首推一个 echarts
https://www.echartsjs.com?www.echartsjs.com有中文文档，易上手，对国人比较友好，而且非常强大，做一个你说的那种页面绝对够用了。
目前的数据可视化大屏工具是用组件开发的，这也降低了学习门槛，非专业的工程师甚至普通人都可以尝试开发，更别说还赠送海量模型了，连双十一天猫的数据大屏都可以授权下载，可见阿里云是非常下成本的，不过这显示不出前端开发的优势，因为这是无代码开的界面，所以我推荐开发组合工具ThingJS+ThingDepot+Echarts。
数据可视化大屏常见的是可视化场景搭配2D图表，如果要做3D版本，可以尝试一款基于webgl的3D库ThingJS，把场景模型导入二次开发平台，可以基于js开发逻辑进行效果开发，包括一些动画参数和颜色设置，再加入图表开发（比如Echarts免费开发库），轻松完成以下3D城市应用构建。
免费学习笔记欢迎领取：ThingJS：一个3D城市地图应用工具，等你获取
物联网3D可视化PAAS平台 - ThingJS 进入
看起来很厉害对不对？其实
表格用echarts
地图图用canvas画甚至简单的可以用map area
布局就普通的div+css
光效用css滤镜
你看到的其他哪些很酷炫的画面用图片
就能完成了哈哈！
图表组件库+html，css，js就可以
现在的可视化的标准要求就是这样。
图标库比如
Echarts
Hightcharts
d3
这些解决你的图表问题，饼图，柱状图，折线图。
将他们布局成你要的样式，就需要html,css,js了。如果用前端框架
那就是vue，react那一套
底层都是使用 SVG 或者 Canvas 实现。
我曾用VUE为主，实现过这种大屏展示项目。
一个职业前端拿到这样的项目，分析的点不止是外观（「炫酷」），而要考虑多个维度：
1、总的框架实现。我前面的项目用的是vue+element的一个框架：vue-element-admin。框架帮你搞定很多事，随便举2个点：
- 图标字体。那些小图标你总要实现吧？
- 自适应。画面宽度高度总要能适应窗口吧？宽度变化时，每一个格子内的图表要变化宽度吧？要知道，大家广泛使用的「百度echarts」在容器改变宽度后，并不会自动刷新，而要自己封闭刷新逻辑。
如果你这个页面是一个大项目中的一页，你还要考虑更多的问题。
如果是一个单独的页面，你至少还要考虑下面的问题：
2、视觉效果保真度。一般的图表组件都能做到基本的图表感觉，比如常见的柱图、饼图、全国地图，但是要做到很独特，就必然要引入比如渐变色、发光特效、阴影特效，拿echarts为例，这些特效全都是「数据」。细节越多，数据越多，这中间要占用大量的开发时间。---太漂亮的设计稿，前端是要有所取舍的，甚至可以因为时间或开发费用的关系，会丢弃一些细节。
3、数据层面。这涉及后端数据如何传送给前端，以及前端进行数据轮换、组件封装的技巧了。比如那个图表是要1秒钟实时变化的，前端就要撰写相应的刷新机制。
4、小功能点：动画层面。我写的项目中还会有一些小的装饰动画（与数据展示无关的动画），比如边框隔2秒钟闪一下，或是一个亮点沿窗边运动一下。这些简单的要用CSS动画实现，复杂的要用SVG动画。如果要集成度高，用起来方便，也要封闭成组件。我试用过另一个框架：DataV。
综上，这样的一个页面，在我看来，还是比较考验前端综合能力。
文中提到的两个框架链接：
Vue Element Admin?panjiachen.github.ioDataV?datav.jiaminghi.com
canvas 和svg，可以cover 90%的业务场景，再进阶就是webgl了
其实根本不需要前端也可以。可以用下阿里的datav。
DataV数据可视化-阿里云?help.aliyun.com
推荐阅读：
