Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)
更新時(shí)間：2022年03月28日 10:38:18 作者：請(qǐng)叫我算術(shù)嘉
這篇文章主要為大家詳細(xì)介紹了Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue.js+HighCharts實(shí)現(xiàn)動(dòng)態(tài)請(qǐng)求展示時(shí)序數(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' }">首頁(yè)</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">控制臺(tái)</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">選項(xiàng)1</el-menu-item>
? ? ? ? ? ? ? <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
? ? ? ? ? ? </el-menu-item-group>
? ? ? ? ? ? <el-menu-item-group title="分組2">
? ? ? ? ? ? ? <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
? ? ? ? ? ? </el-menu-item-group>
? ? ? ? ? ? <el-submenu index="1-4">
? ? ? ? ? ? ? <template slot="title">選項(xiàng)4</template>
? ? ? ? ? ? ? <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
? ? ? ? ? ? </el-submenu>
? ? ? ? ? </el-submenu>
? ? ? ? ? <el-menu-item index="2">
? ? ? ? ? ? <i class="el-icon-menu"></i>
? ? ? ? ? ? <span slot="title">導(dǎo)航二</span>
? ? ? ? ? </el-menu-item>
? ? ? ? ? <el-menu-item index="3" disabled>
? ? ? ? ? ? <i class="el-icon-document"></i>
? ? ? ? ? ? <span slot="title">導(dǎo)航三</span>
? ? ? ? ? </el-menu-item>
? ? ? ? ? <el-menu-item index="4">
? ? ? ? ? ? <i class="el-icon-setting"></i>
? ? ? ? ? ? <span slot="title">導(dǎo)航四</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 ?
? ? ? ? ? ? ? ? ? '鼠標(biāo)拖動(dòng)可以進(jìn)行縮放' : '手勢(shì)操作進(jìn)行縮放'
? ? ? ? ? ? ? },
? ? ? ? ? ? ? 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('請(qǐng)求超時(shí)');
? ? ? ? ? ? ? ? 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請(qǐng)求的數(shù)據(jù)返回的時(shí)候直接返回二維數(shù)組就行了
需要注意的就是二維數(shù)組的更新方式
有的時(shí)候，當(dāng)我們手動(dòng)對(duì)data中的數(shù)據(jù)修改時(shí)，vue卻監(jiān)聽(tīng)不到這些數(shù)據(jù)的變化，導(dǎo)致頁(yè)面沒(méi)有觸發(fā)新一輪的更新。
注意：出現(xiàn)以上問(wèn)題的原因在于，沒(méi)有通過(guò)vue提供的方法對(duì)保存在data中的數(shù)據(jù)進(jìn)行修改。強(qiáng)制性通過(guò)js對(duì)數(shù)據(jù)修改的那些方法，有一部分在vue中是不被認(rèn)可的。
對(duì)于數(shù)組的更新，一種可以使用
- pop 刪除末項(xiàng)
- push 添加一項(xiàng)
- shift 刪除第一項(xiàng)
- unshift 添加第一項(xiàng)
- splice 截取/修改/刪除數(shù)組元素
- sort 對(duì)數(shù)組排序
- reverse 取反
另一種則可以通過(guò)set方法（）
this.set 這是vue實(shí)例調(diào)用 set 這是vue實(shí)例調(diào)用set這是vue實(shí)例調(diào)用set()方法，專門用來(lái)修改數(shù)組的
第一個(gè)參數(shù)，已經(jīng)存在data中的數(shù)據(jù)，要被修改的數(shù)組
第二個(gè)參數(shù)，要修改的數(shù)組下標(biāo)
第三個(gè)參數(shù)，要修改的數(shù)組對(duì)應(yīng)下標(biāo)的值
this.$set (this.selectedarr, index, option)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue-cli中post請(qǐng)求發(fā)送Json格式數(shù)據(jù)方式
- vue本地模擬服務(wù)器請(qǐng)求mock數(shù)據(jù)的方法詳解
- vue異步請(qǐng)求數(shù)據(jù)重新渲染方式
- VUE前端從后臺(tái)請(qǐng)求過(guò)來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
- 淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題
- vue項(xiàng)目中axios的封裝請(qǐng)求
- vue3實(shí)戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量
- Vue3中使用typescript封裝axios的實(shí)例詳解
- vue中數(shù)據(jù)請(qǐng)求axios的封裝和使用
相關(guān)文章
解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問(wèn)題
今天小編就為大家分享一篇解決Vue中引入swiper,在數(shù)據(jù)渲染的時(shí)候,發(fā)生不滑動(dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue動(dòng)態(tài)加載圖片在跨域時(shí)無(wú)法顯示的問(wèn)題及解決方法
這篇文章主要介紹了解決VUE動(dòng)態(tài)加載圖片在跨域時(shí)無(wú)法顯示的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Vue和Bootstrap的整合思路詳解,需要的朋友可以參考下2017-06-06
vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能，本文通過(guò)提問(wèn)兩個(gè)問(wèn)題帶領(lǐng)大家一起學(xué)習(xí)整個(gè)過(guò)程,需要的朋友可以參考下2018-06-06
vue頁(yè)面使用阿里oss上傳功能的實(shí)例（一）
本篇文章主要介紹了vue頁(yè)面使用阿里oss上傳功能的實(shí)例（一），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了vue異步加載dom元素之后無(wú)法獲得的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vue3+NodeJS+Soket.io實(shí)現(xiàn)實(shí)時(shí)聊天的示例代碼
本文主要介紹了Vue3+NodeJS+Soket.io實(shí)現(xiàn)實(shí)時(shí)聊天的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
詳解Vue如何進(jìn)行分布式事務(wù)管理以及解決方案
在分布式系統(tǒng)中，事務(wù)管理是一個(gè)非常重要的問(wèn)題，所以本文將介紹一下Vue中如何進(jìn)行分布式事務(wù)管理以及分布式事務(wù)解決方案，希望對(duì)大家有所幫助2023-06-06
antd Form組件方法getFieldsValue獲取自定義組件的值操作
這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10