Vue 中使用vue2-highcharts实现曲线数据展示的方法
程序员文章站
2022-06-03 10:48:53
1、要实现的效果如下图：
2、vue前端页面如下：
&l...
1、要实现的效果如下图：
2、vue前端页面如下：
<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:'功率因数',
itemtype:this.$route.params.metertype,
periodlist:[
{
label: '功率因数',
value: 0
},
{
label: '电流',
value: 1
},{
label: '电压',
value: 2
},{
label: '有功功率',
value: 3
},{
label: '无功功率',
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 = '无功功率';
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 == 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('查询业主电费异常');
});
}
},
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实现曲线数据展示的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
下一篇： [译]PHP7简介：新特性与移除的特性