vue中實(shí)現(xiàn)當(dāng)前時(shí)間echarts圖表時(shí)間軸動(dòng)態(tài)的數(shù)據(jù)(實(shí)例代碼)
代碼如下所示:
<!-- ! 廢話不多說(shuō),直接看代碼吧 ! --> <template> <div class=""> <div class="chart" ref="ref_chart" style="width:370px;height:250px;"> </div> </div> </template> <script lang="js"> export default { data() { return { syca_myChart: null, // 圖表 interval: null, //定時(shí)器 x_tm: null, //獲取時(shí)間x軸的顯示時(shí)間 inTime: '', //當(dāng)前的時(shí)間 A_data: [3, 5, 2, 3, 4,], // 電流數(shù)據(jù) V_data: [200, 201, 204, 202, 201, 334], // 電壓 }; }, computed: {}, components: {}, mounted() { this.x_time(); //先獲取x軸的一組時(shí)間 this.initChart(); //初始化dom元素 this.updateChart(); //設(shè)置配置進(jìn)行渲染為圖表 this.getNewTime(); //更新時(shí)間 }, methods: { // 獲取 x軸 一組時(shí)間值 x_time() { let now = new Date(); let res = []; for (let i = 0; i < 7; i++) { res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); now = new Date(+now - 3000); // 時(shí)間間隔 } this.x_tm = res; }, //初始化對(duì)象 initChart() { this.syca_myChart = this.$echarts.init(this.$refs.ref_chart, "macarons"); }, //請(qǐng)求數(shù)據(jù) get_data() { // 在此處進(jìn)行通過(guò)websoket進(jìn)行數(shù)據(jù)交互代碼 略... }, //更新數(shù)據(jù) updateChart() { let option = { title: { show: true, text: "電流/電壓", //標(biāo)題 top: 2, left: 2, textStyle: { }, // subtext: ' - 折線圖', //二級(jí)標(biāo)題 subtextStyle: { // lineHeghit: 6 }, }, legend: { data: ['電流', "電壓"], top: 4, }, toolbox: { show: true, // 是否顯示工具 itemSize: 11, itemGap: 6, //間隔大小 // right: 25, feature: { saveAsImage: { //保存為圖片 type: "jpg", backgroundColor: "#00274b" }, dataView: { // 數(shù)據(jù)視圖 show: true, readOnly: true, // 是否可以讀寫 // backgroundColor: "#00274b" }, restore: { // 還原 }, } }, xAxis: { type: 'category', data: this.x_tm, // name: "時(shí)間", // nameLocation: "end" // boundaryGap: false // 緊挨邊緣 axisLabel: { fontSize: 11, formatter: '{value}', // y軸的顯示數(shù)據(jù)單位 rotate: -20,//刻度偏移 }, }, yAxis: [ { type: 'value', scale: true, //是否是脫離 0 值比例 // name: " 單位V", axisLabel: { fontSize: 11, formatter: '{value} V', // y軸的顯示數(shù)據(jù)單位 rotate: 20,//刻度偏移 }, minInterval: 1 }, ], grid: { top: '20%', right: '8%', left: '12%', bottom: '14%', }, tooltip: { //圖標(biāo)劃過(guò)顯示 show: true, trigger: 'axis', axisPointer: { // type: 'cross', //十字提示指示線 // type: 'line', // lineStyle: { type: 'dashed', //線的類型 虛線 // snap: true, // 劃過(guò)吸附指示線 } }, //懸浮窗的內(nèi)容 // a: 系列名,b: (x軸)類目值, c: 數(shù)據(jù)值 // formatter: `<br>{a}: {c} PM `, // background: "red",//懸浮窗的背景色 // borderColor: '',//邊框色 borderWidth: 3,//邊框?qū)? // padding: '', //內(nèi)邊距 alwaysShowContent: false, //懸浮窗是否一直顯示 hideDelay: 1000, //劃入時(shí)懸浮多少秒 enterable: true, //劃入正常顯示 textStyle: { //懸浮框的樣式 color: '#fff', fontSize: 14, } }, series: [ { name: '電流', data: this.A_data, type: 'line', smooth: true, // 折線圖的線條是否平滑 areaStyle: {}, // 背景填充 // stack: "all", // 多組數(shù)據(jù)堆疊 label: { show: true, //數(shù)據(jù)標(biāo)簽顯示 position: 'top', //數(shù)據(jù)顯示位置 distance: 8, // 距離 offset: [-2, -2], //文字偏移 formatter: "{c}", //標(biāo)簽內(nèi)容 }, }, { name: '電壓', data: this.V_data, type: 'line', // line 折線 bar 柱狀 smooth: true, // 折線圖的線條是否平滑 areaStyle: {}, // 背景填充 // stack: "all", // 多組數(shù)據(jù)堆疊 label: { show: true, //數(shù)據(jù)標(biāo)簽顯示 position: 'top' }, } ] } //進(jìn)行渲染圖表 this.syca_myChart.setOption(option); }, // 更新時(shí)間 getNewTime() { clearInterval(this.interval); // 開(kāi)啟定時(shí)器之前先清上次的 this.interval = setInterval(() => { this.inTime = new Date().toLocaleTimeString(); this.x_tm.push(this.inTime); if (this.x_tm.length > 5) { this.x_tm.shift(); } this.updateChart(); }, 3000) }, }, watch: {}, destroyed() { clearInterval(this.interval); }, }; </script> <style scoped lang='less'> </style>
效果圖展示:
到此這篇關(guān)于vue中實(shí)現(xiàn)當(dāng)前時(shí)間echarts圖表時(shí)間軸動(dòng)態(tài)的數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue echarts圖表時(shí)間軸動(dòng)態(tài)數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間
- vue怎樣獲取當(dāng)前時(shí)間,并且傳遞給后端(不用注解)
- vue 使用moment獲取當(dāng)前時(shí)間及一月前的時(shí)間
- Vue 中如何利用 new Date() 獲取當(dāng)前時(shí)間
- 基于vue實(shí)現(xiàn)8小時(shí)帶刻度的時(shí)間軸根據(jù)當(dāng)前時(shí)間實(shí)時(shí)定位功能
- Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)
- Vue 中獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新的實(shí)現(xiàn)代碼
- Vue filter 過(guò)濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果
- vue 2.1.3 實(shí)時(shí)顯示當(dāng)前時(shí)間,每秒更新的方法
- element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式
- Vue3新增時(shí)自動(dòng)獲取當(dāng)前時(shí)間的操作方法
相關(guān)文章
vue+element-ui中form輸入框無(wú)法輸入問(wèn)題的解決方法
很多初次接觸element-ui的同學(xué),在用到element form組件時(shí)可能會(huì)遇到input框無(wú)法輸入文字的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue+element-ui中form輸入框無(wú)法輸入問(wèn)題的解決方法,需要的朋友可以參考下2023-04-04關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05el-date-picker設(shè)置日期默認(rèn)值兩種方法(當(dāng)月月初至月末)
這篇文章主要給大家介紹了關(guān)于el-date-picker設(shè)置日期默認(rèn)值(當(dāng)月月初至月末)的相關(guān)資料,文中通過(guò)代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08vue.js項(xiàng)目 el-input 組件 監(jiān)聽(tīng)回車鍵實(shí)現(xiàn)搜索功能示例
今天小編就為大家分享一篇vue.js項(xiàng)目 el-input 組件 監(jiān)聽(tīng)回車鍵實(shí)現(xiàn)搜索功能示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue實(shí)現(xiàn)在data里引入相對(duì)路徑
這篇文章主要介紹了vue實(shí)現(xiàn)在data里引入相對(duì)路徑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的全過(guò)程
vue.js是現(xiàn)在流行的js框架之一,vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式j(luò)avascript框架,這篇文章主要給大家介紹了關(guān)于vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的相關(guān)資料,需要的朋友可以參考下2021-05-05Vue JS對(duì)URL網(wǎng)址進(jìn)行編碼解碼,轉(zhuǎn)換為對(duì)象方式
這篇文章主要介紹了Vue JS對(duì)URL網(wǎng)址進(jìn)行編碼解碼,轉(zhuǎn)換為對(duì)象方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03