Vue 中使用vue2-highcharts實(shí)現(xiàn)曲線數(shù)據(jù)展示的方法
1、要實(shí)現(xiàn)的效果如下圖:
2、vue前端頁(yè)面如下:
<template> <div> <div> <div> <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/> <span >歷史曲線</span> </div> </div> <div > <div > <span >{{$route.params.monitorName}}({{$route.params.meterId}})</span> </div> </div> <div > <div > <yesterdaypicker v-on:startPicked="startPicked" style="margin-left:10px;"></yesterdaypicker> </div> <div > <daypicker v-on:endPicked="endPicked" style="margin-left:10px;"></daypicker> </div> </div> <div > <div > <vchooser :selections="periodList" @on-change="onParamChange('versions', $event)"></vchooser> </div> </div> <div > <div class="charts" > <vue-highcharts :options="options" ref="lineCharts" ></vue-highcharts> </div> </div> </div> </template> <script> import vchooser from '../components/chooser.vue' import VueHighcharts from 'vue2-highcharts' import daypicker from '../components/daypicker.vue' import yesterdaypicker from '../components/yesterdaypicker.vue' export default { data() { return{ startDay:'', endDay:'', setIntervalNum:0, itemStatus:0, itemTitle:'功率因數(shù)', itemType:this.$route.params.meterType, periodList:[ { label: '功率因數(shù)', value: 0 }, { label: '電流', value: 1 },{ label: '電壓', value: 2 },{ label: '有功功率', value: 3 },{ label: '無(wú)功功率', value: 4 }/*,{ label: '視在功率', value: 5 }*/,{ label: '有功電量', value: 6 }, ], ownerFreeData: [], options: { global: { useUTC: false }, chart: { type: 'spline' }, title: { text: '功率因素' //text: ' ' }, subtitle: { text: '' }, xAxis: { type: 'category' }, yAxis: { title: { text: '功率因素(%)' //text: ' ' }, labels: { formatter: function () { return this.value; } } }, tooltip: { crosshairs: true, shared: true }, credits: { enabled: false }, plotOptions: { spline: { marker: { radius: 4, lineColor: '#666666', lineWidth: 1 } } }, series: [] } } }, methods: { startPicked(year, month, date) { //this.ownerFreeData = [] if(this.$refs.lineCharts != null){ this.$refs.lineCharts.removeSeries(); } var monthStr = ''; var dayStr = ''; if(month < 10){ monthStr = `0${month}`; }else{ monthStr = `${month}`; } if(date < 10){ dayStr = `0${date}`; }else{ dayStr = `${date}`; } this.startDay = `${year}-` + monthStr + '-' + dayStr; if(this.$refs.lineCharts != null){ this.getList(); } }, endPicked(year, month, date) { //this.ownerFreeData = [] if(this.$refs.lineCharts != null){ this.$refs.lineCharts.removeSeries(); } var monthStr = ''; var dayStr = ''; if(month < 10){ monthStr = `0${month}`; }else{ monthStr = `${month}`; } if(date < 10){ dayStr = `0${date}`; }else{ dayStr = `${date}`; } this.endDay = `${year}-` + monthStr + '-' + dayStr; if(this.$refs.lineCharts != null){ this.getList(); } }, onParamChange (attr, val) { this.itemStatus = val.value; if(this.$refs.lineCharts != null){ this.$refs.lineCharts.removeSeries(); } if(this.$refs.lineCharts != null){ this.getList(); } }, routerBack(){ //let lineCharts = this.$refs.lineCharts; //lineCharts.getChart().destroy(); //this.$router.go(-1); var mid = this.$route.params.id; var mname = this.$route.params.name; var mpname = this.$route.params.pname; this.$router.push({name: 'timeSortPoint', params: {id: mid,name:mname,pname:mpname}}); }, setType(){ var title = ''; let lineCharts = this.$refs.lineCharts; if(this.itemStatus == 0){ title = '功率因素'; lineCharts.getChart().title.update({ text: '功率因素' }); lineCharts.getChart().yAxis[0].setTitle({text:'功率因素(%)'}); if(this.itemType == 0){ lineCharts.addSeries({name: this.startDay + ' 功率因素',data: []}); lineCharts.addSeries({name: this.endDay + ' 功率因素',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: this.startDay + ' 總功率因素',data: []}); lineCharts.addSeries({name: this.startDay + ' A相功率因素',data: []}); lineCharts.addSeries({name: this.startDay + ' B相功率因素',data: []}); lineCharts.addSeries({name: this.startDay + ' C相功率因素',data: []}); lineCharts.addSeries({name: this.endDay + ' 總功率因素',data: []}); lineCharts.addSeries({name: this.endDay + ' A相功率因素',data: []}); lineCharts.addSeries({name: this.endDay + ' B相功率因素',data: []}); lineCharts.addSeries({name: this.endDay + ' C相功率因素',data: []}); } }else if(this.itemStatus == 1){ title = '電流'; lineCharts.getChart().title.update({ text: '電流' }); lineCharts.getChart().yAxis[0].setTitle({text:'電流(A)'}); if(this.itemType == 0){ lineCharts.addSeries({name: this.startDay + ' 電流',data: []}); lineCharts.addSeries({name: this.endDay + '電流',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: this.startDay + ' Ia 相電流',data: []}); lineCharts.addSeries({name: this.startDay + ' Ib 相電流',data: []}); lineCharts.addSeries({name: this.startDay + ' Ic 相電流',data: []}); lineCharts.addSeries({name: this.startDay + ' 零序電流',data: []}); lineCharts.addSeries({name: this.endDay + ' Ia 相電流',data: []}); lineCharts.addSeries({name: this.endDay + ' Ib 相電流',data: []}); lineCharts.addSeries({name: this.endDay + ' Ic 相電流',data: []}); lineCharts.addSeries({name: this.endDay + ' 零序電流',data: []}); } }else if(this.itemStatus == 2){ title = '電壓'; lineCharts.getChart().title.update({ text: '電壓' }); lineCharts.getChart().yAxis[0].setTitle({text:'電壓(V)'}); if(this.itemType == 0){ lineCharts.addSeries({name: this.startDay + ' 電壓',data: []}); lineCharts.addSeries({name: this.endDay + ' 電壓',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: this.startDay + ' A相電壓',data: []}); lineCharts.addSeries({name: this.startDay + ' B相電壓',data: []}); lineCharts.addSeries({name: this.startDay + ' C相電壓',data: []}); lineCharts.addSeries({name: this.endDay + ' A相電壓',data: []}); lineCharts.addSeries({name: this.endDay + ' B相電壓',data: []}); lineCharts.addSeries({name: this.endDay + ' C相電壓',data: []}); } }else if(this.itemStatus == 3){ title = '有功功率'; lineCharts.getChart().title.update({ text: '有功功率' }); lineCharts.getChart().yAxis[0].setTitle({text:'有功功率(KVA)'}); if(this.itemType == 0){ lineCharts.addSeries({name: this.startDay + ' 有功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' 有功功率',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: this.startDay + ' 總有功功率',data: []}); lineCharts.addSeries({name: this.startDay + ' A相有功功率',data: []}); lineCharts.addSeries({name: this.startDay + ' B相有功功率',data: []}); lineCharts.addSeries({name: this.startDay + ' C相有功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' 總有功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' A相有功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' B相有功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' C相有功功率',data: []}); } }else if(this.itemStatus == 4){ title = '無(wú)功功率'; lineCharts.getChart().title.update({ text: '無(wú)功功率' }); lineCharts.getChart().yAxis[0].setTitle({text:'有功功率(KVA)'}); if(this.itemType == 0){ lineCharts.addSeries({name: this.startDay + ' 無(wú)功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' 無(wú)功功率',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: this.startDay + ' 總無(wú)功功率',data: []}); lineCharts.addSeries({name: this.startDay + ' A相無(wú)功功率',data: []}); lineCharts.addSeries({name: this.startDay + ' B相無(wú)功功率',data: []}); lineCharts.addSeries({name: this.startDay + ' C相無(wú)功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' 總無(wú)功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' A相無(wú)功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' B相無(wú)功功率',data: []}); lineCharts.addSeries({name: this.endDay + ' C相無(wú)功功率',data: []}); } }else if(this.itemStatus == 5){ }else if(this.itemStatus == 6){ title = '總有功電量'; lineCharts.getChart().title.update({ text: '總有功電量' }); lineCharts.getChart().yAxis[0].setTitle({text:'總有功電量(KWH)'}); lineCharts.addSeries({name: this.startDay + ' 總有功電量',data: []}); lineCharts.addSeries({name: this.endDay + '總有功電量',data: []}); } }, getList(){ var title = ''; let lineCharts = this.$refs.lineCharts; var meterId = this.$route.params.meterId; this.setType(); this.$http.post(this.URLINFO + '/mobile/electricity/getElectricityApp.do',{meterId:meterId,startDay:this.startDay,endDay:this.endDay}) .then(function (res) { for(var i = 0;i < res.data.ls1.length; i++) { if(this.itemStatus == 0){ if(this.itemType == 0){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].totalnum],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].totalnum],false,false); lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].numa],false,false); lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].numb],false,false); lineCharts.getChart().series[3].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].numc],false,false); } }else if(this.itemStatus == 1){ if(this.itemType == 0){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].ia],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ia],false,false); lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ib],false,false); lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ic],false,false); lineCharts.getChart().series[3].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].zeroi],false,false); } }else if(this.itemStatus == 2){ if(this.itemType == 0){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].ua],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ua],false,false); lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].ua],false,false); lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].uc],false,false); } }else if(this.itemStatus == 3){ if(this.itemType == 0){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].totalp],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].pa],false,false); lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].pb],false,false); lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].pc],false,false); } }else if(this.itemStatus == 4){ if(this.itemType == 0){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].reactivep],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].reactivep],false,false); lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].reactivepa],false,false); lineCharts.getChart().series[2].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].reactivepb],false,false); lineCharts.getChart().series[3].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ls1[i].reactivepc],false,false); } }else if(this.itemStatus == 6){ lineCharts.getChart().series[0].addPoint([getTimeStr(res.data.ls1[i].transtime),res.data.ia[i].readNum],false,false); } } for(var i = 0;i < res.data.ls2.length; i++) { if(this.itemStatus == 0){ if(this.itemType == 0){ lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].totalnum],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].totalnum],false,false); lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].numa],false,false); lineCharts.getChart().series[6].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].numb],false,false); lineCharts.getChart().series[7].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].numc],false,false); } }else if(this.itemStatus == 1){ if(this.itemType == 0){ lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ia],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ia],false,false); lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ib],false,false); lineCharts.getChart().series[6].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ic],false,false); lineCharts.getChart().series[7].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].zeroi],false,false); } }else if(this.itemStatus == 2){ if(this.itemType == 0){ lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ua],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[3].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ua],false,false); lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].ub],false,false); lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].uc],false,false); } }else if(this.itemStatus == 3){ if(this.itemType == 0){ lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].totalp],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].totalp],false,false); lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].pa],false,false); lineCharts.getChart().series[6].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].pb],false,false); lineCharts.getChart().series[7].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].pc],false,false); } }else if(this.itemStatus == 4){ if(this.itemType == 0){ lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivep],false,false); }else if(this.itemType == 1){ lineCharts.getChart().series[4].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivep],false,false); lineCharts.getChart().series[5].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivepa],false,false); lineCharts.getChart().series[6].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivepb],false,false); lineCharts.getChart().series[7].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].reactivepc],false,false); } }else if(this.itemStatus == 6){ lineCharts.getChart().series[1].addPoint([getTimeStr(res.data.ls2[i].transtime),res.data.ls2[i].readNum],false,false); } } lineCharts.getChart().redraw(); }) .catch(function (error) { console.log(error) this.$toast('查詢業(yè)主電費(fèi)異常'); }); } }, components: { vchooser, VueHighcharts, daypicker, yesterdaypicker }, mounted () { this.getList() } } function getCurrentTime(){ var date = new Date(); var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); return hour + ':' + minute + ':' + second; } function getTime(nS){ return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17) } function formatDate(now) { var year=now.getYear(); var month=now.getMonth()+1; var date=now.getDate(); var hour=now.getHours(); var minute=now.getMinutes(); var second=now.getSeconds(); //return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; return hour+":"+minute+":"+second; } function getTimeStr(ns){ var d=new Date(ns); return formatDate(d); } </script> <style> *{margin:0;padding:0; list-style:none } h1,h2,h3,h4,h5,h6{font-size:16px; font-weight:normal;} .rank-head{ width: 100%; height: 40px; position:fixed; background: -webkit-linear-gradient(top,rgba(0,0,0,.6),rgba(0,0,0,0)); z-index: 999; color: #fff; font-size: 16px; text-align: center; line-height: 40px; } .container{ width: 100%; overflow: hidden } .rank-head-back{ display: block; float: left; width: 40px; height: 40px; background: url("../assets/index/back.png") no-repeat center center; background-size: 100% 100%; } </style>
以上這篇Vue 中使用vue2-highcharts實(shí)現(xiàn)曲線數(shù)據(jù)展示的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP(vue+webpack+HBulider)
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP(vue+webpack+HBulider),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02聊聊vue集成sweetalert2提示組件的問(wèn)題
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問(wèn)題,本文通過(guò)項(xiàng)目案例實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-11-11Vue3 構(gòu)建 Web Components使用詳解
這篇文章主要為大家介紹了Vue3 構(gòu)建 Web Components使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue中如何創(chuàng)建多個(gè)ueditor實(shí)例教程
這篇文章主要給大家介紹了關(guān)于vue中如何創(chuàng)建多個(gè)ueditor的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08Vue分別運(yùn)用class綁定和style綁定通過(guò)點(diǎn)擊實(shí)現(xiàn)樣式切換
這篇文章主要為大家介紹了Vue分別運(yùn)用class綁定和style綁定通過(guò)點(diǎn)擊實(shí)現(xiàn)樣式切換,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07Vue.js實(shí)現(xiàn)動(dòng)畫(huà)與過(guò)渡效果的示例代碼
在現(xiàn)代前端開(kāi)發(fā)中,用戶體驗(yàn)至關(guān)重要,一個(gè)精美的動(dòng)畫(huà)過(guò)渡不僅能提升界面的美觀性,還能讓用戶在使用時(shí)感受到流暢的交互體驗(yàn),在本文中,我們將深入探討如何在 Vue.js 中實(shí)現(xiàn)動(dòng)畫(huà)與過(guò)渡效果,并提供示例代碼,需要的朋友可以參考下2024-10-10ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報(bào)錯(cuò)Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08