小结 - consolezt/- GitHub Wiki
本人从事前端一年多，现在有空余时间，于是在网上寻找视频来做一些小的项目，一次来提高自己的技术水平。因对数据可视化比较感兴趣，于是在 B 站上找到了 pink 老师的 《电商平台数据可视化实时监控系统》，在 B 站上可以直接搜索到。学习时一边看视频，一边敲代码，项目还算顺利的复刻完成。之后觉得应该把知识点总结一下，因此写了这篇总结。 项目比较简单，主要是数据大屏，共展示了6个图表数据。项目除了最基本的使用 Echarts 展示数据之外，还要学习一下的就是 大屏展示、自适应分辨率，支持联动效果，一端操作，多端联动展示。 项目由前后端组成，下面就说下我整理的学习要点与笔记。
后端
后端项目使用 Node + Koa2 技术，与前端通信前期使用 axios，后期为了保证数据及时更新，因此使用 WebSocket。Node 是前端常见的服务端技术，可以使 JavaScript 运行在服务端。 Koa2 是服务端框架，加入了中间件机制。
Koa2
Koa2的特点有两个：支持async \ await 语法糖和洋葱模型的中间件，async \ await 就是对 Promise 的封装，这样可以避免 Express 中使用异步形成的回调地狱。中间件就是一个函数，洋葱模型就是先进后出的特点，这样可以保证中间件的数据不被随意修改。中间件有以下特点： • Koa 对象通过 use 方法加入一个中间件； • 一个中间件就是一个函数； • 中间件的执行顺序符合洋葱模型； • 内层中间件能否执行取决于外层中间件的 next 函数是否调用； • 调用 next 函数得到的是 Promise 对象，加上 await 之后就是普通的对象；
axios
axios 是一个基于 Promise 的 HTTP 库，可以在浏览器和 node 端中使用。
WebSocket
WebSocket 是一种网络通信协议，相比于 HTTP 协议，WebSocket 的特点就在于服务端可以向客户端推送消息，客户端也可以向服务端发送消息，比 HTTP 协议只能单向从客户端发起请求无疑要更方便。项目的一端操作、多端联动功能就依赖于 WebSocket 的这一特性。 在该项目中，服务端主要用到了 WebSocket 的这几个方法：connection（监听客户端的链接事件）、message（监听客户端连接对象的 message 事件）。这是项目中使用到的方法，还有一点要注意的事， 浏览器端使用 WebSocket 不需要安装，但服务端需要安装。 后端部分还编写了请求时间的中间件、设置响应头的中间件，其中，设置响应头的中间件中还设置了跨域的属性，因为本人不是特别懂，所以不做总结。
前端
前端部分的东西就比较好懂了，用的 Vue + Vuex + Echarts，其中，地图部分的数据用的 JSON 文件来保存的。为了使用方便，在 main.js 文件中把 WebSocket、echarts、axios 都挂载到了 Vue 的原型属性上了。
Echarts
Echarts 在以前的项目中使用过，可以画出指定的图表，但一些细节方面的调整就不是太懂了。因此在这里把 Echarts 的知识点做个记录，加深印象。
全局 Echarts 对象
• init：初始化 echarts 实例对象，使用主题； • registerTheme：注册主题（只有注册过的主题，才能在 init 方法中使用）； • registerMap：注册地图数据，注册时用的 key 值要和 geo 配置中 map 属性的值保持一致； • connect：实现多图关联，传入联动目标为 Echarts 实例对象（数组）；
echartsInstance 对象
echartsInstance 对象是通过 Echarts.init 方法调用之后得到的实例。它有以下方法： • setOption：设置或修改图表实例的配置项及数据（多次调用合并配置项：增量动画）； • resize：重新计算和绘制图表，一般和 window 对象的 resize 事件结合使用； • on \ off：绑定或解绑事件处理函数，事件包括鼠标事件（click）和 Echarts 自定义事件（legendselectchanged），事件参数为 arg； • dispatchAction：触发某些行为，使用代码模拟用户的行为； • clear：清空当前实例，会移除实例中所有的组件和图表； • dispose：销毁实例，销毁实例后无法再被使用； Echarts 的使用其实不难，主要的就是要记住一些属性的配置。通过配置如 tilte 配置、tooltip 配置、toolbox 配置、legend 配置，其它的比如折线图、散点图、饼图（高亮emphasis）等等的配置，直角坐标系还有如网格（grid）、坐标轴（xAxis、yAxis）、区域缩放（dataZoom），还有，就是柱状图的渐变色设置了，渐变色通过 内置渐变器 new echarts.graphic.LinearGradient（x1, x2, y1, y2, ['颜色值']）来设置。要想熟练使用 Echarts 的各项属性值，最好的方法还是多用多练。
WebSocket
前端对 WebSocket 发送过来的数据要进行处理。首先要连接服务器，然后监听事件，事件有 onopen（连接服务端成功）、onclose（连接服务端失败）、onmessage（得到服务端推送过来的数据）、send（向服务端发送数据）。这些是主要的事件，使用 WebSocket 时，还有一些细节需要处理。
Vuex
vuex 中存储中的是主题数据，因为各个组件中都使用了主题，且组件主题发生变化时其他的组件也要随之响应，因此数据存储于其中。
主要功能
一项操作、多端联动
该功能主要是联动效果，当有多个用户在使用该项目时，一端用户点击了放大缩小功能，或者是皮肤切换，所有的客户端都会发生变化，和用户操作的页面保持一致性。 该功能主要使用 WebSocket 来实现。当用户在客户端点击按钮之后，客户端根据指定的字段，发送给服务器，服务器解析信息，判断是组件放大 / 缩小，还是主题变化，如果是组件放大或缩小，确定是哪个组件发生变化，然后获取变化后的数据，在推送给客户端，当客户端监听到变化之后，在重新渲染组件。 响应式组件图表 调用 window.addEventListener（'resieze'）监听屏幕尺寸的变化，发生变化时调用指定方法，在方法中获取当前组件的宽度，然后根据比例来缩放图表选项，setOption 设置选项，最后调用 echartsInstance.resieze 方法来执行。
### 优化
WebSocket 的优化：
• 记录 websocket 是否连接成功，连接成功之后再发送数据给服务端（项目启动时可能网络影响，websocket 为连接成功就开始执行 send 方法），当连接失败时，记录失败的次数 a，然后在乘以特定值 b，使用时间函数来定时发送，时间频率为 a * b 的值，成功则重置 a 的值，这样可以减少请求次数，提高性能； • 当连接失败时，同样记录失败次数 a，然后在乘以特定值 b，使用时间函数来定时连接，时间频率为 a * b 的值，成功则重置 a 的值； websocket 减少请求次数的优化方式差不多，但给了我一定的启示，在程序编写中要合理的利用变量来计算数值。记得以前我做项目时，接到一个需求是要用动画来显示排行榜数据，每一项排行榜都要延时显示，后来功能是做出来了，但每一项的延时时间都是一个个测试出来的，特别费时间，如果动画频率变化了，这里每一项都要修改，就很不好维护。
小结
这个项目实际上比较简单，上手容易，没有特别困难的需求，但敲了一遍之后还是有收获的，代码还是要多写多练。