Vue怎么使用Echarts实现横向柱状图并通过WebSocket即时通讯更新

这篇文章主要介绍“Vue怎么使用Echarts实现横向柱状图并通过websocket即时通讯更新”，在日常操作中，相信很多人在Vue怎么使用Echarts实现横向柱状图并通过WEBSocket即时通讯更新问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue怎么使用Echarts实现横向柱状图并通过WebSocket即时通讯更新”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

先看下后台返回的数据结构是什么样子的

[  {    "name":"商家1",    "value":"99"  },  {    "name":"商家2",    "value":"199"  },  {    "name":"商家3",    "value":"222"  },  {    "name":"商家4",    "value":"99"  },  {    "name":"商家5",    "value":"499"  },  {    "name":"商家6",    "value":"252"  },  {    "name":"商家7",    "value":"199"  },  {    "name":"商家8",    "value":"29"  },  {    "name":"商家9",    "value":"232"  },{    "name":"商家10",    "value":"99"  },  {    "name":"商家11",    "value":"77"  },  {    "name":"商家12",    "value":"82"  },  {    "name":"商家13",    "value":"99"  },  {    "name":"商家14",    "value":"19"  },  {    "name":"商家15",    "value":"22"  },  {    "name":"商家16",    "value":"522"  }]

开始实现前端的代码

html

<div class="com-page"><div class="com-container">  <div class="com-chart" ref="seller_ref"></div></div></div>

CSS

html,body,#app{  width: 100%;  height: 100%;  padding: 0;  margin: 0;  overflow: hidden;}.com-page {  width: 100%;  height: 100%;  overflow: hidden;}.com-container {  position: relative;  width: 100%;  height: 100%;  overflow: hidden;}.com-chart {  width: 100%;  height: 100%;  overflow: hidden;}

data

data() {    return {      chartInstance: null,  //初始化echartInstance对象      allData: null,    //接收的后台数据      currentPage: 1, //当前显示的页数      totalPage: 0, //一共有多少页      timerId: null //定时器标识    }  },

methods

initChart方法

initChart() {     //初始化echartInstance对象     //chalk是我们定义的主题，echarts官方有案例，怎么使用可以百度一下,不喜欢可以直接删掉      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, 'chalk')      //对图表初始化配置对控制      const initOption = {        title: {          text: '▎商家销售统计',          left: 20,          top: 20        },        grid: {          top: '20%',          left: '3%',          right: '6%',          bottom: '3%',          containLabel: true // 距离是包含坐标轴上的文字        },        xAxis: {          type: 'value'        },        yAxis: {          type: 'cateGory'        },        tooltip: {          trigger: 'axis',          axisPointer: {            type: 'line',            z: 0,            lineStyle: {              color: '#2D3443'            }          }        },        series: [{          type: 'bar',          label: {            show: true,            position: 'right',            textStyle: {              color: 'white'            }          },          itemStyle: {            // 指明颜色渐变的方向            // 指明不同百分比之下颜色的值            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [              // 百分之0状态之下的颜色值              {                offset: 0,                color: '#5052EE'              },              // 百分之100状态之下的颜色值              {                offset: 1,                color: '#AB6EE5'              }            ])          }        }]      }      this.chartInstance.setOption(initOption)      //对图表对象进行鼠标事件监听      //鼠标移入，定时器停止      this.chartInstance.on('mouseover', () => {        clearInterval(this.timerId)      })      //鼠标移出，定时器开始      this.chartInstance.on('mouseout', () => {        this.startInterval()      })    },

getData方法

这里还是用Http请求获取的数据，后面我再讲怎么用WebSocket获取我们的数据

 async getData() {      const {        data: res      } = await this.$http.get('seller')      this.allData = res      //对数据进行排序      this.allData.sort((a, b) => {        return a.value - b.value //从小到大排序      })      //每五个元素显示一页      this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1      this.updateChart()      //启动定时器      this.startInterval()    },

updateChart方法

//更新图表    updateChart() {      //起始的位置      const start = (this.currentPage - 1) * 5       //结束的位置      //起始为0，所以展示1-5      const end = this.currentPage * 5       const showData = this.allData.slice(start, end)      const sellerNames = showData.map((item) => {        return item.name      })      const sellerValue = showData.map((item) => {        return item.value      })      const dataoption = {        yAxis: {          data: sellerNames        },        series: [{          data: sellerValue        }]      }      this.chartInstance.setOption(dataOption)    },

startInterval方法

//定时器，数据每3秒更新一次 startInterval() {      if (this.timerId) {        clearInterval(this.timerId)      }      this.timerId = setInterval(() => {        this.currentPage++        if (this.currentPage > this.totalPage) {          this.currentPage = 1        }        this.updateChart()      }, 3000)    },

screenAdapter方法

 //屏幕适配    screenAdapter() {      const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6      console.log(titleFontSize)      const adapterOption = {        title: {          textStyle: {            fontSize: titleFontSize          }        },        tooltip: {          axisPointer: {            lineStyle: {              width: titleFontSize            }          }        },        series: [{          barWidth: titleFontSize,          //圆角大小          itemStyle: {            barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],          }        }]      }      this.chartInstance.setOption(adapterOption)      //手动调用图表对象resize      this.chartInstance.resize()    }

mounted

  mounted() {    this.initChart()    this.getData()    window.addEventListener('resize', this.screenAdapter)    this.screenAdapter()  },

destroyed

  destroyed() {    clearInterval(this.timerId)    window.removeEventListener('resize', this.screenAdapter)  },

好了，完事

下面我把如何用WebSocket获取数据说一下

封装了一个WebSocket

export default class SocketService {    static instance = null  static get Instance() {    if (!this.instance) {      this.instance = new SocketService()    }    return this.instance  }  // 和服务端连接的socket对象  ws = null  // 存储回调函数  callBackMapping = {}  // 标识是否连接成功  connected = false  // 记录重试的次数  sendRetryCount = 0  // 重新连接尝试的次数  connectRetryCount = 0  //  定义连接服务器的方法  connect() {    // 连接服务器    if (!window.WebSocket) {      return console.log('您的浏览器不支持WebSocket')    }    this.ws = new WebSocket('ws://localhost:9998')    // 连接成功的事件    this.ws.onopen = () => {      console.log('连接服务端成功了')      this.connected = true      // 重置重新连接的次数      this.connectRetryCount = 0    }    // 1.连接服务端失败    // 2.当连接成功之后, 服务器关闭的情况    this.ws.onclose = () => {      console.log('连接服务端失败')      this.connected = false      this.connectRetryCount++      setTimeout(() => {        this.connect()      }, 500 * this.connectRetryCount)    }    // 得到服务端发送过来的数据    this.ws.onmessage = msg => {      console.log('从服务端获取到了数据')      // 真正服务端发送过来的原始数据时在msg中的data字段      // console.log(msg.data)      const recvData = JSON.parse(msg.data)      const socketType = recvData.socketType      // 判断回调函数是否存在      if (this.callBackMapping[socketType]) {        const action = recvData.action        if (action === 'getData') {          const realData = jsON.parse(recvData.data)          this.callBackMapping[socketType].call(this, realData)        } else if (action === 'fullScreen') {          this.callBackMapping[socketType].call(this, recvData)        } else if (action === 'themeChange') {          this.callBackMapping[socketType].call(this, recvData)        }      }    }  }  // 回调函数的注册  reGISterCallBack (socketType, callBack) {    this.callBackMapping[socketType] = callBack  }  // 取消某一个回调函数  unRegisterCallBack (socketType) {    this.callBackMapping[socketType] = null  }  // 发送数据的方法  send (data) {    // 判断此时此刻有没有连接成功    if (this.connected) {      this.sendRetryCount = 0      this.ws.send(JSON.stringify(data))    } else {      this.sendRetryCount++      setTimeout(() => {        this.send(data)      }, this.sendRetryCount * 500)    }  }}

在main.js中进行连接，挂载原型

//对服务端进行连接import SocketService from '../utils/socket_service'SocketService.Instance.connect()// 其他的组件  this.$socketVue.prototype.$socket = SocketService.Instance

然后在组件中

  created() {    //在组件创建完成之后进行回调函数注册    this.$socket.registerCallBack('trendData',this.getData)  },     mounted() {    this.initChart();    //发送数据给服务器，告诉服务器，我现在需要数据    this.$socket.send({      action:'getData',      socketType:'trendData',      chartName:'trend',      value:''    })    window.addEventListener("resize", this.screenAdapter);    this.screenAdapter();  },    destroyed() {    window.removeEventListener("resize", this.screenAdapter);    //取消    this.$socket.unRegisterCallBack('trendData')  },  methods:{  //res就是服务端发送给客户端的图表数据    getData(res) {      this.allData = res;      this.updateChart();    },    }

这样就实现了后端发生变化，前端即时更新视图

至于为什么WebSocket这样封装，因为后台定了规则

const path = require('path')const fileUtils = require('../utils/file_utils')const WebSocket = require('ws')// 创建WebSocket服务端的对象, 绑定的端口号是9998const wss = new WebSocket.Server({  port: 9998})// 服务端开启了监听module.exports.listen = () => {  // 对客户端的连接事件进行监听  // client:代表的是客户端的连接socket对象  wss.on('connection', client => {    console.log('有客户端连接成功了...')    // 对客户端的连接对象进行message事件的监听    // msg: 由客户端发给服务端的数据    client.on('message',async msg => {      console.log('客户端发送数据给服务端了: ' + msg)      let payload = JSON.parse(msg)      const action = payload.action      if (action === 'getData') {        let filePath = '../data/' + payload.chartName + '.json'        // payload.chartName // trend seller map rank hot stock        filePath = path.join(__dirname, filePath)        const ret = await fileUtils.getFileJsonData(filePath)        // 需要在服务端获取到数据的基础之上, 增加一个data的字段        // data所对应的值,就是某个json文件的内容        payload.data = ret        client.send(JSON.stringify(payload))      } else {        // 原封不动的将所接收到的数据转发给每一个处于连接状态的客户端        // wss.clients // 所有客户端的连接        wss.clients.forEach(client => {          client.send(msg)        })      }      // 由服务端往客户端发送数据      // client.send('hello socket from backend')    })  })}

到此，关于“Vue怎么使用Echarts实现横向柱状图并通过WebSocket即时通讯更新”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！