目录

• 数据可视化前言

• Echarts的基本使用

• Echarts的高级使用

• 电商平台数据可视化实时监控系统

  • 后台搭建
  • 结合Vue开发图表组件
  • WebSocket实现数据推送
  • 主题切换\页面合并\全屏切换

数据可视化前言

• 项目介绍

1. 该项目为电商平台数据可视化实时监控系统
2. 可以保证实时获取数据进行分析
3. 支持大屏展示，自适应分辨率
4. 支持联动效果，一段操作，多端联动展示\

• 技术选型

1. 图表绘制ECharts
2. 前端Vue,Vue Router,VueX,Webpack
3. 前后端交互Axios
4. 前后端数据推送WebSocket
5. 后端开发koa2

Echarts的基本使用

• 介绍
  ECharts是 一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender,提供直观，交互丰富，可高度个性化定制的数据可视化图表。
  特点：开源免费 功能丰富 社区活跃
  官网地址: https://echarts.apache.org/zh/index.html
  丰富的可视化类型：https://echarts.apache.org/examples/zh/index.html
  多种数据格式类型：key-value数据格式，二维表，TypedArray格式
  流数据的支持：流数据的动态渲染，增量渲染技术
  移动端优化，跨平台使用，绚丽的特效，三维可视化 https://echarts.apache.org/zh/feature.html
• 快速入门
  • 五分钟快速上手ECharts：引入、准备、设置
  1. 引入echarts.js文件步骤
  2. 准备一个呈现图表的盒子
  3. 初始化echarts实例对象
  4. 准备配置项
  5. 将配置项设置给echarts实例对象
  • 相关配置讲解：https://www.echartsjs.com/zh/api.html#echarts
• 常用图表：柱状图、折线图、散点图、饼图、地图、雷达图、仪表盘图
  
  1. 柱状图
     柱状图描述的是分类数据，呈现的是每一个分类中有多少, 通过柱状图, 可以很清晰的看出每个分类数据的排名情况
     
  2. 折线图
     
     折线堆叠图
     
  3. 散点图\

Echarts的高级使用

电商平台数据可视化实时监控系统

后台搭建

• koa2

  • 快速上手
    node -v 检查node环境
    npm init -y 创建package.json文件维护项目第三方包的信息
    npm install koa 安装koa2
    编写app.js文件：创建koa实例对象，编写响应函数中间件，绑定端口号3000

    //1.创建koa对象
    const Koa = require('koa') //引入koa包，给构造函数起名为Koa
    const app = new Koa()//通过构造函数创建实例对象
    //2.编写响应函数(中间件)
    //ctx:上下文，web容器
    //next:下一个中间件
    app.use((ctx, next) => {
        console.log(ctx.request.url)
        ctx.response.body = 'hello world'
    })//箭头函数方式实现响应函数
    //3.绑定端口号3000
    app.listen(3000)
    

    node app.js 启动服务器，打开浏览器, 在浏览器中输入 127.0.0.1:3000/ 你将会看到浏览器中出现的字符串, 并且在服务器的终端中, 也能看到请求的url
    
    

  • 中间件特点

    1. Koa2的实例对象通过 use方法加入一个中间件

    2. 一个中间件就是一个函数,这个函数具备两个参数,分别是 ctx和 next 中间件的执行符合洋葱模型

    3. 内层中间件能否执行取决于外层中间件的next函数是否调用调用

    4. next函数得到的是Promise对象, 如果想得到 Promise所包装的数据, 可以结合await和async

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

       

• 后台项目开发
  后台项目需要达到这以几个目标:
  1. 计算服务器处理请求的总耗时
     计算出服务器对于这个请求它的所有中间件总耗时时长究竟是,我们需要计算一下
  2. 在响应头上加上响应内容的mime类型
     加入mime类型,可以让浏览器更好的来处理由服务器返回的数据.如果响应给前端浏览器是j son格式的数据，这时候就需要在咱们的响应头当中增加Content-Type它的值就是application/json，applicati on/json就是json数据类型的mime类型\
  3. 根据URL读取指定目录下的文件内容
     为了简化后台服务器的代码,前端图表所要的数据,并没有存在数据库当中,而是将存在文件当中的，这种操作只是为了简化咱们后台的代码.所以咱们是需要去读取某一个目录 下面的文件内容的。
     
     app.js是后台服务器的入口文件
     data目录是用来存放所有模块的json文件数据
     middleware是用来存放所有的中间件代码
     koa_response_data.js是业务逻辑中间件
     koa_response_duration.js是计算服务器处理时长的中间件
     koa_response_header.js是用来专门设置响应头的中间件
     file_utils.js是用来读取文件的工具方法
     • koa_response_duration.js
     • koa_response_header.js
     • koa_response_data.js
     • file_utils.js

     // 计算服务器消耗时长的中间件
     module.exports = async (ctx, next) => {
       // 记录开始时间
       const start = Date.now()
       // 让内层中间件得到执行
       await next()
       // 记录结束的时间
       const end = Date.now()
       // 设置响应头 X-Response-Time
       const duration = end - start
       // ctx.set 设置响应头
       ctx.set('X-Response-Time', duration + 'ms')
     }
     

     // 设置响应头的中间件
     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()
     }
     

     // 处理业务逻辑的中间件,读取某个json文件的数据
     const path = require('path')
     const fileUtils = require('../utils/file_utils')
     module.exports = async (ctx, next) => {
       // 根据url
       const url = ctx.request.url // /api/seller   ../data/seller.json
       let filePath = url.replace('/api', '') //  /seller
       filePath = '../data' + filePath + '.json'  // ../data/seller.json
       filePath = path.join(__dirname, filePath)
       try {
         const ret = await fileUtils.getFileJsonData(filePath)
         ctx.response.body = ret
       } catch (error) {
         const errorMsg = {
           message: '读取文件内容失败, 文件资源不存在',
           status: 404
         }
         ctx.response.body = JSON.stringify(errorMsg)
       }
     
       console.log(filePath)
       await next()
     }
     

     // 读取文件的工具方法
     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)
           }
         })
       })
     }
     

结合Vue开发图表组件

WebSocket实现数据推送

主题切换\页面合并\全屏切换