Use vue2-highcharts to implement curve data

This time I will bring you the use of vue2-highcharts to implement curve data, and what are the precautions for using vue2-highcharts to implement curve data. The following is a practical case, let's take a look.

1. The effect to be achieved is as follows:

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

<template>
 <p>
  </p>
<p>
  </p>
<p>
    <img  class="rank-head-back lazy" src="/static/imghwm/default1.png" data-src="../assets/index/back.png" alt="Use vue2-highcharts to implement curve data" >
    <span>历史曲线</span>
  </p>
  </template>

  

   

    {{$route.params.monitorName}}({{$route.params.meterId}})    

     

   

        

    

         

     

   

         

     

   

         

     <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> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How Canvas makes a 3D dynamic Chart

H5 reads the file and uploads it to the server Methods

The above is the detailed content of Use vue2-highcharts to implement curve data. For more information, please follow other related articles on the PHP Chinese website!