這篇文章主要介紹“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
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.$socket Vue.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服務端的對象, 綁定的端口號是9998
const 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即時通訊更新”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
