Vue.js+HighCharts實現(xiàn)動態(tài)請求展示時序數(shù)據(jù)
更新時間：2022年03月28日 10:38:18 作者：請叫我算術(shù)嘉
這篇文章主要為大家詳細介紹了Vue.js+HighCharts實現(xiàn)動態(tài)請求展示時序數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue.js+HighCharts實現(xiàn)動態(tài)請求展示時序數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下
<template>
? <el-container>
? ? <el-header>
? ? ? <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="handleSelect">
? ? ? ? <el-menu-item index="1"><router-link :to="{path: '/yun/index' }">首頁</router-link></el-menu-item>
? ? ? ? <el-menu-item index="2"><router-link :to="{path: '/yun/list' }">服務(wù)器列表</router-link></el-menu-item>
? ? ? ? <el-menu-item index="3">控制臺</el-menu-item>
? ? ? ? <el-menu-item index="4">消息中心</el-menu-item>
? ? ? ? <el-menu-item index="5"><router-link :to="{path: '/yun/about' }">關(guān)于我們</router-link></el-menu-item>
? ? ? ? <el-menu-item @click="toLogin()" v-if="userName === ''">登錄</el-menu-item>
? ? ? ? <el-menu-item>
? ? ? ? <el-dropdown>
? ? ? ? ? <span class="el-dropdown-link" v-if="userName !== ''">
? ? ? ? ? ? {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
? ? ? ? ? </span>
? ? ? ? ? <el-dropdown-menu slot="dropdown" v-if="userName!==''">
<!-- ? ? ? ? ? ?<el-dropdown-item>登錄</el-dropdown-item>-->
? ? ? ? ? ? <el-dropdown-item @click.native="toLogout">退出</el-dropdown-item>
? ? ? ? ? </el-dropdown-menu>
? ? ? ? </el-dropdown>
? ? ? ? </el-menu-item>
? ? ? </el-menu>
? ? </el-header>
? ? <el-container ?style="height: 620px; border: 1px solid #eee">
? ? ? <el-aside width="200px">
? ? ? ? <el-menu
? ? ? ? ? default-active="1"
? ? ? ? ? class="el-menu-vertical-demo"
? ? ? ? ? @open="handleOpen"
? ? ? ? ? @close="handleClose">
? ? ? ? ? <el-submenu index="1">
? ? ? ? ? ? <template slot="title">
? ? ? ? ? ? ? <i class="el-icon-location"></i>
? ? ? ? ? ? ? <span>服務(wù)器列表</span>
? ? ? ? ? ? </template>
? ? ? ? ? ? <el-menu-item-group>
? ? ? ? ? ? ? <template slot="title">分組一</template>
? ? ? ? ? ? ? <el-menu-item index="1-1">選項1</el-menu-item>
? ? ? ? ? ? ? <el-menu-item index="1-2">選項2</el-menu-item>
? ? ? ? ? ? </el-menu-item-group>
? ? ? ? ? ? <el-menu-item-group title="分組2">
? ? ? ? ? ? ? <el-menu-item index="1-3">選項3</el-menu-item>
? ? ? ? ? ? </el-menu-item-group>
? ? ? ? ? ? <el-submenu index="1-4">
? ? ? ? ? ? ? <template slot="title">選項4</template>
? ? ? ? ? ? ? <el-menu-item index="1-4-1">選項1</el-menu-item>
? ? ? ? ? ? </el-submenu>
? ? ? ? ? </el-submenu>
? ? ? ? ? <el-menu-item index="2">
? ? ? ? ? ? <i class="el-icon-menu"></i>
? ? ? ? ? ? <span slot="title">導航二</span>
? ? ? ? ? </el-menu-item>
? ? ? ? ? <el-menu-item index="3" disabled>
? ? ? ? ? ? <i class="el-icon-document"></i>
? ? ? ? ? ? <span slot="title">導航三</span>
? ? ? ? ? </el-menu-item>
? ? ? ? ? <el-menu-item index="4">
? ? ? ? ? ? <i class="el-icon-setting"></i>
? ? ? ? ? ? <span slot="title">導航四</span>
? ? ? ? ? </el-menu-item>
? ? ? ? </el-menu>
? ? ? </el-aside>
? ? ? <el-container>
? ? ? ? <el-main>
? ? ? ? ? <div class="x-bar">
? ? ? ? ? ? <div :id="id" :option="option"></div>
? ? ? ? ? </div>
? ? ? ? </el-main>
<!-- ? ? ? ?<el-footer>-->
?
<!-- ? ? ? ?</el-footer>-->
? ? ? </el-container>
? ? </el-container>
? </el-container>
</template><script>
? ? import { mapMutations } from 'vuex';
? ? import Vuex from 'vuex' //引入 Vuex
? ? import store from '../store'
? ? import HighCharts from 'highcharts'
? ? export default {
? ? ? ? name: "YunMonitorServerv",
? ? ? ? data() {
? ? ? ? ? return {
? ? ? ? ? ? userName: "",
? ? ? ? ? ? activeIndex: '1',
? ? ? ? ? ? arr: [],
? ? ? ? ? ? chartData: [],
? ? ? ? ? ? username: this.$route.query.data,
? ? ? ? ? ? idForm: {
? ? ? ? ? ? ? id: "1"
? ? ? ? ? ? },
? ? ? ? ? ? id: 'testtt',
? ? ? ? ? ? option: {
? ? ? ? ? ? ? chart: {
? ? ? ? ? ? ? ? zoomType: 'x'
? ? ? ? ? ? ? },
? ? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? text: 'cpu.0.percent.active'//表頭文字
? ? ? ? ? ? ? },
? ? ? ? ? ? ? subtitle: {
? ? ? ? ? ? ? ? text: document.ontouchstart === undefined ?
? ? ? ? ? ? ? ? ? '鼠標拖動可以進行縮放' : '手勢操作進行縮放'
? ? ? ? ? ? ? },
? ? ? ? ? ? ? xAxis: {
? ? ? ? ? ? ? ? type: 'datetime',
? ? ? ? ? ? ? ? dateTimeLabelFormats: {
? ? ? ? ? ? ? ? ? millisecond: '%H:%M:%S.%L',
? ? ? ? ? ? ? ? ? second: '%H:%M:%S',
? ? ? ? ? ? ? ? ? minute: '%H:%M',
? ? ? ? ? ? ? ? ? hour: '%H:%M',
? ? ? ? ? ? ? ? ? day: '%m-%d',
? ? ? ? ? ? ? ? ? week: '%m-%d',
? ? ? ? ? ? ? ? ? month: '%Y-%m',
? ? ? ? ? ? ? ? ? year: '%Y'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? tooltip: {
? ? ? ? ? ? ? ? dateTimeLabelFormats: {
? ? ? ? ? ? ? ? ? millisecond: '%H:%M:%S.%L',
? ? ? ? ? ? ? ? ? second: '%H:%M:%S',
? ? ? ? ? ? ? ? ? minute: '%H:%M',
? ? ? ? ? ? ? ? ? hour: '%H:%M',
? ? ? ? ? ? ? ? ? day: '%Y-%m-%d',
? ? ? ? ? ? ? ? ? week: '%m-%d',
? ? ? ? ? ? ? ? ? month: '%Y-%m',
? ? ? ? ? ? ? ? ? year: '%Y'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? yAxis: {
? ? ? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? ? text: '使用率'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? legend: {
? ? ? ? ? ? ? ? enabled: false
? ? ? ? ? ? ? },
? ? ? ? ? ? ? plotOptions: {
? ? ? ? ? ? ? ? area: {
? ? ? ? ? ? ? ? ? fillColor: {
? ? ? ? ? ? ? ? ? ? linearGradient: {
? ? ? ? ? ? ? ? ? ? ? x1: 0,
? ? ? ? ? ? ? ? ? ? ? y1: 0,
? ? ? ? ? ? ? ? ? ? ? x2: 0,
? ? ? ? ? ? ? ? ? ? ? y2: 1
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? stops: [
? ? ? ? ? ? ? ? ? ? ? [0, HighCharts.getOptions().colors[0]],
? ? ? ? ? ? ? ? ? ? ? [1, HighCharts.Color(HighCharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? marker: {
? ? ? ? ? ? ? ? ? ? radius: 2
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? lineWidth: 1,
? ? ? ? ? ? ? ? ? states: {
? ? ? ? ? ? ? ? ? ? hover: {
? ? ? ? ? ? ? ? ? ? ? lineWidth: 1
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? threshold: null
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? series: [{
? ? ? ? ? ? ? ? type: 'area',
? ? ? ? ? ? ? ? name: '使用率',
? ? ? ? ? ? ? ? data: [
?
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? }]
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? created() {
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? this.showCharts();
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ...mapMutations(['changeLogin']),
? ? ? ? ? toLogout() {
? ? ? ? ? ? localStorage.removeItem('Authorization');
? ? ? ? ? ? localStorage.removeItem('Username');
? ? ? ? ? ? this.$router.push(
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? path: "/yun/login",
? ? ? ? ? ? ? }
? ? ? ? ? ? )
? ? ? ? ? },
? ? ? ? ? toLogin() {
? ? ? ? ? ? this.$router.push(
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? path: "/yun/login",
? ? ? ? ? ? ? }
? ? ? ? ? ? )
? ? ? ? ? },
? ? ? ? ? showCharts() {
? ? ? ? ? ? this.flag = true
? ? ? ? ? ? this.$http.get('http://localhost:8088/monitor/query/lidata-DL/cpu.0.percent.active/1600672572/1600672629',{
? ? ? ? ? ? ? _timeout:5000,
? ? ? ? ? ? ? onTimeout :(request) => {
? ? ? ? ? ? ? ? this.$message.error('請求超時');
? ? ? ? ? ? ? ? this.loading = false
? ? ? ? ? ? ? }
? ? ? ? ? ? }).then((response) => {
? ? ? ? ? ? ? var res = JSON.parse(response.bodyText);
? ? ? ? ? ? ? this.loading = false;
? ? ? ? ? ? ? this.records = res.records;
? ? ? ? ? ? ? var arr = res.records;
? ? ? ? ? ? ? for(var i = 0;i < arr.length;i++){
? ? ? ? ? ? ? ? ?this.chartData.push(arr[i]);
? ? ? ? ? ? ? }
? ? ? ? ? ? ? var oSeries = {
? ? ? ? ? ? ? ? ? type: 'area',
? ? ? ? ? ? ? ? ? name: '功率',
? ? ? ? ? ? ? ? ? data: this.chartData
? ? ? ? ? ? ? };
? ? ? ? ? ? ? HighCharts.chart(this.id,this.option).addSeries(oSeries);
? ? ? ? ? ? })
? ? ? ? ? },
? ? ? ? ? toVmDetail(url){
? ? ? ? ? ? window.open(url)
? ? ? ? ? },
? ? ? ? ? handleSelect(key, keyPath) {
? ? ? ? ? ? console.log(key, keyPath);
? ? ? ? ? },
? ? ? ? ? handleOpen(key, keyPath) {
? ? ? ? ? ? console.log(key, keyPath);
? ? ? ? ? },
? ? ? ? ? handleClose(key, keyPath) {
? ? ? ? ? ? console.log(key, keyPath);
? ? ? ? ? },
? ? ? ? }
? ? }
</script>原本要求的數(shù)據(jù)格式是二維數(shù)組
series: [{
? ? type: 'area',
? ? name: 'area',
? ? data: [
? ? ? ? [1370131200000, 0.7695],
? ? ? ? [1370217600000, 0.7648]
? ? ]
}]然后get請求的數(shù)據(jù)返回的時候直接返回二維數(shù)組就行了
需要注意的就是二維數(shù)組的更新方式
有的時候，當我們手動對data中的數(shù)據(jù)修改時，vue卻監(jiān)聽不到這些數(shù)據(jù)的變化，導致頁面沒有觸發(fā)新一輪的更新。
注意：出現(xiàn)以上問題的原因在于，沒有通過vue提供的方法對保存在data中的數(shù)據(jù)進行修改。強制性通過js對數(shù)據(jù)修改的那些方法，有一部分在vue中是不被認可的。
對于數(shù)組的更新，一種可以使用
- pop 刪除末項
- push 添加一項
- shift 刪除第一項
- unshift 添加第一項
- splice 截取/修改/刪除數(shù)組元素
- sort 對數(shù)組排序
- reverse 取反
另一種則可以通過set方法（）
this.set 這是vue實例調(diào)用 set 這是vue實例調(diào)用set這是vue實例調(diào)用set()方法，專門用來修改數(shù)組的
第一個參數(shù)，已經(jīng)存在data中的數(shù)據(jù)，要被修改的數(shù)組
第二個參數(shù)，要修改的數(shù)組下標
第三個參數(shù)，要修改的數(shù)組對應(yīng)下標的值
this.$set (this.selectedarr, index, option)
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue-cli中post請求發(fā)送Json格式數(shù)據(jù)方式
- vue本地模擬服務(wù)器請求mock數(shù)據(jù)的方法詳解
- vue異步請求數(shù)據(jù)重新渲染方式
- VUE前端從后臺請求過來的數(shù)據(jù)進行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
- 淺談vue中g(shù)et請求解決傳輸數(shù)據(jù)是數(shù)組格式的問題
- vue項目中axios的封裝請求
- vue3實戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量
- Vue3中使用typescript封裝axios的實例詳解
- vue中數(shù)據(jù)請求axios的封裝和使用
相關(guān)文章
uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能
微信小程序的存在許多功能上的限制和約束,有些情況不得不去使用webview進行開發(fā)實現(xiàn)需求,這篇文章主要給大家介紹了關(guān)于uniapp?vue3中使用webview在微信小程序?qū)崿F(xiàn)雙向通訊功能的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了在Vue3里使用scss實現(xiàn)簡單的換膚功能,主題色切換、亮色模式和暗黑模式切換、背景圖切換,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-12-12
本文主要主要講述對threejs的一些api進行基本的封裝，在vue3項目中來實現(xiàn)一個可視化的3d項目，包含了一些常用的功能，場景、燈光、攝像機初始化，模型、天空盒的加載，以及鼠標點擊和懸浮的事件交互,感興趣的朋友可以參考下2023-06-06
vue3中element-plus表格搜索過濾數(shù)據(jù)
本文主要介紹了vue3中element-plus表格搜索過濾數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-03-03
Vue項目中使用better-scroll實現(xiàn)菜單映射功能方法
這篇文章主要介紹了Vue項目中使用better-scroll實現(xiàn)菜單映射功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue如何清除瀏覽器歷史棧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中的slot封裝組件彈窗，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Vite配置優(yōu)雅的code?spliiting代碼分割詳解
這篇文章主要為大家介紹了Vite配置優(yōu)雅的code?spliiting代碼分割詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue導出頁面為PDF格式的實現(xiàn)思路，其實思路也很簡單，就是將頁面轉(zhuǎn)換成圖片格式.然后通過圖片的base64碼.生成PDF..感興趣的朋友跟隨腳本之家小編一起看看吧2018-07-07