Vue中Echarts实现横向柱状图,并且通过WebSocket即时通讯更新

先看下效果图&＃xff0c;并且数据每隔3秒自动变换一次

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

[{"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"}
]


好了&＃xff0c;开始实现前端的代码

html

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


getData方法

这里还是用http请求获取的数据&＃xff0c;后面我再讲怎么用WebSocket获取我们的数据

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


updateChart方法

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


startInterval方法

//定时器&＃xff0c;数据每3秒更新一次startInterval() {if (this.timerId) {clearInterval(this.timerId)}this.timerId &＃61; setInterval(() &＃61;> {this.currentPage&＃43;&＃43;if (this.currentPage > this.totalPage) {this.currentPage &＃61; 1}this.updateChart()}, 3000)},


screenAdapter方法

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


mounted

mounted() {this.initChart()this.getData()window.addEventListener(&＃39;resize&＃39;, this.screenAdapter)this.screenAdapter()},


destroyed

destroyed() {clearInterval(this.timerId)window.removeEventListener(&＃39;resize&＃39;, this.screenAdapter)},


好了&＃xff0c;完事&＃xff0c;下面我把如何用WebSocket获取数据说一下

封装了一个WebSocket

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


在main.js中进行连接&＃xff0c;挂载原型

//对服务端进行连接
import SocketService from &＃39;../utils/socket_service&＃39;
SocketService.Instance.connect()
// 其他的组件 this.$socket
Vue.prototype.$socket &＃61; SocketService.Instance


然后在组件中

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


这样就实现了后端发生变化&＃xff0c;前端即时更新视图

至于为什么WebSocket这样封装&＃xff0c;因为后台定了规则

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


有不懂的可以去我的github查看源代码&＃xff0c;前后端都有&＃xff0c;后端必须启动&＃xff0c;前端才有显示&＃xff0c;WebSocket我只配了Trend组件&＃xff0c;其他全部一样的操作

github项目地址https://github.com/lsh555/Echarts

项目详情如下