项目总体展示

echarts 常用图表解析

1.数据可视化前言

• 1.1.什么是数据可视化
• 1.2.数据可视化的好处
• 1.3.数据可视化的实现方式

2.ECharts的基本使用

• 2.1.ECharts的介绍
• 2.2.ECharts的快速上手
• 2.3.相关配置讲解

3.ECharts常用图表

• 3.1.图表1 柱状图
• 3.2.图表2 折线图
• 3.3.图表3 散点图
• 3.4.图表4 饼图
• 3.5.图表5 地图
• 3.6.图表6 雷达图
• 3.7.图表7 仪表盘图

4.配置项小结

• 4.1.柱状图 bar
• 4.2.折线图line
• 4.3.散点图scatter
• 4.4.饼图pie
• 4.5.地图map
• 4.6.雷达图radar
• 4.7.仪表盘gauge
• 4.8.直角坐标系配置（ grid、axis、dataZoom ）
• 4.9.通用配置（ title、tooltip、toolbox.feature、legend ）

echarts 高级使用

1.ECharts高级

1.1.显示相关

• 1.1.1.主题
• 1.1.2.调色盘
• 1.1.3.样式
• 1.1.4.自适应

1.2.动画的使用

• 1.2.1.加载动画
• 1.2.2.增量动画
• 1.2.3.动画的配置

1.3.交互API

• 1.3.1.全局echarts对象
• 1.3.2.echartsInstance对象

横向柱状图与折线图实现

1.前端项目的准备

• 1.1.vue-cli脚手架创建项目
• 1.2. 项目的基本配置
• 1.3.全局echarts对象
• 1.4.axios的处理

2.单独图表组件的开发

2.1.商家销量排行（横向柱状图）

• 2.1.1.组件结构设计
• 2.1.2.图表Seller.vue基本功能的实现
• 2.1.3.分页动画的实现
• 2.1.4.UI效果调整
• 2.1.5.分辨率适配

2.2.销量趋势分析（折线图）

• 2.2.1.代码环境的准备
• 2.2.2.图表基本功能的实现
• 2.2.3.UI效果的调整
• 2.2.4.切换图表
• 2.2.5.分辨率适配
• 2.2.6.细节调整

项目初步形成

2.3.商家地图分布（地图、散点图）

• 2.3.1.代码环境的准备
• 2.3.2.显示地图
• 2.3.3.显示散点图
• 2.3.4.UI效果的调整
• 2.3.5.分辨率适配
• 2.3.6.地图点击事件

2.4.地区销量排行（基本柱状图）

• 2.4.1.代码环境的准备
• 2.4.2.图表基本功能的实现
• 2.4.3.UI效果调整
• 2.4.4.平移动画的实现
• 2.4.5.分辨率适配
• 2.4.5.分辨率适配

2.5.热销商品占比（饼图）

• 2.5.1.代码环境的准备
• 2.5.2.图表基本功能的实现
• 2.5.3.切换数据的实现
• 2.5.4.UI效果的调整
• 2.5.5.分辨率适配

2.6.库存销量分析（仪表盘）

• 2.6.1.代码环境的准备
• 2.6.2.图表基本功能的实现
• 2.6.3.UI效果的调整
• 2.6.4.切换动画
• 2.6.5.分辨率适配

项目优化（webSocket）组件合并、图表缩放

3.WebSocket的引入

3.1.后端代码的改造

• 3.1.1.WebSocket的使用
• 3.1.2.改造后端程序Koa_Server

3.2.前端代码的改造

• 3.2.1.定义单例,创建WebSocket实例对象
• 3.2.2.监听WebSocket事件
• 3.2.3.定义注册函数
• 3.2.4.连接服务端
• 3.2.5.发送数据给服务端
• 3.2.6.断开重连机制
• 3.2.7.其他模块的修改

4.其他细节

4.1.合并组件

• 4.1.1.创建ScreenPage.vue文件,并配置路由规则，创建布局结构和样式
• 4.1.2.注册组件, 并将其置于合适的容器中

4.2.全屏切换

• 4.2.1.布局调整
• 4.2.2.全屏实现
• 4.2.3.全屏事件的数据发送

4.3.主题切换

• 4.3.1.当前主题数据的存储
• 4.3.2.点击切换主题按钮
• 4.3.3.监听主题的变化
• 4.3.4.原生HTML主题样式适配