这门课针对的自学者问题很明确:你已经有前端基础,但面对数据可视化这个方向,不知道怎么从零搭起一套完整的数据大屏系统,更不知道哪些知识该优先掌握、哪些可以跳过。

这门课解决什么问题

它不解决"从零学起"的问题——适合已有 HTML、CSS、JS 基础的人。它解决的是"从学到做"的断层:你会搭页面,但不会把数据变成可交互的可视化图表;你会用现成图表库,但不会理解底层原理,遇到定制需求就卡住。这门课通过一个完整的数据大屏项目,把 SVG 知识、组件库构建、动画开发串成一条线,让你学完能独立把数据大屏从零做出来。

建议先看哪几块

第一块是 SVG 基础,这是整个课程的地基,半小时入门足够。第二块是组件库搭建,它教你如何把 SVG 图表打包成可复用的组件,这是后续开发效率的关键。第三块是数据大屏项目实战,从需求分析到框架搭建到组件开发,这是你把前面两块知识真正用起来的环节。学习顺序建议按这个顺序走:先过 SVG 基础,再看组件库搭建,最后进入项目实战。中间不必反复回看,除非你有明确卡住的地方。

学完能独立做什么

学完能独立做出一个完整的数据大屏页面,包括页面布局、数据接入、图表渲染和基本交互。更重要的是,你会理解 SVG 的绘制原理、组件库的构建流程、动画的实现方式,遇到新图表类型也能自己上手。这不是一个只停留在"会用库"的课,而是让你真正理解每一块代码在干什么。

资料怎么配合练习

资料包里的视频是主线,建议跟着项目顺序学,不要跳章节。每学完一个模块,试着用同样的思路复现一个简单图表。课程本身没有独立作业,但项目本身就是练习——学完组件库搭建,试着自己写一个柱状图组件;学完 SVG 动画,试着给某个图表加一个过渡效果。这样学完,你不仅能做出一个数据大屏,还能理解背后的构建原理,遇到新图表类型也能自己上手。

课程目录

第10章 外卖业务数据大屏项目需求分析+项目框架搭建
10-1 数据大屏项目技术方案分析.mp4 88.47M
10-2 vue3项目初始化.mp4 99.78M
10-3 vue3基本开发体验.mp4 47.47M
10-4 vue3新特性composition-api(上).mp4 137.53M
10-5 vue3新特性composition-api(下).mp4 107.88M
10-6 vue3+vue-router使用方法.mp4 60.44M
10-7 vue3+vuex使用方法.mp4 97.94M
10-8 本章小结.mp4 7.56M
第11章 数据大屏组件库搭建
11-1 组件库项目创建+开发模式配置.mp4 105.62M
11-2 rollup 切换模块化标准+多模块构建.mp4 58.12M
11-3 rollup node-resolve插件+babel-node用法讲解.mp4 206.53M
11-4 tree-shaking 机制讲解.mp4 77.00M
11-5 rollup external属性+commonjs插件讲解.mp4 98.44M
11-6 rollup babel+json+terser插件.mp4 117.94M
11-7 【放大招了】rollup vue 组件编译.mp4 162.53M
11-8 【关键步骤】在 html 中使用自定义 vue 组件.mp4 120.81M
第12章 项目矢量图组件开发必备的svg知识入门【svg半小时全方位入门】
12章(12-1节到12-8节的合集).mp4 520.01M
第13章 深入svg动画开发【又一波高端操作,95%前端工程师都不会的svg动画】
13-1 至 13-3.mp4 469.31M
13-4 至 13-7.mp4 586.40M
第14章 通用数据大屏矢量图svg组件开发【活学活用前面学到的各种高端知识】
14章.mp4 974.31M
第15章 数据大屏容器组件开发【数据大屏到底怎么开发?先从这里开始!】
15章(15-1节到15-7节的合集).mp4 279.64M
第16章 数据大屏业务组件开发【真正将Vue3.0用于商业级项目】
16章.mp4 2.06G
第17章 数据大屏自动轮播列表组件开发 【难度非常高的一个基础组件,各种骚操作】
17.mp4 2.70G
第18章 复杂图表——echarts混合图表+动画渲染技术实战【嫌图表简单的同学点进来!】
18章(18-1节到18-5节的合集).mp4 546.90M
第19章 echarts-gl技术讲解
19章.mp4 1.37G
第1章 课程介绍
1-1 课程介绍(导学).mp4 39.88M
第1章 课程介绍【不看错过一个亿】
1-1 课程介绍(导学)_.mp4 150.46M
第20章 数据大屏API数据对接【数据大屏即将落地完成】
20章.mp4 673.58M
第21章 移动报表项目框架搭建【开启移动端项目正确的开发姿势】
21章(21-1节到21-4节的合集).mp4 146.31M
第22章 移动报表项目开发【一波移动报表组件】
22章.mp4 901.93M
第23章 移动报表项目API对接【移动报表顺利完成啦!】
23章.mp4 423.92M
第24章 补充知识:高德地图可视化开发【再送一波硬核的高德地图教程】
24章.mp4 443.69M
第2章 我需要学数据可视化吗
2-1 什么是数据可视化.mp4 14.03M
2-2 数据可视化发展历史.mp4 36.03M
2-3 数据可视化的应用场景.mp4 62.41M
2-4 数据可视化的发展前景.mp4 50.22M
第3章 好多同学说,想学数据可视化,但是不知道学那个技术【数据可视化前端技术选型(上)】
3-1 前端可视化解决方案.mp4 13.39M
3-10 canvas 高级应用:图片压缩算法实现(下).mp4 113.28M
3-2 canvas 入门.mp4 57.43M
3-3 svg 入门.mp4 25.88M
3-4 webgl 技术分享.mp4 20.44M
3-5 zrender 入门.mp4 29.63M
3-6 d3 入门.mp4 48.68M
3-7 three.js 介绍.mp4 10.30M
3-8 本章小结.mp4 3.79M
3-9 canvas 高级应用:图片压缩算法实现(上).mp4 114.14M
第4章 数据可视化前端技术选型(下)
4-1 highcharts 介绍.mp4 63.44M
4-10 echarts 定位.mp4 24.88M
4-11 echarts 坐标系.mp4 44.25M
4-12 echarts 双坐标系.mp4 34.69M
4-13 echarts 多坐标系.mp4 41.12M
4-14 三种技术栈对比.mp4 55.19M
4-15 本章小结.mp4 21.25M
4-2 antv-g2 入门.mp4 129.53M
4-3 antv-g6 入门.mp4 116.41M
4-4 antv-l7 入门.mp4 395.88M
4-5 echarts 入门.mp4 107.31M
4-6 echarts 自定义主题和svg渲染.mp4 126.56M
4-7 echarts 系列及多系列案例.mp4 78.69M
4-8 echarts 新特性 dataset.mp4 65.97M
4-9 echarts 组件.mp4 98.38M
第5章 数据报表项目初始化+核心指标组件开发
5-1 数据报表项目简介.mp4 44.03M
5-10 今日交易用户数组件开发.mp4 76.34M
5-11 累计用户数组件开发(上).mp4 113.84M
5-12 累计用户数组件开发(下).mp4 178.28M
5-2 关于技术选型的说明.mp4 4.72M
5-3 项目初始化.mp4 67.53M
5-4 element-ui和echarts引入.mp4 52.25M
5-5 容器组件初始化.mp4 43.84M
5-6 顶部核心指标组件布局开发.mp4 65.56M
5-7 核心指标公共组件抽取.mp4 232.75M
5-8 累计销售额组件开发.mp4 147.81M
5-9 累计订单量组件开发.mp4 133.91M
第6章 核心指标组件重构+销售趋势组件开发
6-1 vue-echarts组件库入门.mp4 37.45M
6-2 v-charts组件库入门.mp4 47.99M
6-3 vue-charts 重构核心指标组件.mp4 23.79M
6-4 销售趋势组件容器+头部开发(上).mp4 64.64M
6-5 销售趋势组件容器+头部开发(下).mp4 67.82M
6-6 销售趋势图表和列表开发.mp4 94.66M
6-7 搜索关键词组件开发(上).mp4 67.12M
6-8 搜索关键词组件开发(下).mp4 58.26M
6-9 分类销售排行组件开发.mp4 102.71M
第7章 百度地图数据可视化
7-1 百度地图入门案例+异步加载.mp4 257.31M
7-10 百度地图可视化之散点图(下).mp4 425.22M
7-11 百度地图可视化之飞线动画.mp4 314.91M
7-12 百度地图可视化之炫酷飞线动画(上).mp4 358.97M
7-13 百度地图可视化之炫酷飞线动画(下).mp4 346.44M
7-14 百度地图可视化之3D建筑.mp4 391.62M
7-2 百度地图3D建筑+3D地球.mp4 326.66M
7-3 百度地图控件.mp4 377.41M
7-4 百度地图自定义样式.mp4 120.53M
7-5 百度地图绘图(上).mp4 176.50M
7-6 百度地图绘图(下).mp4 229.69M
7-7 百度地图ViewAnimation动画.mp4 335.09M
7-8 百度地图TrackAnimation动画.mp4 208.28M
7-9 百度地图可视化之散点图(上).mp4 279.44M
第8章 数据大盘+vue-element-admin集成+部署
8-1 (上)销售大盘地图组件开发.mp4 162.19M
8-10 provide+inject实现组件通信.mp4 150.31M
8-11 累计销售额组件数据接入.mp4 111.94M
8-12 千分位算法实现.mp4 85.50M
8-13 顶部核心指标组件数据接入.mp4 183.84M
8-14 销售额组件API对接.mp4 96.78M
8-15 搜索量组件API对接.mp4 309.12M
8-16 品类分布组件API对接.mp4 186.31M
8-17 销售大盘+用户增长+热门搜索API对接.mp4 137.06M
8-2 (下) 销售大盘地图组件开发.mp4 234.50M
8-3 v-charts移植销售大盘地图组件.mp4 200.25M
8-4 销售大盘组件集成.mp4 139.38M
8-5 水球图的基本用法.mp4 255.44M
8-6 支付转化率组件开发.mp4 248.59M
8-7 词云图的基本用法.mp4 174.91M
8-8 http请求公共方法封装.mp4 78.81M
8-9 (重要章节!)防盗版接口接入.mp4 96.91M
本章精华部分.mp4 4.54M
第9章 vue-element-admin接入+上线部署
9-1 vue-element-admin项目下载和运行.mp4 75.73M
9-2 登录API接入(上).mp4 152.29M
9-3 登录API接入(下).mp4 16.23M
9-4 数据报表页面移植.mp4 161.80M
9-5 数据报表样式优化.mp4 55.61M
9-6 退出登录功能实现.mp4 19.64M
9-7 项目构建与发布.mp4 55.77M
9-8 https证书+cdn配置实战.mp4 31.18M
课程资料
imooc-datav-docs-master.zip 7.39M
imooc-datav-examples-dev-master.zip 104.04kb
imooc-datav-examples-html-master.zip 1.12M
imooc-datav-mobile-master.zip 108.85kb
imooc-datav-report-dev-master.zip 115.74kb
imooc-datav-screen-master.zip 5.19M
imooc-datav-template-master.zip 47.58M
接口校验码.txt 0.02kb
mksz445-体系课-数据可视化入门到精通-打造前端差异化竞争力[完结]/
10-1 数据大屏项目技