The method of curve data display using vue2-highcharts in Vue, vuevue2-highcharts

The method of curve data display using vue2-highcharts in Vue, vuevue2-highcharts

1. The effects to be achieved are as follows:

2. the vue front-end page is as follows:

<Template> <div>  <span> historical curve </span> </div> <div> <span >{{ $ route. params. monitorName }}( {$ route. params. meterId }}) </span> </div> <yesterdaypicker v-on: startPicked = "startPicked" style = "margin-left: 10px; "> </yesterdaypicker> </div> <daypicker v-on: endPicked =" endPicked" Style = "margin-left: 10px;"> </daypicker> </div> <vchooser: selections = "periodList" @ on-change = "onParamChange ('versions', $ event) "> </vchooser> </div> <div class =" charts "> <vue-highcharts: options = "options" ref = "lineCharts"> </vue-highcharts> </div> </template> <script> import vchooser from' .. /components/chooser. vue 'import VueHighcharts from 'vue2-high Charts 'import daypicker from '.. /components/daypicker. vue 'import yesterdaypicker from '.. /components/yesterdaypicker. vue 'export default {data () {return {startDay: '', endDay:'', setIntervalNum: 0, itemStatus: 0, itemTitle: 'Power factor ', itemType: this. $ route. params. meterType, periodList: [{label: 'Power factor ', value: 0}, {label: 'electric', value: 1}, {label: 'voltage ', value: 2 },{ label: 'Active power', value: 3 },{ label: 'Reactive power', value: 4}/*, {label: 'visible power', value: 5} */, {label: 'Active batter', value: 6},], ownerFreeData: [], options: {global: {useUTC: false}, chart: {type: 'spline'}, title: {text: 'Power factor '// text: ''}, subtitle: {text:''}, xAxis: {type: 'category'}, yAxis: {title: {text: 'Power factor (%) '// text: ''}, labels: {formatter: function () {return this. value ;}}, tooltip: {crosshairs: true, sh Ared: 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 + '-' + 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 = ''; var dayStr =''; if (month <10) {monthStr = '0 $ {month }';} else {monthStr = '$ {month}';} if (date <10) {dayStr = '0 $ {date }';} else {dayStr = '$ {date}';} this. endDay = '$ {year}-' + monthStr + '-' + 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: 'timesortpoint', params: {id: mid, name: mname, pname: mpname}) ;}, setType () {var title = ''; let lineCharts = this. $ refs. lin ECharts; 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: this. startDay + 'power factor ', data: []}); lineCharts. addSeries ({name: this. endDay + 'power factor ', data: []});} else if (this. itemType = 1) {lineCharts. addSeries ({name: this. startDay + 'total power', dat A: []}); lineCharts. addSeries ({name: this. startDay + 'aphase Power Factor ', data: []}); lineCharts. addSeries ({name: this. startDay + 'B phase power factor', data: []}); lineCharts. addSeries ({name: this. startDay + 'C' power factor, data: []}); lineCharts. addSeries ({name: this. endDay + 'total power', data: []}); lineCharts. addSeries ({name: this. endDay + 'aphase Power Factor ', data: []}); lineCharts. addSeries ({name: this. endDay + 'B phase power factor', data: []}); li NeCharts. addSeries ({name: this. endDay + 'C-phase power factor ', data: []}) ;}} else if (this. itemStatus = 1) {title = 'offset'; lineCharts. getChart (). title. update ({text: 'Current '}); lineCharts. getChart (). yAxis [0]. setTitle ({text: 'Current (A) '}); if (this. itemType = 0) {lineCharts. addSeries ({name: this. startDay + 'current ', data: []}); lineCharts. addSeries ({name: this. endDay + 'current ', data: []});} else if (this. itemType = 1) {lineCh Arts. addSeries ({name: this. startDay + 'ia phase current ', data: []}); lineCharts. addSeries ({name: this. startDay + 'ib phase current ', data: []}); lineCharts. addSeries ({name: this. startDay + 'ic phase current ', data: []}); lineCharts. addSeries ({name: this. startDay + 'zero-Sequence Current ', data: []}); lineCharts. addSeries ({name: this. endDay + 'ia phase current ', data: []}); lineCharts. addSeries ({name: this. endDay + 'ib phase current ', data: []}); lineCharts. addSe Ries ({name: this. endDay + 'ic phase current ', data: []}); lineCharts. addSeries ({name: this. endDay + 'zero-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: this. startDay + 'voltage ', data: []}); lineCharts. addSeries ({name: this. endDay + 'voltage', Data: []});} else if (this. itemType = 1) {lineCharts. addSeries ({name: this. startDay + 'A', data: []}); lineCharts. addSeries ({name: this. startDay + 'B phase voltage', data: []}); lineCharts. addSeries ({name: this. startDay + 'C phase voltage ', data: []}); lineCharts. addSeries ({name: this. endDay + 'a phase voltage ', data: []}); lineCharts. addSeries ({name: this. endDay + 'B phase voltage', data: []}); lineCharts. addSeries ({name: this. endDay + '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: this. startDay + 'Active power', data: []}); lineCharts. addSeries ({name: this. endDay + 'Active power', data: []});} else if (this. itemType = 1) {lineCharts. addSeries ({name: this. s TartDay + 'total active power', data: []}); lineCharts. addSeries ({name: this. startDay + 'aphase active power', data: []}); lineCharts. addSeries ({name: this. startDay + 'B-Phase Active power', data: []}); lineCharts. addSeries ({name: this. startDay + 'C-Phase Active power', data: []}); lineCharts. addSeries ({name: this. endDay + 'total active power', data: []}); lineCharts. addSeries ({name: this. endDay + 'aphase active power', data: []}); lineCharts. addSeries ({name: this. endDay +' Phase B Active Power ', data: []}); lineCharts. addSeries ({name: this. endDay + '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: this. startDay + 'reactive power', data: []}); lineCharts. addSeries ({name: this. endDay + 'reactive power', data: []});} Else if (this. itemType = 1) {lineCharts. addSeries ({name: this. startDay + 'total reactive power', data: []}); lineCharts. addSeries ({name: this. startDay + 'a-phase Reactive power', data: []}); lineCharts. addSeries ({name: this. startDay + 'B-phase Reactive power', data: []}); lineCharts. addSeries ({name: this. startDay + 'C-phase Reactive power', data: []}); lineCharts. addSeries ({name: this. endDay + 'total reactive power', data: []}); lineCharts. addSeries ({name: this. endDay + 'a Reactive Power ', data: []}); lineCharts. addSeries ({name: this. endDay + 'B-phase Reactive power', data: []}); lineCharts. addSeries ({name: this. endDay + 'C-phase Reactive power', data: []}) ;}} else if (this. itemStatus = 5) {} else if (this. itemStatus = 6) {title = 'total active battery'; lineCharts. getChart (). title. update ({text: 'total active battery'}); lineCharts. getChart (). yAxis [0]. setTitle ({text: 'total active power (KWH) '}); lineCharts. addSeries ({name: this. startDay + 'total active battery ', Data: []}); lineCharts. addSeries ({name: this. endDay + 'total active battery', data: []}) ;}, getList () {var title = ''; let lineCharts = this. $ refs. lineCharts; var meterId = this. $ route. params. meterId; this. setType (); this. $ http. post (this. URLINFO + '/mobile/atomicity/getpolicicityapp. do ', {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]. tra Nstime), 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. l S1 [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. l S1 [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 ([getT ImeStr (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]. reactive PC], false, false) ;}} else if (this. itemStatus = 6) {lineCharts. getChart (). series [0]. addPoint ([getT ImeStr (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. ls 2 [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) ;}} el Se 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), r Es. 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), r Es. 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. dat A. 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 ('querying the owner's electricity bill exception') ;}}, 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 + ':' + minute + ':' + 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 ,. 6), rgba (999,); z-index:; 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; background-size: 100% 100%;} </style>

The above Vue in the use of vue2-highcharts to achieve curve data display method is small make up to share with you all the content, hope to give you a reference, also hope you can support a lot of help house.