Loading... ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script> <style> @font-face { font-family: 'Neon Tubes 2'; src: url('https://pulsoid-magi.nyc3.cdn.digitaloceanspaces.com/widget-source/fonts/NeonTubes2.otf') } :root { --aie546b: #0090ffff; --a45ugyb: #ff2727ff; } .asery7b { animation: a3aaqnfb 4000ms ease-in infinite; } @-webkit-keyframes a3aaqnfb { 0%, 9% { fill: white; opacity: 1; } 10%, 12% { fill: var(--a45ugyb); opacity: 0.3; } 11%, 13% { fill: white; opacity: 1; } 100% { fill: white } } .aqyspphb { top: 140px; left: 90px; position: absolute; filter: drop-shadow(0 0 4px #FFF) drop-shadow(-1px -1px 3px var(--a45ugyb)) drop-shadow(-3px 0 8px var(--a45ugyb)) drop-shadow(0 0 15px var(--a45ugyb)); } #heart { top: 90px; left: 140px; z-index: 75px; position: absolute; color: rgb(194, 122, 122); font-size: 45px; font-family: "Neon Tubes 2"; text-shadow: 0 0 4px rgb(240, 136, 136), -12px -8px 10px var(--aie546b), 9px 10px 10px var(--aie546b), -1px -1px 5px var(--aie546b), 0 0 20px var(--aie546b), 0 0 40px var(--aie546b), 0 0 80px var(--aie546b), 0 0 28px #FFF, 0 0 8px #FFF; } #main { height: 250px; width: 280px; top: 0px; } </style> </head> <body> <div id="app"> <div id="main"></svg> <p id="heart" v-text="heartnum">123</p> </div> <svg class="aqyspphb" width="50px" viewBox="0 0 320 250"> <g transform="translate(0,300) scale(0.05,-0.05)" stroke="none"> <path class="asery7b" d="M1870 4966 c-870 -115 -1341 -1224 -802 -1888 425 -523 1404 -1674 1578 -1854 252 -263 465 -268 708 -18 90 92 881 1022 1066 1253 39 48 176 214 306 369 279 334 341 436 394 643 300 1174 -1093 1988 -1995 1166 -46 -42 -103 -77 -125 -77 -22 0 -79 35 -125 77 -298 271 -628 379 -1005 329z m374 -268 c159 -34 291 -104 442 -235 134 -117 270 -177 351 -156 18 5 57 15 87 21 30 7 116 67 190 133 625 556 1586 143 1586 -681 0 -364 -18 -390 -1367 -1978 -485 -571 -504 -584 -655 -448 -75 68 -554 615 -758 866 -49 61 -94 115 -100 120 -6 6 -51 60 -100 120 -49 61 -212 254 -361 430 -332 391 -370 446 -420 607 -212 685 399 1349 1105 1201z"> </path> </g> </svg> <p id="heart" v-text="heartnum">123</p> <!-- 卡片视图区域 --> <div ref="seller" style="height: 0; width: 0; background: rgb(255, 255, 255)" id="msg"></div> </div> <div> </body> <!-- import Vue before Element --> <script> var app = new Vue({ el: "#app", data: { xAxisList: [], yAxisList: [], heartnum: 0, }, mounted() { this.initWebSocket(); this.initChart(); this.updateChart(); }, methods: { // 初始化图表对象 initChart() { this.chart = echarts.init(document.getElementById("main")); }, // 更新图表 updateChart() { const option = { visualMap: [//颜色渐变 { show: false, type: 'continuous', seriesIndex: 0, min: 70, max: 120 } ], tooltip: { trigger: 'axis', axisPointer: { animation: false } }, xAxis: { type: "category", data: this.xAxisList, }, yAxis: { type: "value" }, series: [ { type: 'line', showSymbol: true, data: this.yAxisList }, { type: 'line', showSymbol: false, data: [120] } ], }; this.chart.setOption(option); }, initWebSocket() { //初始化websocket let wsuri = "ws://ramiel.pulsoid.net/listen/726fc089-3bab-4a3b-998d-efaac7ad2349"; this.ws = new WebSocket(wsuri); this.ws.onmessage = this.websocketonmessage; this.ws.onopen = this.websocketonopen; this.ws.onerror = this.websocketonerror; this.ws.onclose = this.websocketclose; this.yAxisList = []; this.yAxisList = []; }, websocketonopen() { console.log("连接 websocket 成功"); // 连接成功后发送消息给服务，避免服务收不到消息导致阻塞 this.ws.send("test"); }, websocketonmessage(e) { //获取websocket推送的数据 let msg = eval("(" + e.data + ")"); console.log(msg); if (this.yAxisList.length >= 20) { this.yAxisList.shift(); this.yAxisList.push(msg.data.heartRate); this.xAxisList.shift(); this.xAxisList.push(this.getdate(msg.timestamp)); } else { this.yAxisList.push(msg.data.heartRate); this.xAxisList.push(this.getdate(msg.timestamp)); } this.updateChart(); this.heartnum = msg.data.heartRate; // 每次接收到数据后发送消息给服务，避免服务收不到消息导致阻塞 this.ws.send("test"); // 判断不存在图表元素则断开连接 if (!document.getElementById("msg")) { this.websocketautoclose(); alert("服务已断开，请保持在图表页面"); } }, // 连接失败时重新连接 websocketonerror() { this.initWebSocket(); }, // 断开连接后报错 websocketclose(e) { console.log("断开连接", e); //this.initWebSocket() //断开后重新连接 }, // 主动断开连接 websocketautoclose() { this.ws.close(); }, getdate() { var now = new Date(), // y = now.getFullYear(), m = now.getMonth() + 1, d = now.getDate(); return ( // y + // "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8) ); }, }, }); </script> </html> ``` 最后修改：2022 年 11 月 24 日 © 允许规范转载 打赏 赞赏作者 赞 如果觉得我的文章对你有用，请随意赞赏