Real-time curve data display using Vue2-highcharts in Vue _vue2-highcharts realization of real-time curve

1, the previous article Vue the use of vue2-highcharts to implement curve data display example is to use Vue2-highcharts to implement the historical curve, a series of (multiple data points) in a curved way. Real-time curve, every minute, add a point, in real time to connect multiple points to draw a curve, and display up to 10 points, if there are 10 points, the last point added before the first point to remove the front.

2, the Vue front-end code is as follows:

<template> <div> <div > <div>  <span> real-time data monitoring </span> </div> </div> <div > <div> <span >{{$route. pa Rams.monitorname}} ({{$route. Params.meterid}}) </span> </div> </div> <div

            ; <div > <vchooser:selections= "periodlist" @on-change= "Onparamchange (' versions ', $event)" >& 
                 lt;/vchooser> </div> </div> <div > <div class= "Charts" > <vue-highcharts:options= "Options" ref= "Linecharts" ></vue-highcharts> &LT;/DIV&G

      T </div> </div> </template> <script> import vchooser from '. /components/chooser.vue ' Import vuehighcharts from ' Vue2-highcharts ' export default {data () {return{setintervalnum:0, itemstatus:0,
               Itemtitle: ' power factor ', Itemtype:this. $route. Params.metertype, periodlist:[{
               Label: ' Power Factor ', value:0}, {label: ' Current ', Value:1},{Label: ' Voltage ', value:2},{label: ' Active
               Power ', value:3},{label: ' Reactive ', Value:4},{
             Label: ' Depending on power ', Value:5},{label: ' Active Charge ', Value:6  },], Ownerfreedata: [], Options: {global: {USEUTC: False}, Chart: {type: ' spline '}, Title: {T
            Ext: ' power factor '  Text: '}, subtitle: {text: '}, Xaxis: {
                Type: ' Category '}, YAxis: {title: {text: ' power Factor (%) ' Text: '}, Labels: {formatter:function () {RET
                Urn This.value;
            }}, tooltip: {crosshairs:true, shared:true }, credits: {Enabled:false}, Plotoptions: {spline : {marker: {radius:4, LineColor: ' #666666 ', linew Idth:1}}, Series: []}}, ME

          Thods: {onparamchange (attr, val) {this.itemstatus = Val.value; this. $refs. linecharts. Removeseries ();
          var title = ';
          Let Linecharts = this. $refs. Linecharts;
              if (This.itemstatus = = 0) {title = ' power Factor ';
              Linecharts.getchart (). Title.update ({text: ' Power Factor '});
              Linecharts.getchart (). Yaxis[0].settitle ({text: ' power Factor (%) '});
              if (This.itemtype = = 0) {linecharts.addseries ({name: ' power Factor ', data: []});
                 }else if (This.itemtype = = 1) {linecharts.addseries ({name: ' Total power factor ', data: []});
                 Linecharts.addseries ({name: ' A phase rate factor ', data: []});
                 Linecharts.addseries ({name: ' B phase rate factor ', data: []});
              Linecharts.addseries ({name: ' C phase rate factor ', data: []});
              }}else if (this.itemstatus = = 1) {title = ' current ';
              Linecharts.getchart (). Title.update ({text: ' current '});
              Linecharts.getchart (). Yaxis[0].settitle ({text: ' Current (A) '}); if (This.itemtype = = 0) {Linecharts.addSeries ({name: ' current ', data: []});
                 }else if (This.itemtype = = 1) {linecharts.addseries ({name: ' Ia phase current ', data: []});
                 Linecharts.addseries ({name: ' Ib phase current ', data: []});
                 Linecharts.addseries ({name: ' Ic phase current ', data: []});
              Linecharts.addseries ({name: ' 0 sequence current ', data: []});
              }}else if (this.itemstatus = = 2) {title = ' voltage ';
              Linecharts.getchart (). Title.update ({text: ' voltage '});
              Linecharts.getchart (). Yaxis[0].settitle ({text: ' Voltage (V) '});
              if (This.itemtype = = 0) {linecharts.addseries ({name: ' Voltage ', data: []});
                 }else if (This.itemtype = = 1) {linecharts.addseries ({name: ' A phase voltage ', data: []});
                 Linecharts.addseries ({name: ' B phase voltage ', data: []});
              Linecharts.addseries ({name: ' C phase voltage ', data: []});
              }}else if (this.itemstatus = = 3) {title = ' Active Power '; LiNecharts.getchart (). Title.update ({text: ' Active Power '});
              Linecharts.getchart (). Yaxis[0].settitle ({text: ' Active power (KVA) '});
              if (This.itemtype = = 0) {linecharts.addseries ({name: ' Active Power ', data: []});
                 }else if (This.itemtype = = 1) {linecharts.addseries ({name: ' Total active power ', data: []});
                 Linecharts.addseries ({name: ' A phase active power ', data: []});
                 Linecharts.addseries ({name: ' B Phase active power ', data: []});
              Linecharts.addseries ({name: ' C Phase active power ', data: []});
              }}else if (this.itemstatus = = 4) {title = ' reactive power ';
              Linecharts.getchart (). Title.update ({text: ' Reactive power '});
              Linecharts.getchart (). Yaxis[0].settitle ({text: ' Active power (KVA) '});
              if (This.itemtype = = 0) {linecharts.addseries ({name: ' Reactive power ', data: []});
                 }else if (This.itemtype = = 1) {linecharts.addseries ({name: ' Total reactive power ', data: []}); LinecHarts.addseries ({name: ' A phase reactive power ', data: []});
                 Linecharts.addseries ({name: ' B phase reactive power ', data: []});
              Linecharts.addseries ({name: ' C phase reactive power ', data: []});
              }}else if (this.itemstatus = = 5) {title = ' depending on power ';
              Linecharts.getchart (). Title.update ({text: ' Depending on power '});
              Linecharts.getchart (). Yaxis[0].settitle ({text: ' Depending on power (KVA) '});
              if (This.itemtype = = 0) {linecharts.addseries ({name: ' Depending on power ', Data: []});
                 }else if (This.itemtype = = 1) {linecharts.addseries ({name: ' A is in power ', Data: []});
                 Linecharts.addseries ({name: ' B is at the Power ', Data: []});
                 Linecharts.addseries ({name: ' C at the same power ', Data: []});
              Linecharts.addseries ({name: ' Total view power ', data: []});
              }}else if (this.itemstatus = = 6) {title = ' total active power ';
              Linecharts.getchart (). Title.update ({text: ' Total active power '}); Linecharts.gEtchart (). Yaxis[0].settitle ({text: ' Total active power (KWH) '});
          Linecharts.addseries ({name: ' Total active power ', data: []});

         }, Routerback () {this. $router. Go (-1);
      Clearinterval (This.setintervalnum);
          }, GetList () {var title = ';

          Let Linecharts = this. $refs. Linecharts;
              if (This.itemstatus = = 0) {title = ' power Factor ';
              Linecharts.getchart (). Title.update ({text: ' Power Factor '});
              Linecharts.getchart (). Yaxis[0].settitle ({text: ' power Factor (%) '});
              if (This.itemtype = = 0) {linecharts.addseries ({name: ' power Factor ', data: []});
                 }else if (This.itemtype = = 1) {linecharts.addseries ({name: ' Total power factor ', data: []});
                 Linecharts.addseries ({name: ' A phase rate factor ', data: []});
                 Linecharts.addseries ({name: ' B phase rate factor ', data: []});
              Linecharts.addseries ({name: ' C phase rate factor ', data: []}); }} This.setintervaLnum = setinterval (this.getrealtime,1000 *)}, Getrealtime () {this. $http. Post (this. Urlinfo + '/mobile/getrealtransinfo.do ', {}). Then (function (res) {//Get the number of curve points on a chart if the number is greater than 10,FL
                    AG is true var itemdata = Linecharts.getchart (). Series[0].data;
                    var flag = false;
                    if (Itemdata.length >=) {flag = true; //Add a point (flag to false, indicating that a new point is not removed without removing the front data point, and if flag is true, the new point is added while removing the front data point) line
                   Charts.getchart (). Series[0].addpoint ([Res.data.num1,res.data.num2],false,flag);
          Linecharts.getchart (). Redraw ();
          ). catch (function (error) {this. $toast (' query monitoring point real-time data anomaly ');

      }); }, components: {vchooser, vuehighcharts}, mounted () {This.getli St ()}} 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;  } </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>

3, the Java background code is as follows:

@ResponseBody
    @RequestMapping ("/getrealtransinfo") public
    map<string,object> Getrealtransinfo ( HttpServletRequest request,httpservletresponse response) {
        map<string,object> Map = new hashmap<string, Object> ();
        int max=20;
        int min=10;
        Random Random = new Random ();

        int num1 = random.nextint (max)% (max-min+1) + min;
        int num2 = random.nextint (max)% (max-min+1) + min;

        Map.put ("Num1", NUM1);
        Map.put ("num2", num2);
        return map;
    }