数据可视化就是前端未来的标配,就是前端未来竞争的破冰利器
全网打着灯笼也找不到这么精炼、系统、实用的数据可视化课程,通过课程,不管是数据报表、数据大屏、移动报表需求,你都将游刃有余,掌握课程所授,你基本可以应对企业90%以上的数据可视化开发需求,升职加薪几乎是一定的!

〖课程目录〗:

  • 第1章 课程介绍【不看错过一个亿】 4 节 | 8分钟
  • 本章节整体介绍课程的制作背景、整理安排、以及主要内容。
    • 图文:1-1 学习本课程需要的知识点说明
    • 视频:1-2 课程介绍(导学) (05:27)
    • 视频:1-3 课程学习指南 (02:22)
    • 作业:1-4 【讨论题】谈谈对数据可视化的理解
  • 第2章 数据可视化应用场景4 节 | 15分钟
  • 本章节,介绍了什么是数据可视化,数据可视化的发展历史、以及在什么场景下需要用数据可视化、以及发展前景。
    • 视频:2-1 什么是数据可视化 (02:25)
    • 视频:2-2 数据可视化发展历史 (03:44)
    • 视频:2-3 数据可视化的应用场景 (03:58)
    • 视频:2-4 数据可视化的发展前景 (04:31)
  • 第3章 数据可视化前端技术选型(上)【不知道什么是可视化?看这里就对了】 10 节 | 91分钟
  • 本章节,解决大家不知道如何选择技术的问题。老师带大家分析当下市面上的所有数据可视化技术,以及不同的技术擅长做什么效果,以及各个技术的入门讲解,大家系统的对数据可视化有全面的了解。
    • 视频:3-1 前端可视化解决方案 (04:07)
    • 视频:3-2 canvas 入门 (14:56)
    • 视频:3-3 svg 入门 (08:54)
    • 视频:3-4 webgl 技术分享 (03:03)
    • 视频:3-5 zrender 入门 (09:59)
    • 视频:3-6 d3 入门 (09:16)
    • 视频:3-7 three.js 介绍 (02:23)
    • 视频:3-8 本章小结 (02:02)
    • 视频:3-9 canvas 高级应用:图片压缩算法实现(上) (20:31)
    • 视频:3-10 canvas 高级应用:图片压缩算法实现(下) (15:29)
  • 第4章 数据可视化前端技术选型(下)【想入门antv和echarts的童鞋点进来】15 节 | 113分钟
  • 详细介绍前端可视化开发中两大主流技术栈:AntV 和 ECharts,以及highcharts。
    • 视频:4-1 highcharts 介绍 (03:41)
    • 视频:4-2 antv-g2 入门 (13:33)
    • 视频:4-3 antv-g6 入门 (11:50)
    • 视频:4-4 antv-l7 入门 (23:15)
    • 视频:4-5 echarts 入门 (08:34)
    • 视频:4-6 echarts 自定义主题和svg渲染 (08:40)
    • 视频:4-7 echarts 系列及多系列案例 (07:40)
    • 视频:4-8 echarts 新特性 dataset (05:09)
    • 视频:4-9 echarts 组件 (10:37)
    • 视频:4-10 echarts 定位 (02:31)
    • 视频:4-11 echarts 坐标系 (03:49)
    • 视频:4-12 echarts 双坐标系 (03:18)
    • 视频:4-13 echarts 多坐标系 (04:11)
    • 视频:4-14 三种技术栈对比 (04:40)
    • 视频:4-15 本章小结 (01:23)
  • 第5章 数据报表项目初始化+核心指标组件开发【一大波干货来袭】16 节 | 93分钟
  • 夯实基础知识后,我们将开启数据报表项目,本章将带大家完成项目初始化,并集成element-ui和echarts库,知识点很多,赶紧拿起小本本学起来。
    • 图文:5-1 本章概述
    • 视频:5-2 数据报表项目简介 (04:18)
    • 视频:5-3 关于技术选型的说明 (01:27)
    • 视频:5-4 项目初始化 (05:52)
    • 视频:5-5 element-ui和echarts引入 (05:20)
    • 视频:5-6 容器组件初始化 (03:47)
    • 视频:5-7 顶部核心指标组件布局开发 (05:27)
    • 图文:5-8 扩展知识:前端组件化设计原则
    • 视频:5-9 核心指标公共组件抽取 (14:35)
    • 视频:5-10 累计销售额组件开发 (09:14)
    • 视频:5-11 累计订单量组件开发 (14:17)
    • 视频:5-12 今日交易用户数组件开发 (07:00)
    • 视频:5-13 累计用户数组件开发(上) (08:59)
    • 视频:5-14 累计用户数组件开发(下) (12:32)
    • 作业:5-15 【学习任务】数据报表顶部组件开发
    • 作业:5-16 【讨论题】如何抽象业务组件
  • 第6章 核心指标组件重构+销售趋势组件开发【vue+echarts正确打开姿势】 14 节 | 119分钟
  • 本章我们重点使用vue-echarts组件重构代码中应用echarts部分代码,利用vue-echarts简化echarts开发。
    • 图文:6-1 本章概述
    • 视频:6-2 vue-echarts组件库入门 (08:51)
    • 视频:6-3 v-charts组件库入门 (08:28)
    • 图文:6-4 扩展知识:vue-echarts入门
    • 视频:6-5 vue-charts 重构核心指标组件 (04:44)
    • 图文:6-6 扩展知识:v-charts入门
    • 视频:6-7 销售趋势组件容器+头部开发(上) (15:06)
    • 视频:6-8 销售趋势组件容器+头部开发(下) (14:17)
    • 视频:6-9 销售趋势图表和列表开发 (20:00)
    • 视频:6-10 搜索关键词组件开发(上) (11:48)
    • 视频:6-11 搜索关键词组件开发(下) (10:43)
    • 视频:6-12 分类销售排行组件开发 (24:54)
    • 作业:6-13 【学习任务】完成销售趋势组件开发
    • 作业:6-14 【讨论题】谈谈对 vue-echarts 和 v-chart
  • 第7章 百度地图数据可视化【硬核的百度地图可视化,解决各种疑难杂症】14 节 | 201分钟
  • 很多同学期待已久的地图可视化深度教学,让我们从百度地图开始,深度学习地图可视化开发,知识量巨大,你准备好了吗?
    • 视频:7-1 百度地图入门案例+异步加载 (15:53)
    • 视频:7-2 百度地图3D建筑+3D地球 (10:33)
    • 视频:7-3 百度地图控件 (14:29)
    • 视频:7-4 百度地图自定义样式 (04:51)
    • 视频:7-5 百度地图绘图(上) (10:15)
    • 视频:7-6 百度地图绘图(下) (13:01)
    • 视频:7-7 百度地图ViewAnimation动画 (16:32)
    • 视频:7-8 百度地图TrackAnimation动画 (09:36)
    • 视频:7-9 百度地图可视化之散点图(上) (16:50)
    • 视频:7-10 百度地图可视化之散点图(下) (19:04)
    • 视频:7-11 百度地图可视化之飞线动画 (18:06)
    • 视频:7-12 百度地图可视化之炫酷飞线动画(上) (15:37)
    • 视频:7-13 百度地图可视化之炫酷飞线动画(下) (14:50)
    • 视频:7-14 百度地图可视化之3D建筑 (20:24)
  • 第8章 数据大盘+vue-element-admin集成+部署【商业级可视化项目】18 节 | 206分钟
  • 有地图可视化知识加持,现在可以愉快地完成数据报表项目了,再接上真实API,妥妥的商业级项目。
    • 视频:8-1 (上)销售大盘地图组件开发 (11:34)
    • 视频:8-2 (下) 销售大盘地图组件开发 (14:23)
    • 视频:8-3 v-charts移植销售大盘地图组件 (14:09)
    • 视频:8-4 销售大盘组件集成 (08:25)
    • 视频:8-5 水球图的基本用法 (19:01)
    • 视频:8-6 支付转化率组件开发 (16:08)
    • 视频:8-7 词云图的基本用法 (13:28)
    • 视频:8-8 http请求公共方法封装 (07:45)
    • 视频:8-9 【重要章节】防盗版接口接入 (06:52)
    • 视频:8-10 provide+inject实现组件通信 (12:17)
    • 视频:8-11 累计销售额组件数据接入 (08:17)
    • 视频:8-12 千分位算法实现 (10:23)
    • 视频:8-13 顶部核心指标组件数据接入 (13:21)
    • 视频:8-14 销售额组件API对接 (07:10)
    • 视频:8-15 搜索量组件API对接 (20:04)
    • 视频:8-16 品类分布组件API对接 (13:57)
    • 视频:8-17 销售大盘+用户增长+热门搜索API对接 (08:01)
    • 图文:8-18 扩展知识:axios快速入门
  • 第9章 vue-element-admin接入+上线部署【95%的前端工程师都不知道】8 节 | 87分钟
  • 还不知道怎么把数据报表接入真实项目?还不会把开发好的项目发布上线?让Sam老师给你答案!
    • 视频:9-1 vue-element-admin项目下载和运行 (10:17)
    • 视频:9-2 登录API接入(上) (23:29)
    • 视频:9-3 登录API接入(下) (02:56)
    • 视频:9-4 数据报表页面移植 (19:49)
    • 视频:9-5 数据报表样式优化 (07:26)
    • 视频:9-6 退出登录功能实现 (02:55)
    • 视频:9-7 项目构建与发布 (12:50)
    • 视频:9-8 https证书+cdn配置实战 (07:09)
  • 第10章 外卖业务数据大屏项目需求分析+项目框架搭建【是时候入门一波vue3.0了】8 节 | 59分钟
  • 如何开发数据大屏?Vue3.0还不会?让BAT老司机给你答案。
    • 视频:10-1 数据大屏项目技术方案分析 (04:47)
    • 视频:10-2 vue3项目初始化 (11:24)
    • 视频:10-3 vue3基本开发体验 (04:32)
    • 视频:10-4 vue3新特性composition-api(上) (10:42)
    • 视频:10-5 vue3新特性composition-api(下) (11:16)
    • 视频:10-6 vue3+vue-router使用方法 (04:41)
    • 视频:10-7 vue3+vuex使用方法 (09:33)
    • 视频:10-8 本章小结 (01:31)
  • 第11章 数据大屏组件库搭建【大招!全网最稀缺的vue3.0组件库教学,知识量爆炸】11 节 | 114分钟
  • 秀操作的时候到了,全网稀缺的vue3.0组件库教学,赶紧上车吧
    • 视频:11-1 组件库项目创建+开发模式配置 (11:46)
    • 视频:11-2 rollup 切换模块化标准+多模块构建 (05:51)
    • 视频:11-3 rollup node-resolve插件+babel-node用法讲解 (15:28)
    • 视频:11-4 tree-shaking 机制讲解 (06:51)
    • 视频:11-5 rollup external属性+commonjs插件讲解 (08:38)
    • 视频:11-6 rollup babel+json+terser插件 (08:47)
    • 视频:11-7 【放大招了】rollup vue 组件编译 (12:34)
    • 视频:11-8 【关键步骤】在 html 中使用自定义 vue 组件 (08:54)
    • 视频:11-9 npm link关联组件库+eslint初始化 (15:11)
    • 视频:11-10 【重磅】组件库按需加载实战 (09:27)
    • 视频:11-11 【重要】vue2组件库兼容方案 (10:10)
  • 第12章 项目矢量图组件开发必备的svg知识入门【svg半小时全方位入门】8 节 | 78分钟
  • 详细讲解svg怎么玩,还不会svg的小伙伴有福了!
    • 视频:12-1 svg 应用场景和优势 (04:59)
    • 视频:12-2 svg viewport 和 viewBox 用法讲解 (15:24)
    • 视频:12-3 深度剖析 svg preserveAspectRatio 属性(上) (09:27)
    • 视频:12-4 深度剖析 svg preserveAspectRatio 属性(下) (08:30)
    • 视频:12-5 svg 组件库最佳实践 (13:08)
    • 视频:12-6 通用 svg 组件封装 (06:29)
    • 视频:12-7 如何快速集成 iconfont svg 图标 (04:52)
    • 视频:12-8 iconfont 最佳实践 (14:55)
  • 第13章 深入svg动画开发【又一波高端操作,95%前端工程师都不会的svg动画】7 节 | 80分钟
  • 带给大家最全面的svg动画实战教程。
    • 视频:13-1 svg transform属性解析 (08:12)
    • 视频:13-2 svg matrix 变换原理讲解 (06:10)
    • 视频:13-3 svg + CSS 动画实战:环形进度条 (20:57)
    • 视频:13-4 svg + CSS 动画实战:LOGO描边动画 (14:03)
    • 视频:13-5 svg SMIL 动画 + set 标签讲解 (07:32)
    • 视频:13-6 svg SMIL animate 动画 (09:31)
    • 视频:13-7 svg 动画核心:轨迹动画 (13:24)
  • 第14章 通用数据大屏矢量图svg组件开发【活学活用前面学到的各种高端知识】9 节 | 75分钟
  • 学了一堆svg基础知识,怎么用到项目里?马上安排!
    • 视频:14-1 loading 组件样式开发 (07:36)
    • 视频:14-2 loading 组件动画开发 (05:53)
    • 视频:14-3 loading 组件扩展能力开发 (11:07)
    • 视频:14-4 flyBox 组件样式开发 (04:48)
    • 视频:14-5 svg mask 蒙版用法讲解 (09:00)
    • 视频:14-6 linearGradient 和 radialGradient 用法讲解 (11:42)
    • 视频:14-7 flyBox 组件自适应布局开发 (10:20)
    • 视频:14-8 flyBox 组件扩展能力开发 (05:08)
    • 视频:14-9 flyBox 组件 uuid 改造 + 实现过程回顾 (08:27)
  • 第15章 数据大屏容器组件开发【数据大屏到底怎么开发?先从这里开始!】7 节 | 60分钟
  • 突破Chrome 12px显示极限,让数据大屏更加丰满,又一波知识盛宴。
    • 视频:15-1 固定宽高比及突破chrome 12px原理讲解 (09:05)
    • 视频:15-2 容器初始化功能开发 (11:35)
    • 视频:15-3 【关键步骤】固定宽高比算法开发 (11:00)
    • 视频:15-4 浏览器缩放时锁定屏幕宽高比功能开发 (04:07)
    • 视频:15-5 【实用】onResize 方法防重发机制开发 (06:35)
    • 视频:15-6 【高能】组件库 async function 特性支持 (04:54)
    • 视频:15-7 MutationObserver 监听样式变更 (12:05)
  • 第16章 数据大屏业务组件开发【真正将Vue3.0用于商业级项目】16 节 | 160分钟
  • 一大波业务组件开发,工作量不小,咱们一个个来。
    • 视频:16-1 数据大屏业务组件开发说明 (01:50)
    • 视频:16-2 数据大屏loading逻辑开发 (06:09)
    • 视频:16-3 数据大屏整体布局开发 (13:52)
    • 视频:16-4 数据大屏标题组件开发 (08:26)
    • 视频:16-5 用户统计组件开发-通过hooks封装业务逻辑 (11:15)
    • 视频:16-6 【高能】VueCountTo组件兼容Vue3开发 (09:07)
    • 视频:16-7 VueCountTo组件项目实战 (09:17)
    • 视频:16-8 进度条组件开发 (05:07)
    • 视频:16-9 年龄分布组件开发 (07:59)
    • 视频:16-10 Vue3+ECharts开发 (12:47)
    • 视频:16-11 年龄分布图表组件开发 (16:09)
    • 视频:16-12 设备统计组件开发 (10:35)
    • 视频:16-13 南丁格尔图开发 (13:02)
    • 视频:16-14 性别统计组件开发 (06:38)
    • 视频:16-15 骑手统计组件开发 (13:51)
    • 视频:16-16 热卖品类组件开发 (13:26)
  • 第17章 数据大屏自动轮播列表组件开发【难度非常高的一个基础组件,各种骚操作】16 节 | 204分钟
  • 来个难度有点高的轮播组件,还没思路?没事,看老司机怎么破题。
    • 视频:17-1 顶部核心指标组件开发(Iconfont加入实战) (10:16)
    • 视频:17-2 可变换的分类组件开发(vue3鼠标事件实战) (16:27)
    • 视频:17-3 补充知识:js鼠标事件onmouseenter和onmouseover的区别 (07:43)
    • 视频:17-4 基础滑动列表组件技术方案分析 (07:19)
    • 视频:17-5 基础滑动列表标题样式开发 (13:40)
    • 视频:17-6 标题数据处理(深拷贝+lodash按需加载) (17:03)
    • 视频:17-7 组件props重构(lodash对象合并算法) (14:58)
    • 视频:17-8 标题动态列宽算法开发 (09:12)
    • 视频:17-9 行数据渲染开发 (13:38)
    • 视频:17-10 行数据高度动态计算 (06:54)
    • 视频:17-11 行动态样式开发 (15:17)
    • 视频:17-12 滑动动画开发(上)(同步sleep写法) (14:45)
    • 视频:17-13 滑动动画开发(中) (12:46)
    • 视频:17-14 滑动动画开发(下) (04:45)
    • 视频:17-15 将基础滑动列表应用到数据大屏 (15:36)
    • 视频:17-16 销售大盘参数配置 (22:51)
  • 第18章 复杂图表——echarts混合图表+动画渲染技术实战【嫌图表简单的同学点进来!】5 节 | 94分钟
  • 嫌课程的echarts图表难度不够?安排几个高难度的图表。
    • 视频:18-1 深入echarts timeline组件 (17:27)
    • 视频:18-2 echarts timeline 实战案例 (21:46)
    • 视频:18-3 echarts 实现自定义地图渲染(解决组件库external失效问题) (12:16)
    • 视频:18-4 echarts 自定义地图配置详解(VisualMap实战) (22:17)
    • 视频:18-5 自定义地图预警信号实战(EffectScatter应用) (20:08)
  • 第19章 echarts-gl技术讲解7 节 | 107分钟
  • 终于到了echarts-gl,看看如何用echarts做3d绘图。
    • 视频:19-1 echarts-gl入门——旋转地球基础纹理贴图+背景贴图 (13:16)
    • 视频:19-2 echarts-gl高度纹理贴图+阴影亮度优化 (10:34)
    • 视频:19-3 echarts-gl实战——全球航班案例开发 (17:30)
    • 视频:19-4 综合应用案例——慕课外卖销售大盘地图组件初始化 (14:51)
    • 视频:19-5 慕课销售大盘组件timeline样式定制 (06:54)
    • 视频:19-6 慕课销售大盘组件柱状图动画开发 (21:30)
    • 视频:19-7 慕课销售大盘组件散点图+飞线动画开发 (21:42)
  • 第20章 数据大屏API数据对接【数据大屏即将落地完成】5 节 | 52分钟
  • 样式写好了,该对接API了。
    • 视频:20-1 实时订单趋势组件开发 (04:51)
    • 视频:20-2 订单日历图+商家排行组件开发 (10:20)
    • 视频:20-3 数据大屏数据接口开发 (20:19)
    • 视频:20-4 顶部核心指标组件数据接入 (09:32)
    • 视频:20-5 实时订单数据接入 (06:10)
  • 第21章 移动报表项目框架搭建【开启移动端项目正确的开发姿势】4 节 | 22分钟
  • 移动端想展示报表?没问题,三步搞定:项目初始化+移动端初始化+报表库集成。
    • 视频:21-1 移动报表项目初始化 (03:14)
    • 视频:21-2 rem原理讲解+项目rem配置 (06:10)
    • 视频:21-3 postcss px2rem插件配置+reset css配置 (06:46)
    • 视频:21-4 移动端echarts集成 (05:26)
  • 第22章 移动报表项目开发【一波移动报表组件】7 节 | 69分钟
  • 将PC的报表移植到移动端?木问题!
    • 视频:22-1 背景和标题组件开发 (06:30)
    • 视频:22-2 移动报表销售额组件开发 (08:55)
    • 视频:22-3 销售趋势组件开发 (10:55)
    • 视频:22-4 转化率组件开发 (09:45)
    • 视频:22-5 百度地图飞线动画组件开发 (07:40)
    • 视频:22-6 旭日图组件开发 (18:22)
    • 视频:22-7 雷达图组件开发 (06:20)
  • 第23章 移动报表项目API对接【移动报表顺利完成啦!】4 节 | 33分钟
  • 接上真实API,完成项目发布。
    • 视频:23-1 移动报表项目数据接口请求+loading效果 (08:40)
    • 视频:23-2 接口数据联调 (16:45)
    • 视频:23-3 移动报表项目构建 (04:08)
    • 视频:23-4 移动报表项目发布 (02:30)

〖视频截图〗:

数据可视化入门到精通 打造前端差异化竞争力
数据可视化入门到精通 打造前端差异化竞争力
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。