Echarts-vue

Echarts-vue

前言

一、主要内容

1.介绍

（1）数据可视化前言
（2）Echarts基本使用
（3）Echarts高级使用
（4）电商平台数据可视化实时监控系统
4.1后台搭建
4.2结合vue搭建图表组件
4.3websocket实现数据推送
4.4主题切换、页面合并 、全屏切换
知识储备
（1）html,css,js
（2）Echarts的使用
（3）vue,vuex,Router,webpack
（4）websocket的使用

2.演示

演示：
（1）电商平台数据可视化实时监控系统
（2）可以保证实时获取数据进行分析
（3）支持大屏展示，自适应分辨率
（4）支持联动效果，一端操作，多端联动展示
技术选型：
Echarts
vue,vuex,vueRouter,
webpack,
Axios,
websocket

3.数据可视化概念

（1）数据可视化的概念和作用
将数据以图表的形式呈现
更有效的传达数据中心的信息
（2）常见的可视化工具
报表类
BI类
编程类

4.Echarts的介绍

基本介绍及特点

5.Echarts快速上手

（1）引入Echarts.js文件
（2）准备一个呈现图表的盒子
（3）初始化echarts实例对象
（4）准备配置项
（5）将配置项设置给echarts实例对象

6.相关配置的讲解

xAxis,yAxis,series,title

7.柱状图的基本实现和常见效果

（1）基本的柱状图
（2）柱状图的常见效果
（3）柱状图的特点

8.通用配置title的相关配置

文字样式；标题边框 ；标题位置

9.通用配置tooltip

触发类型：trigger:item,axis
触发时机:triggerOn:mouseover,click
格式化：formatter:字符串模板 ，回调函数

10.通用配置toolbox的相关配置

toolbox:ECharts提供的工具栏
内置：导出图片，数据视图，动态类型切换，数据区域缩放
显示工具栏按钮feature:
savaAsImage,dataView,resotre,dataZoom,magicType

11.通用配置lagend的相关配置

通用配置是任何一种类型的图标都可以使用的配置
title
tooltip
toolbox
legend

12.折线图的基本实现

五部曲
option通用配置：xAxis,yAxis,series

13.折线图的常见效果

常见效果：
标记：最大值，最小值，平均值，标记区间 markPoint,markline,markArea
线条控制： 平滑，风格 smooth,lineStyle
填充风格：areaStyle

14.折线图常见效果

紧挨边缘boundaryGap
脱离0值比例scale
堆叠图stack

15.散点图的基本实现

实现步骤：
1.Echars的基本结构代码
五部曲
2.x轴和y轴的数据：二位数组
3.图标类型
在series下设置type:scatter
在xAxis和yAxis的type都要设置为value
4.调整
将坐标轴都设置为脱离0值比例，scale

16.散点图的常见效果

（1）基本的散点图
（2）散点图常见的效果
气泡图，涟漪效果
（3）散点图特点：相关性

17.直角坐标系的常用配置grid

(1)显示
(2)边框
(3)位置和大小

18.直角坐标系的常用配置axis

配置2：坐标轴axis
坐标轴分为x轴和y轴
一个grid中最多有两种位置的x轴和y轴
坐标轴类型type：
value：数值轴，自动会从目标数据中读取数据
category:类目轴，该类型必须通过data设置类目数据
显示位置position
xAxis:可取值为top或者bottom
yAxis：可取值为left或者right

19.直角坐标系的常用配置dataZoom

小结：
（1）直角坐标系的图表：
柱状图，折线图，散点图
（2）网格grid:
x轴和y轴的依附
大小
边框
（3）坐标轴xAxis yAxis:
取值类型category value
（4）区域缩放dataZoom:
x轴和y轴都可以设置

20.饼图的基本实现

实现步骤：
1.Echarts最基本的代码结构
引入js文件，DOM容器，初始化对象，设置option
2.数据准备
3.图表类型：
在series下设置type:pie
区别其他图表：
数据类型，不需要设置xAxis和yAxis

21.饼图的常见效果

（1）基本的饼图
饼图五部曲
（2）饼图的常见效果
文字显示
圆环
南丁格尔
选中效果
(3)饼图的特点
占比

22.适量地图的基本实现和常见的配置

（1）基本实现步骤
（2）常见配置

23.地图的常见效果_显示某个省份

1.加载矢量数据
2.注册
3.geo
4.zoom
5.center

24.地图的常见效果，显示空气质量

1.地图的基本显示
2.series数据设置
3.series关联geo
4.visaalMap

25.地图的常见效果_地图和散点图的结合

地图小结：
1.地图图表的两种使用方式：
百度地图API
矢量地图数据
2.地图的绘制：
加载数据
将数据注册给echarts全局对象
配置geo
3.常见效果
缩放拖动/初始缩放比例/中心点
visualMap和地图结合
散点图和地图的结合
4.地图特点
地图主要可以帮助我们从宏观的角度快速地看出地理位置上数据的差异

26.雷达图

雷达图的实现步骤：
定义各个维度的最大值
定义图标类型
雷达图的特点：
多个维多的数据与标砖数据之间的对比

27.仪表盘

仪表盘的实现步骤：
准备数据
定义图标的类型
仪表盘的特点：
仪表盘可以更直观的表现出某一个指标的进度或实际情况

28.Echarts基础小结

1.Echarts的介绍
2.Echarts的快速上手
引入
准备
设置
3.常用图表的绘制
option的差异
7个常用图表的配置 和使用场景
api文档的查看

29.主题的使用

内置主题
自定义主题（名字）

30.调色盘和颜色渐变

1.调色盘：
主题
全局
局部
2.颜色渐变
线性渐变 linear
径向渐变 radial

31.直接样式和高亮样式的使用

直接样式
高亮样式
优先级高会覆盖主题中，调色盘的效果

32.图表自适应

window.resize = echarts.resize
小结：
主题
调色板
样式
自适应

33.图表加载动画的实现

myCharts.showLoading()
myCharts.hideLoading()

34.图表增量动画的讲解

增量动画的实现方式
myCharts.setOption
所有 数据的更新都通过setOption实现
不用考虑数据 到底产生了那些变化
Echarts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化

35.图表动画的配置项

记载动画的显示 与隐藏
增量动画的使用
动画的常用配置项

36.全局Echarts对象的常用方法1

（1）对象：
全局echarts对象
实例对象
（2）常用的方法：
init方法
registerTheme方法

37.全局Echarts对象的常用方法2

小结：
初始化方法init
注册主题registerTheme
注册地图registerMap
关联多个图标connect

38.echartsInstance对象

on/off
绑定或者解绑事件处理函数
鼠标事件
Echarts事件：常见事件-legendselectchanged等事件参数arg和事件相关的数据信息

39.echartsInstance对象常用方法2

setOption
resize
on/off
dispatchAction
clear
dispose

40.Echarts高级小结

（1）显示相关
主题
调色盘
样式
自适应
（2）动画相关
加载动画
增量动画
动画配置
（3）交互api
全局echarts对象的方法
echartsInstance对象的方法

41.koa2的介绍

1.项目整体思路介绍
后台开发
结合vue开发图标组件
webSocket实现后台数据推送
主题切换、页面整合、全屏切换 …
2.koa2的学习思路
koa2的介绍
koa2的快速上手
搭建后台项目
3.koa2简介
基于node.js平台web开发框架
由Express原班人马打造 Express Koa Koa2
Express web框架 回调函数
koa web框架 Generator+yield
koa2 web框架 async/await
4.koa2特点
支持async/await
洋葱模型的中间件

42.koa2快速上手

快速上手
1.检查node的环境
node -v
2.安装koa
npm init -y
npm install koa (不是koa2，默认最新的就是koa2)
3.创建并编写app.js文件
创建koa对象
编写响应函数（中间件）
监听端口
4.启动服务器
node app.js

// 1.创建koa对象
const Koa = require('koa')
const app = new Koa()
// 2.编写响应函数(中间件)
// ctx:上下文，web容器，ctx.request ctx.response
// next:下一个中间件，下一层中间件是否能得到执行，取决于 next这个函数有没有被调用
app.use((ctx,next)=>{
    console.log(ctx.request.url)
    ctx.response.body = "hellow world"
})
// 3.绑定端口号3000
app.listen(3000)

访问：

打印的内容：

43.koa2中间件的特点

中间件的特点
1.koa对象通过use方法加入 一个中间件
2.一个中间件就是一个函数
3.中间件的执行顺序符合洋葱模型
4.内层中间件是否执行取决于外层中间件的next函数是否调用
5.调用next函数得到的是Promise对象（不仅仅函数的调用，内部进行了封装）

app.use(async (ctx,next)=>{
	//刚进入中间件想做的事情
	await next()
	//内层中间件结束之后想做的事情
})

44.项目的准备(project-start)

项目的准备
1.安装包
npm init -y
npm install koa
2.创建文件和目录结构
app.js
data/
middleware/
koa_response_data.js
koa_response_duration.js
koa_response_header.js
utils/
file_utils.js

45.后台项目_总耗时中间件的开发

总耗时中间件
1.第一层中间件
2.计算执行时间
一进入时记录开始时间
其他所有中间件执行完后记录结束时间
两者相减
3.设置响应头
X-Response-Time:5ms

46.后台项目——响应头中间件的开发

1.第二层中间件
2.获取mime类型
application/json
3.设置响应头
Content-Type:application/json; charset=UTF-8

47.后台项目——业务逻辑中间件的开发

异步任务不能通过返回值的形式将数据返回给调用者（包装成promise）

// 读取文件的工具方法
const fs = require('fs')
module.exports.getFileJsonData = (filePath) =>{
    return new Promise((resolve,reject)=>{
        // 根据文件路径读取文件内容
        fs.readFile(filePath,'utf-8',(error,data)=>{
            if(error) {
                // 文件读取失败
                reject(error)
            }else {
                // 文件读取成功
                resolve(data)
            }
        })
    })
    
}

调用出通过async await方式获取数据，通过try catch拦截处理错误

try {
        const ret = await fileUtils.getFileJsonData(filePath)
        ctx.response.body = ret
}catch(error) {
        const errorMsg = {
            message:'读取文件内容失败,文件资源不存在',
            status: 404
        }
        ctx.response.body = JSON.stringify(errorMsg)
    }

业务逻辑中间件：
1.第三层中间件
2.读取文件内容
获取请求的路径，拼接文件路径
读取该路径对应的文件的内容
3.设置响应体

接口总览：
1.商家销量 /api/seller
2.预算开销 /api/budget
3.库存信息 /api/stock
4.销量趋势 /api/trend
5.销量排行 /api/rank
6.商家分布 /api/map
7.热销商品 /api/hotproduct
WebSocket

48.后台项目_跨域配置

1.允许跨域：
（1）实际是通过Ajax访问服务器
（2）同源策略
同协议\同域名\同端口
当前页面的地址和Ajax获取数据的地址
（3）设置响应头

ctx.set('Access-Control-Allow-Origin',"*")
ctx.set('Access-Control-Allow-Methods','OPTIONS,GET,PUT,POST,DELETE')

测试代码

前端----

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button>点我试试</button>
    <script>
        $('button').click(function(){
            $.ajax({
                type:'get',
                url:'http://127.0.0.1:8888/api/map',
                success: function(data){
                    console.log(data)
                }
            })
        })
    </script>
</body>
</html>

后端—

// 设置响应头中间件
module.exports = async (ctx,next)=>{
    const contentType = 'application/json; charset=utf-8'
    ctx.set('Content-Type',contentType)
    // ctx.set('Access-Control-Allow-Origin',"*")
    // ctx.set('Access-Control-Allow-Methods','OPTIONS,GET,PUT,POST,DELETE')
    await next()
}

设置前：

设置后：

2.koa小结——
koa2的介绍和特点
koa2的快速上手
后台项目：
响应耗时中间件
响应头中间件
业务逻辑中间件

49.前端项目_项目的创建和准备

项目地图：
1.前端项目准备
2.单独图标组件的开发
3.websocket引入
4.细节处理

前端项目准备：
1.vue-cli项目搭建
npm install -g @vue/cli
vue create vision
cd vision
npm run serve
2.删除无关代码
精简App.vue
删除 HelloWorld.vue
删除Home.vue
精简router/index.js
3.静态资源的引入
static文件夹复制到public目录之下
4.项目的基本配置
vue.config.js
自动打开浏览器
端口号
5.全局对象echarts对象的挂载
引入-index.html，echarts.main.js
挂载-main.js，Vue.prototype.$echarts=window.ehcarts使用this.$echarts
6.axiose的分装与挂载
安装 npm install axios
封装-main.js ，Vue.prototype. $http=axios使用this.$http

50.前端项目_商家销售统计_组件结构和布局结构

商家销售统计（横向柱状图）
1.组件结构设计：
SellerPage.vue ,测试使用，针对路径/sellerpage而展示
Seller.vue呈现图表的组件
2.布局结构设计：
SellderPage.vue
Seller.vue
global.less 将所有的容器宽度和高度设置为占满父容器

51.前端项目_商家销售统计_图表基本功能

3.图表实现的一半步骤：
initChart,初始化echartsInstance对象
getData,获取数据
update,设置option type类型为bar

52.前端项目_商家销售统计 _动态刷新的实现

4.动态刷新的实现
数据的处理：
从小到大
每5个元素显示一页：currentPage,totalPage
启动和停止的时机：
启动，获取数据之后启动定时器；鼠标移除图表时启动定时器
停止，组件销毁时停止定时器；鼠标移入图表 时启动定时器
边界值的处理：判断currentPage是否大于totalPage

53.前端项目_商家销售统计_ui调整

1.主题的使用：
引入主题js文件
init方法中指明主题的名称
2.图标的圆角
canvas标签增加属性样式
3.坐标轴的位置
grid相关配置
4.条状图条目——

54.前端项目_商家销售统计_ui调整

4.条状图条目：
宽度 barWidth
文字 label
右边圆角 itemStyle.barBorderRadius
颜色渐变 itemStyle.color LinearGradient
背景 tooltip

55.前端项目_商家销售统计_拆分option

1.初始化配置option
2.获取数据之后的配置dataOption
3.分辨率适配的配置adapterOption

56.前端项目_商家销售统计_分辨率适配

1.获取图标容器的宽度
计算标题的大小
2.设置新的option
标题文字
柱的宽度
柱的圆角
阴影背景的宽度
3.图标实例对象的resize

57.前端项目_销量趋势表_通用

1.初始化图表格对象initChart
初始化配置项initOption
2.获取数据getData
对allData进行赋值
3.处理数据更新图表updateChart
数据配置项dataOption
4.分辨率适配
（1）窗口大小变化的事件监听resize
screenAdapter
分辨率适配的配置项adapterOption
（2）组件销毁时取消监听

58.前端项目_销量趋势表_基本图表的显示

1.数据的获取 /api/trend
2.数据的处理
x轴
y轴
图例数据
3.图表的设置
type类型为line
堆叠图效果-stack属性值要相同

59.前端项目_销量趋势表_ui调整

1.主题的使用
init第二个参数
2.坐标轴大小设置
grid
3.紧挨边缘
boundaryGap
4.工具提示
tooltip
5.图例位置和形状
legend
6.区域面积
areaStyle
7.颜色渐变
LinearGrandient

60.前端项目_销量趋势表_切换图表

1.布局和样式
字体文件
2.可选项的渲染
计算属性
数组filter方法
3.标题的设置
计算属性
4.点击箭头
v-onclick
v-show
5.点击可选条目
增加变量choiceType
隐藏可选项布局

61.前端项目_销量趋势表_分辨率的适配

分辨率的适配
screenAdapter
标题文字大小
图例大小

62.前端项目_商家地图分布_显示地图

1.通用代码结构和流程
（1）组件的结构
MapPage.vue
Map.vue
（2）代码的流程结构
初始化图表对象initChart
获取数据getData
处理数据更新图表updateChart
分辨率适配screenAdapter
2.显示地图
获取 中国地图矢量数据
注册地图数据
配置geo

63.前端项目_商家地图分布_显示散点

1.获取数据 /api/map
2.处理数据
散点数据
图例数据
3.图表的设置
配置series

64.前端项目_商家地图分布_ui调整

1.主题的使用
init第二个参数
2.标题的显示
title
3.地图位置和颜色
geo
geo.itemStyle
4.涟漪效果
rippleEffect.scale
rippleEffect.brushType

65.前端项目_商家地图分布_分辨率适配

screenAdapter
标题文字大小
图例大小

66.前端项目_商家地图分布_地图的点击事件

1.点击事件的监听
this.chartInstance.on(‘click’,()=>{})
2.获取所点击身份的矢量地图数据
省份拼音的对照数据
得到所点击省份地图数据的路径
3.显示省份
注册地图数据
配置geo
4.回到中国地图
配置geo
map：‘china’
5.矢量地图数据的缓存 *

67.前端项目_销售排行表_基本图表的显示

1.通用代码结构和流程
（1）组件的结构
RankPage.vue
Rnak.vue
（2）代码流程结构
初始化图表对象initChart
获取数据getData
处理数据更新图表updateChart
分辨率适配screenAdapter
2.图表的基本功能实现
（1）数据的获取
/api/rank
（2）数据的处理
x轴的数据
y轴的数据
（3）图表的设置
type类型为bar

68.前端项目_销售排行表_ui调整

1.主题的使用
init第二个参数
2.标题的设置
title
3.坐标轴大小和位置
grid
4.工具提示
tooltip
5.颜色设置
不同数据显示不同的颜色
颜色渐变设置

69.前端项目_销售排行表_平移动画效果

平移动画效果的实现
1.数据的处理
（1）一次性 展示 10条数据
dataZoom : startValue endValue
（2）每隔一段时间向左移动一条数据
控制dataZoom的startValue和endValue
（3）边界值的处理
2.动画的启动
获取数据之后启动定时器
鼠标移出图表时穷启动定时器
3.动画的停止
组件销毁时停止定时器
鼠标移入图表时停止定时器

70.前端项目_销售排行表_分辨率适配

分辨率适配
1.标题的文字大小
2.柱的宽度
3.柱的圆角

71.前端项目_热销商品占比_基本图表的显示

1.通用代码结构和流程
2.图表基本功能实现
（1）数据的获取
/api/hotproduce
获取三个类别下所有分类的数据
（2）数据的处理
饼图的数据 name,value
图例的数据
（3）图表的设置
type类型为pie

72.前端项目_热销商品占比_切换数据的实现

1.布局和样式
2.点击事件的处理
改变currentIndex
分类名称：计算属性

73.前端项目_热销商品占比_ui调整

1.主题的使用
init第二个参数
2.箭头 和分类名称的颜色 css
3.标题的设置 title
4.高亮状态显示文字 emphasis
5.图例的形状和位置 legend
6.工具提示 tooltip
显示子分类数据：
饼图数据的增加
formatter支持回调函数

74. 前端项目_热销商品占比_分辨率的适配

1.标题文字大小
2.饼图的大小
3.图例的大小
4.箭头和分类名称的大小

75.前端项目_库存销量模块_基本图表的显示

1.通用代码结构和流程
组件结构
代码流程结构
2.图表基本功能的实现
（1）数据的获取
/api/stock
（2）数据的处理
五个饼图 series数组下有五个对象
每一个饼图两个区域 series下每个对象的data属性有两个对象
type 类型为pie
（3）图表的设置
每一个饼图的位置不同
圆环需要设置两个半径

76.前端项目_库存销量模块_ui的调整

1.主题的使用 init的第二个参数
2.标题的设置 title
3.鼠标动画的移除 hoverAnimation
4.指示线移除 labelLine
5.圆环内文字的显示
label: positon,color
6.颜色设置
销量颜色设置： 颜色渐变 linearGrendient
库存： 固定颜色

77.前端项目_库存销量模块_切换动画

1.数据的处理
currentindex 表示当前的页数
每一页显示五个圆环
2.启动和停止的时机
启动 ：获取数据之后启动定时器
鼠标移出图表时启动定时器
停止：组件销毁时停止定时器
鼠标移入图表时停止定时器
3.边界值的处理
判断currentindex是否大于1

78.前端项目_库存销量模块_分辨率适配

screenAdapter
1.标题文字大小
2.圆环半径
3.圆环文字

79.websocket的基本使用_后端 + 80.websocket的基本使用_前端

WebSocket的引入
1.WebSocket的基本使用
（1）后端
安装包：npm i ws -S
创建对象：

const WebSocket = require('ws')
const wss = new WebSocket.Server({
	port:9998
})

监听事件：
连接事件—

wss.on('connection',client=>{
	console.log('有客户端连接')
})

接收数据事件—

wss.on('connection',client=>{
	client.on('message',msg=>{
		console.log('客户端发送数据过来了')
	})
})

发送数据：

client.send('hellow socket')

（2）前端
创建对象：

const ws = new WebSocket('ws://localhost:9998')
//WebSocket是window对象就提供的，因此不需要额外对的包

监听事件：
连接成功事件—

wx.onopen

接收数据事件—

ws.onmessage

关闭连接事件—

wx.onclose

发送数据：

ws.send

81.后端项目改造

后端工程：
1.创建web_socket_server.js
（1）创建Socket服务端对象，绑定端口
（2）监听事件：connection message
（3）将监听事件的代码放到一个函数中，并将这个函数导出

82.前后端数据字段的约定

2.服务端接收数据字段的约定：

{
"action":"getData",
"socketType":"trendData",
"chartName":"trend",
"value":""
}

（1）action:
代表某项行为可选值：
getData,代表获取图表数据
fullScreen,代表产生了全屏事件
themeChange,代表产生了主题切换事件
（2）socketType:
代表业务模块的类型
这个值代表前端响应函数的标识，可选值
trendData
sellerData
mapData
rankData
hotData
stockData
fullScreen
themeChange
（3）chartName:
代表图表名称，可选值：
trend,seller,map,rank,hot,stock
如果是主题切换事件，可不传递此值：
主题切换是所有组件都要切换
全屏和获取数据需要标识出是 那个图表
（4）value
代表具体的数据值：
如果是全屏事件，true代表全屏，false,代表非全屏
如果是主题切换，可选值为chalk或者vintage

3.服务端发送数据字段的约定
（1）接收到action为getData时：
取出数据中chartName字段
拼接json文件的路径
读取改文件的内容
在接收到的数据基础上增加data字段，值就是所读取的文件内容：

{
"action":"getData",
"socketType":"trendData",
"chartName":"trend",
"value":"",
"data":"从文件中读取出来的json文件的内容"
}

（2）接收到action不为getData时
原封不动的将从客户端接收到的数据，转发给每一个处于连接状态的客户端

83.后端接收数据时的处理

client.on('message',msg=>{})

不同条件下的判断：
接收到的action为getData时
接收到的 action不为getData时

84.前端代码改造_连接服务器

1.创建socket_service.js
（1）定义类SocketService并定义成单例设计模式
（2）定义连接服务器的方法connect
创建WebSocket对象，对服务器进行连接
在main.js中调动此方法
（3）监听事件
onopen
onmessage
onclose

85.前端代码改造_处理接收的数据

（4）存储回调函数
callBackMapping = {}
registerCallBack(socketType,callBack){}
unRegisterCallBack(socketType) {}
（5）接收数据的处理
onmessage 调用之前存储的回调函数，传递数据
（6）定义发送数据的方法
send(data) {
this.ws.send(JSON.stringfy(data))
}
（7）挂载socketService对象到vue的原型对象上
Vue.prototype.$socket = SocketService.instance
方便各个组件使用

86.前端代码改造_组件的改造

组件的改造
1.created注册回调函数
2.destroyed 取消回调函数
3.在原来获取数据的地方，改为发送数据
数据的格式需要满足约定方式

87.前端代码改造_优化

1.重发数据的机制
（1）增加实例属性 connected
默认值为alse
onopen时设置为true
onclose时设置为false
（2）发送数据时需要判断 connected
true 直接发送
false 延迟发送 延时的时长随着尝试的机会增加 实例属性sendRetryCount
2.断开重连机制
onclose时
延时尝试连接服务器
延时的时长随着尝试的机会而增加
实例属性connectRetryCount

88.细节处理_组件合并

1.创建ScreenPage.vue并配置路由规则
2.创建布局和样式
3.注册组件，并将组件置于合适的位置
4.调整原有的组件样式
global.less .com-container’
Hot.vue 图例的大小
Stock.vue 圆环的大小

89.细节处理_全屏切换_布局样式

1.布局和样式的调整
2.全屏状态数据的定义
3.全屏状态样式的定义

90.细节处理_全屏切换_点击事件处理

4.点击事件处理
（1）改变fullScreenStatus的数据
（2）需要调用对应图表组件的screenAdapter的方法
此处注意使用this.$next(()=>{})
使用时机：当数据发生变化，下一次 组件更新完成的时候

91.细节处理_全屏切换_联动效果

1.发送全屏数据给服务器
服务器接收到这个数时，会转发给每一个处于连接状态的客户端
2.ScreenPage.vue中
created注册函调函数
destroyed取消回调
recvData接收数据并更新状态

92.细节处理_主题切换_图表主题

1.数据的存储
vuex state theme
mutation changeTheme
2.点击切换按钮，修改vuex中theme的数据
3.各个组件监听theme的变化
映射属性
监听属性
完成主题切换：
当前图表 销毁
重新初始化图表对象-init参数；index.html中引入主题
完成 屏幕适配
更新图标显示

93.细节处理_主题切换_定义数据

特殊处理：
1.html元素的样式改变
（1）ScreenPage.vue
背景色
标题的颜色
页面左上角logo图标
页面顶部头部边框图片
页面右上角切换按钮的图标
（2）Trend.vue
下拉框的背景
下拉框的文字颜色
（3）Hot.vue
箭头的颜色
分类名称的颜色
2.定义theme_utils.js
（1）定义两个主题下，需要进行样式切换的样式数据
（2）使用属性 绑定的方式控制样式

94.细节处理_主题切换_原生html的切换

特殊处理：
1.html元素的样式改变
（1）ScreenPage.vue
背景色
标题的颜色
页面左上角logo图标
页面顶部头部边框图片
页面右上角切换按钮的图标
（2）Trend.vue
下拉框的背景
下拉框的文字颜色
（3）Hot.vue
箭头的颜色
分类名称的颜色
——代码实现

95.细节处理_主题切换_联动效果

发送数据给服务端
根据服务端返回的值（在回调函数中拿到返回值）
根据返回值修改vuex中的主题状态

总结

1.技术实现总结
2.模块总结
3.重点模块实现总结（echarts，socket）
4.其他

1.技术实现总结
（1）前端使用：
vue
vuex
Echarts
Websocket
百分比布局适配

（2）后端使用：
node
koa2
websocket

2.模块总结
（1）前端主要模块：
销量趋势
销售统计
热销商品
销量排行
库存与销量
商家分布
（2）后端主要模块
服务器搭建koa
路由模块处理
数据库操作处理
中间件：基础配置中间件，业务逻辑中间件
后端websocket实现：socket连接，连接后的监听，消息发送
工具文件：文件读取，日期处理，加密等

3.重点模块实现思路总结（echarts，socket）
（1）前端实现
前端布局适配（百分比适配）
echarts定制化（pie,bar,line，scatter(散点图),radar（雷达）,gauge(仪表盘)，geo(地图)）
websocket实现数据动态（websocket连接，发送数据，定义回调函数，通过回调函数传递从服务器接收的数，连接失败重连机制，发送消息失败重发机制）
vuex数据通信
全屏与主题切换联动（约定数据字段，循环并将全屏与主题切换数据发给所有连接状态的客户端实现联动）
（2）后端实现
路由模块处理（一级，二级路由处理）
数据库操作处理（数据查询，联合查询） ——暂时去掉
中间件：基础配置中间件，业务逻辑中间件
后端websocket实现：socket连接，连接后的监听，消息发送

仓库代码看这里——：
前 vue-Echarts
后 node-koa