cari

Rumah  >  Artikel  >  hujung hadapan web  >  使用vue2-highcharts实现曲线数据

使用vue2-highcharts实现曲线数据

php中世界最好的语言
php中世界最好的语言asal
2018-03-27 14:50:042635semak imbas

这次给大家带来使用vue2-highcharts实现曲线数据，使用vue2-highcharts实现曲线数据的注意事项有哪些，下面就是实战案例，一起来看一下。

1、要实现的效果如下图：

2、vue前端页面如下：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Canvas如何做出3D动态的Chart图表

H5读取文件并上传到服务器的方法

Atas ialah kandungan terperinci 使用vue2-highcharts实现曲线数据. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用Adobe Html5 Extension的开发详解Artikel seterusnya：nodejs的爬虫框架superagent

Artikel berkaitan

Lihat lagi