实战「外卖实战」数据大屏

基于 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 优势总结

  • 简单易用
  • 文档全面
  • 社区强大
  • 高知名度

【数据可视化从入门到精通】指南-发展史-数据可视化应用场景-发展前景-技术选型①相关推荐

  1. 赠书!《R语言数据分析与可视化从入门到精通》

    专注系列化.高质量的R语言教程 R语言是一个自由.免费.源代码开放的编程语言和环境,是S语言的一个分支,多个操作系统都能方便且免费地使用它.R语言不仅具有众多经常更新的统计分析函数,还具有完整的编程功 ...

  2. python数据分析可视化实例-Python数据分析与可视化从入门到精通

    (1)没有高深理论,每章都以实例为主,读者参考书中源码运行,就能得到与书中一样的结果.(2)专注于Python数据分析与可视化操作中实际用到的技术.相比大而全的书籍资料,本书能让读者尽快上手,开始项目 ...

  3. python可视化数据分析-Python数据分析与可视化从入门到精通

    (1)没有高深理论,每章都以实例为主,读者参考书中源码运行,就能得到与书中一样的结果.(2)专注于Python数据分析与可视化操作中实际用到的技术.相比大而全的书籍资料,本书能让读者尽快上手,开始项目 ...

  4. 【Python数据科学快速入门系列 | 06】Matplotlib数据可视化基础入门(一)

    这是机器未来的第52篇文章 原文首发地址:https://robotsfutures.blog.csdn.net/article/details/126899226 <Python数据科学快速入 ...

  5. 《Tableau数据可视化从入门到精通》之序言

    大数据时代正在变革着我们的生活.工作和思维,如何让大数据更有意义,使之更贴近大多数人,最重要的手段之一就是数据可视化,数据可视化是关于数据视觉表现形式的技术,这种数据的视觉表现形式被定义为,一种以某种 ...

  6. python网络数据爬取及分析从入门到精通pdf_Python网络数据爬取及分析从入门到精通...

    这是一套以实例为主.使用Python语言讲解网络数据爬虫及分析的实战指南.本套书通俗易懂,涵盖了Python基础知识.数据爬取.数据分析.数据预处理.数据可视化.数据存储.算法评估等多方面知识,每一部 ...

  7. java从入门到精通_Java大数据:数据库开发从入门到精通

    在Java大数据开发任务当中,数据存储是非常关键的一环,涉及到分布式文件系统.分布式数据库,数据库是后端系统当中支持数据存储的重要组件.今天我们就来聊聊Java大数据,数据库开发从入门到精通,应该如何 ...

  8. 大数据架构师从入门到精通 学习必看宝典

    经常有初学者在博客和QQ问我,自己想往大数据方向发展,该学哪些技术,学习路线是什么样的,觉得大数据很火,就业很好,薪资很高.如果自己很迷茫,为了这些原因想往大数据方向发展,也可以,那么我就想问一下,你 ...

  9. 大数据架构师从入门到精通

    经常有初学者在博客和QQ问我,自己想往大数据方向发展,该学哪些技术,学习路线是什么样的,觉得大数据很火,就业很好,薪资很高.如果自己很迷茫,为了这些原因想往大数据方向发展,也可以,那么我就想问一下,你 ...

最新文章

  1. 基于YOLOv5的智慧工地安全帽检测(1)
  2. Echarts 解决饼图文字过长重叠的问题
  3. ubuntu9.10 安装 eclipse3.5 的问题
  4. Linux下的屏保设置 xset s 与 xset dpms
  5. java中的抽象方法_Java中的抽象类和抽象方法
  6. BeginnersBook Perl 教程
  7. Elasticsearch实践(二)linux安装
  8. 为什么你写作赚不到钱?
  9. Robot Framework 的安装配置和简单的实例介绍
  10. ONVIF网络摄像头(IPC)客户端开发—最简RTSP客户端实现
  11. 基于Arduino和Mixly(超声波+蜂鸣器)实现距离报警
  12. 如何用吹风机计算机主机清理,用吹风机吹电脑里的灰尘可以吗?
  13. Leetcode 20有效的括号、33搜索旋转排序数组、88合并两个有序数组(nums1长度为m+n)、160相交链表、54螺旋矩阵、415字符相加(不能直接转Int)、reverse()函数
  14. python怎么定义向量类_python的用户定义向量类
  15. 2021全国大学生电子设计竞赛F题(智能送药小车)国一赛后总结
  16. Gradle's dependency cache may be corrupt (this sometimes occurs after a network connection timeout.)
  17. 爬取虎扑nba球员得分榜信息并存储至MongoDB数据库
  18. 4G/5G多卡聚合设备在公安无线传输中的解决方案
  19. 2.4G有源智能电子学生卡
  20. [家里蹲大学数学杂志]第057期图像复原中的改进 TV 模型

热门文章

  1. 网页设计作业 HTML5期末大作业:旅游网站设计——蓝色的地方旅游门户(9页) HTML+CSS+JavaScript
  2. 抖音android 语言英语,谁都能抖音教英语吗?
  3. BGP高防服务器是什么?要怎么选?
  4. abbplc型号_ABB PLC选型手册.pdf
  5. 一篇没有技术点的文章
  6. C语言用if判断大小,学习C语言之用if语句比较三个数的大小[大全5篇]
  7. 如何用研发效能搞垮一个团队?
  8. flyme7 android彩蛋,Flyme 7内置彩蛋功能:520教你如何脱颖而出
  9. 数据库函数之日期函数
  10. JQuery EasyUI(22)