课程介绍
项目演示
数据可视化概念
ECharts的介绍
ECharts的快速上手
相关配置项的讲解
柱状图的基本实现和常见效果
通用配置_title的相关配置
通用配置_tooltip的相关配置
通用配置_toolbox的相关配置
通用配置_legend的相关配置
折线图的基本实现
折线图的常见效果1
折线图的常见效果2
散点图的基本实现
散点图的常见效果
直角坐标系的常用配置grid
直角坐标系的常用配置axis
直角坐标系的常用配置dataZoom
饼图的基本实现
饼图的常见效果
地图的基本实现和常见配置
地图常见效果_显示某个省份地图
地图常见效果_显示空气质量
地图常见效果_地图和散点图结合
雷达图的实现
仪表盘的实现
ECharts基础小结
主题的使用
调色盘和颜色渐变
直接样式和高亮样式的使用
图表自适应的实现
图表加载动画的实现
图表增量动画的讲解
图表动画的配置项
全局ECharts对象的常用方法1
全局ECharts对象的常用方法2
echartsInstance对象常用方法1
echartsInstance对象常用方法2
ECharts高级小结
Koa2的介绍
Koa2的快速上手
Koa2中间件的特点
后台项目_项目准备
后台项目_总耗时中间件的开发
后台项目_响应头中间件的开发
后台项目_业务逻辑中间件的开发
后台项目_跨域配置
前端项目_项目的创建和准备
前端项目_商家销售统计_组件结构和布局结构
前端项目_商家销售统计_图表基本功能
前端项目_商家销售统计_动态刷新的实现
前端项目_商家销售统计_UI调整1
前端项目_商家销售统计_UI调整2
前端项目_商家销售统计_拆分option
前端项目_商家销售统计_分辨率适配
前端项目_销量趋势图表_通用代码结构
前端项目_销量趋势图表_基本图表的显示
前端项目_销量趋势图表_UI调整
前端项目_销量趋势图表_切换图表的实现
前端项目_销量趋势图表_分辨率适配
前端项目_商家地图分布_显示地图1
前端项目_商家地图分布_显示地图2
前端项目_商家地图分布_显示散点
前端项目_商家地图分布_UI调整
前端项目_商家地图分布_分辨率适配
前端项目_商家地图分布_地图点击效果
前端项目_销售排行图表_基本图表的显示
前端项目_销售排行图表_UI调整
前端项目_销售排行图表_平移动画效果
前端项目_销售排行图表_分辨率适配
前端项目_热销商品占比_基本图表的显示
前端项目_热销商品占比_数据的切换
前端项目_热销商品占比_UI调整
前端项目_热销商品占比_分辨率适配
前端项目_库存销量模块_基本图表的显示
前端项目_库存销量模块_UI调整
前端项目_库存销量模块_切换动画
前端项目_库存销量模块_分辨率适配1
前端项目_库存销量模块_分辨率适配2
WebSocket的基本使用_后端
WebSocket的基本使用_前端
后端项目的改造
前后端数据字段的约定
后端接收数据时的处理
前端代码改造_连接服务器
前端代码改造_处理接收的数据
前端代码改造_组件的改造
前端代码改造_优化
细节处理_组件合并
细节处理_全屏切换_布局样式
细节处理_全屏切换_点击事件的处理
细节处理_全屏切换_联动效果
细节处理_主题切换_图表主题
细节处理_主题切换_定义数据
细节处理_主题切换_原生HTML的切换
细节处理_主题切换_联动效果
数据可视化项目使用最流行的图表引擎ECharts来展示电商平台中需要呈现的各方面的数据。用于更加细致的分析电商平台的运营情况,以便作出正确的决策。 该项目前端使用Vue技术栈,后端使用Koa2框架,前后端数据的交互采取WebSocket来保证数据的实时性。项目还支持主题切换, 展示酷炫的图表效果.同时也能够支持大屏和小屏的切换,保证了图表在不同屏幕上呈现的效果。