Maison > interface Web > Tutoriel H5 > le corps du texte

Utilisez vue2-highcharts pour implémenter les données de courbe

php中世界最好的语言
Libérer: 2018-03-27 14:50:04
original
2619 Les gens l'ont consulté

Cette fois, je vais vous présenter l'utilisation de vue2-highcharts pour implémenter des données de courbe, et quelles sont les précautions pour utiliser vue2-highcharts pour implémenter des données de courbe. Ce qui suit est un cas pratique, prenons. un regard.

1. L'effet à obtenir est le suivant :

2. La page frontale de la vue est la suivante :

<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 '../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 + &#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>
Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. informations passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment créer un graphique dynamique 3D avec Canvas

H5 lit le fichier et le télécharge sur la Méthode serveur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!