数据可视化，打造前端差异化竞争力

课程目录

课程介绍 数据可视化，打造前端差异化竞争力 是一份体系课学习资料，内容围绕 前端 展开。 内容涵盖：课程介绍 不看错过一个亿、数据可视化应用场景、数据可视化前端技术选型、数据大盘+vue、vue、数据大屏业务组件开发 真正将Vue 等主题。 适合对 前端 有需求、希望一次性拿到完整资料的同学。 下方为完整资料与目录，可先看目录判断是否符合需要。 第1章 课程介绍【不看错过一个亿】 1-1 学习本课程需要的知识点说明 1-2 课程介绍（导学） (05:27) 1-3 课程学习指南 (02:22) 1-4 【讨论题】谈谈对数据可视化的理解 第2章 数据可视化应用场景 2-1 什么是数据可视化 (02:25) 2-2 数据可视化发展历史 (03:44) 2-3 数据可视化的应用场景 (03:58) 2-4 数据可视化的发展前景 (04:31) 第3章 数据可视化前端技术选型（上）【不知道什么是可视化？看这里就对了】 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的童鞋点进来】 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章 数据报表项目初始化+核心指标组件开发【一大波干货来袭】 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正确打开姿势】 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章 百度地图数据可视化【硬核的百度地图可视化，解决各种疑难杂症】 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集成+部署【商业级可视化项目】 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 https请求公共方法封装 (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%的前端工程师都不知道】 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 httpss证书+cdn配置实战 (07:09) 第10章 外卖业务数据大屏项目需求分析+项目框架搭建【是时候入门一波vue3.0了】 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-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半小时全方位入门】 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动画】 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组件开发【活学活用前面学到的各种高端知识】 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章 数据大屏容器组件开发【数据大屏到底怎么开发？先从这里开始！】 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-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章 数据大屏自动轮播列表组件开发【难度非常高的一个基础组件，各种骚操作】 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混合图表+动画渲染技术实战【嫌图表简单的同学点进来！】 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技术讲解 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数据对接【数据大屏即将落地完成】 20-1 实时订单趋势组件开发 (04:51) 20-2 订单日历图+商家排行组件开发 (10:20) 20-3 数据大屏数据接口开发 (20:19) 20-4 顶部核心指标组件数据接入 (09:32) 20-5 实时订单数据接入 (06:10) 第21章 移动报表项目框架搭建【开启移动端项目正确的开发姿势】 21-1 移动报表项目初始化 (03:14) 21-2 rem原理讲解+项目rem配置 (06:10) 21-3 postcss px2rem插件配置+reset css配置 (06:46) 21-4 移动端echarts集成 (05:26) 第22章 移动报表项目开发【一波移动报表组件】 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对接【移动报表顺利完成啦！】 23-1 移动报表项目数据接口请求+loading效果 (08:40) 23-2 接口数据联调 (16:45) 23-3 移动报表项目构建 (04:08) 23-4 移动报表项目发布 (02:30) 第24章 补充知识：高德地图可视化开发【再送一波硬核的高德地图教程】 24-1 高德地图开发准备工作+第一个案例 (05:06) 24-2 高德地图初始化配置讲解+3D地图 (03:30) 24-3 高德地图图层开发讲解 (09:17) 24-4 高德地图绘制矢量图讲解 (05:05) 24-5 高德地图事件开发 (03:59) 24-6 高德地图可视化开发 (04:20)