实战「外卖实战」数据大屏
基于 Vue 3.0 + EChart 4.0 开发
前置学习
具备javascript、html、css的基础
具备Vue的使用基础
了解npm和webpack的基本概念
学习指南
课程将分为四个主要阶段：基础阶段、数据报表项目、数据大屏项目和移动报表项目
数据可视化应用场景
什么是数据可视化？
基本概念
TIP
数据可视化，是关于数据视觉表现形式的科学技术研究
这个概念向我们传达了两个信息：
- 数据可视化是一门学科
- 数据可视化与数据和视觉有关
数据可视化简单理解，就是将数据转换成易于人员辨识和理解的视觉表现形式，如各种 2D 图表、3D 图表、地图、矢量图等等，随着技术的不断进步，数据可视化的边界也在不断扩大
数据可视化的发展历史
起源
数据可视化起源于 20 世纪 60 年代诞生的计算机图形学
TIP
计算机图形学(Computer Graphics，简称CG)是一种使用数学算法将二维或三维图形转化为计算机显示器的栅格形式的科学
计算机图形学广泛应用于各个领域，深刻影响和改变着我们的生活。
如果你想学习计算机图形学，可以从这里入门
数据可视化
在获得计算机图形学发展后，先后经历了科学可视化、信息可视化和数据可视化三个阶段，最初由科研人员提出科学建模和数据的可视化需求，在进入 20 世纪 90 年代后，出现大量单机数据可视化需求，EXCEL 是这个时期的代表，互联网时代各种产品兴起，大数据爆发式增长，促使数据可视化技术飞速发展
数据可视化应用场景
简单应用
特点
- 单机离线
- 数据量小、维度少
典型应用
- Excel
- XMind
- Visio
- OminiGraffle
复杂应用
特征
- 互联网应用
- 数据量大，维度多
典型应用
- 数据大屏
- 数据报表
- 地图
数据可视化发展前景
发展趋势
-
逐步成为前端工程师的标准技能
-
具备可大大增长自身的竞争力
-
未来具有广阔的发展前景
- 数据可视化产品化或服务化，类似阿里云 datav、腾讯 云图
- 往其他绘图领域发展，如浏览器游戏、3D 绘图、绘图工具等等
数据可视化前端技术选型
数据可视化解决方案
前端数据可视化解决方案如下：
Skia
Skia 是 Chrome 和 Android 的底层 2D 绘图引擎，具体可参考百度百科，Skia 采用 C++ 编程，由于它位于浏览器的更底层，所以我们平常接触较少
对底层绘图感兴趣的同学可以从这个案例入手，了解一下 C++ 的可视化编程。
OpenGL
OpenGL（Open Graphics Library）是2D、3D图形渲染库，它可以绘制从简单的2D图形到复杂的3D景象。OpenGL
常用于 CAD、VR、数据可视化和游戏等众多领域。
Chrome
Chrome 使用 Skia 作为绘图引擎，向上层开放了 canvas、svg、WebGL、HTML 等绘图能力。
技术选型
ECharts VS Highcharts
Highcharts 和 ECharts 的争论非常多，整体来说，我个人的感受是：
- Highcharts 能够兼容 IE6+，ECharts 通过 VML 兼容低端浏览器
- Highcharts 文档体验略胜一筹
- Highcharts 收费，这是很多开发者转向 ECharts 的主要原因
- Highcharts 基于 svg 实现，ECharts 默认采用 canvas 渲染，4.0 支持 svg 渲染
- ECharts 国内知名度更高，国内企业认可度更高
ECharts VS AntV
- AntV 文档阅读体验更符合互联网产品使用习惯
- AntV 产品体系拆分更加清晰，但一定程度上提升了学习成本
- ECharts 社区更强大
- ECharts 使用更加广泛
ECharts 优势总结
- 简单易用
- 文档全面
- 社区强大
- 高知名度
