How to implement curve data display by using vue2-highcharts in Vue?

Below I will share with you an article on how to use vue2-highcharts to display curve data in Vue. It has a good reference value and I hope it will be helpful to everyone.

1. The effect to be achieved is as follows:

##2. The vue front-end page is as follows:

<template>
 <p>
  <p>
  <p>
    <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/>
    <span >历史曲线</span>
  </p>
  </p>
  <p >
   <p >
    <span >{{$route.params.monitorName}}({{$route.params.meterId}})</span>
   </p>
  </p>
  <p >
   <p >
    <yesterdaypicker v-on:startPicked="startPicked" style="margin-left:10px;"></yesterdaypicker>
   </p>
    <p >
    <daypicker v-on:endPicked="endPicked" style="margin-left:10px;"></daypicker>
    </p>
  </p>
  <p >
   <p >
     <vchooser :selections="periodList" @on-change="onParamChange(&#39;versions&#39;, $event)"></vchooser>
   </p>
  </p>
  <p >
   <p class="charts" >
     <vue-highcharts :options="options" ref="lineCharts" ></vue-highcharts>
   </p>
  </p>
 </p>
</template>
<script>
 import vchooser from &#39;../components/chooser.vue&#39;
 import VueHighcharts from &#39;vue2-highcharts&#39;
 import daypicker from &#39;../components/daypicker.vue&#39;
 import yesterdaypicker from &#39;../components/yesterdaypicker.vue&#39;
 export default {
 data() {
  return{
   startDay:&#39;&#39;,
   endDay:&#39;&#39;,
   setIntervalNum:0,
   itemStatus:0,
   itemTitle:&#39;功率因数&#39;,
   itemType:this.$route.params.meterType,
   periodList:[
    {
    label: &#39;功率因数&#39;,
    value: 0
    },
    {
    label: &#39;电流&#39;,
    value: 1
    },{
    label: &#39;电压&#39;,
    value: 2
    },{
    label: &#39;有功功率&#39;,
    value: 3
    },{
    label: &#39;无功功率&#39;,
    value: 4
    }/*,{
    label: &#39;视在功率&#39;,
    value: 5
    }*/,{
    label: &#39;有功电量&#39;,
    value: 6
    },
   ],
   ownerFreeData: [],
   options: {
   global: {
    useUTC: false
   },
   chart: {
    type: &#39;spline&#39;
   },
   title: {
    text: &#39;功率因素&#39;
    //text: &#39; &#39;
   },
   subtitle: {
    text: &#39;&#39;
   },
   xAxis: {
    type: &#39;category&#39;
   },
   yAxis: {
    title: {
    text: &#39;功率因素(%)&#39;
    //text: &#39; &#39;
    },
    labels: {
    formatter: function () {
     return this.value;
    }
    }
   },
   tooltip: {
    crosshairs: true,
    shared: true
   },
   credits: {
    enabled: false
   },
   plotOptions: {
    spline: {
    marker: {
     radius: 4,
     lineColor: &#39;#666666&#39;,
     lineWidth: 1
    }
    }
   },
   series: []
   }
  }
 },
  methods: {
  startPicked(year, month, date) {
   //this.ownerFreeData = []
   if(this.$refs.lineCharts != null){
    this.$refs.lineCharts.removeSeries();
   }
   var monthStr = &#39;&#39;;
   var dayStr = &#39;&#39;;
   if(month < 10){
    monthStr = `0${month}`;
   }else{
    monthStr = `${month}`;
   }
   if(date < 10){
    dayStr = `0${date}`;
   }else{
    dayStr = `${date}`;
   }
   this.startDay = `${year}-` + monthStr + &#39;-&#39; + 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 = &#39;&#39;;
   var dayStr = &#39;&#39;;
   if(month < 10){
    monthStr = `0${month}`;
   }else{
    monthStr = `${month}`;
   }
   if(date < 10){
    dayStr = `0${date}`;
   }else{
    dayStr = `${date}`;
   }
   this.endDay = `${year}-` + monthStr + &#39;-&#39; + 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: &#39;timeSortPoint&#39;, params: {id: mid,name:mname,pname:mpname}});
  },
  setType(){
   var title = &#39;&#39;;
   let lineCharts = this.$refs.lineCharts;
   if(this.itemStatus == 0){
    title = &#39;功率因素&#39;;
    lineCharts.getChart().title.update({ text: &#39;功率因素&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;功率因素(%)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 功率因素&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; 总功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; A相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; B相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; C相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 总功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; A相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; B相功率因素&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; C相功率因素&#39;,data: []});
    }
   }else if(this.itemStatus == 1){
    title = &#39;电流&#39;;
    lineCharts.getChart().title.update({ text: &#39;电流&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;电流(A)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39;电流&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; Ia 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; Ib 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; Ic 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; 零序电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; Ia 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; Ib 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; Ic 相电流&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 零序电流&#39;,data: []});
    }
   }else if(this.itemStatus == 2){
    title = &#39;电压&#39;;
    lineCharts.getChart().title.update({ text: &#39;电压&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;电压(V)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 电压&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 电压&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; A相电压&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; B相电压&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; C相电压&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; A相电压&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; B相电压&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; C相电压&#39;,data: []});
    }
   }else if(this.itemStatus == 3){
    title = &#39;有功功率&#39;;
    lineCharts.getChart().title.update({ text: &#39;有功功率&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;有功功率(KVA)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 有功功率&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; 总有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; A相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; B相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; C相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 总有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; A相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; B相有功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; C相有功功率&#39;,data: []});
    }
   }else if(this.itemStatus == 4){
    title = &#39;无功功率&#39;;
    lineCharts.getChart().title.update({ text: &#39;无功功率&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;有功功率(KVA)&#39;});
    if(this.itemType == 0){
     lineCharts.addSeries({name: this.startDay + &#39; 无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 无功功率&#39;,data: []});
    }else if(this.itemType == 1){
     lineCharts.addSeries({name: this.startDay + &#39; 总无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; A相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; B相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.startDay + &#39; C相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; 总无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; A相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; B相无功功率&#39;,data: []});
     lineCharts.addSeries({name: this.endDay + &#39; C相无功功率&#39;,data: []});
    }
   }else if(this.itemStatus == 5){
   }else if(this.itemStatus == 6){
    title = &#39;总有功电量&#39;;
    lineCharts.getChart().title.update({ text: &#39;总有功电量&#39; });
    lineCharts.getChart().yAxis[0].setTitle({text:&#39;总有功电量(KWH)&#39;});
    lineCharts.addSeries({name: this.startDay + &#39; 总有功电量&#39;,data: []});
    lineCharts.addSeries({name: this.endDay + &#39;总有功电量&#39;,data: []});
   }
  },
  getList(){
   var title = &#39;&#39;;
   let lineCharts = this.$refs.lineCharts;
   var meterId = this.$route.params.meterId;
   this.setType();
   this.$http.post(this.URLINFO + &#39;/mobile/electricity/getElectricityApp.do&#39;,{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(&#39;查询业主电费异常&#39;);
   });
  }
  },
  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 + &#39;:&#39; + minute + &#39;:&#39; + 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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue’s routing dynamic redirection and navigation guard examples

How to perfectly parse data in js

Solving the problem of failure after using vue.js routing

The above is the detailed content of How to implement curve data display by using vue2-highcharts in Vue?. For more information, please follow other related articles on the PHP Chinese website!