Vue 中使用vue2-highcharts实现曲线数据展示的方法

<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>