Vue 中使用vue2-highcharts實現實時曲線資料展示示例
阿新 • • 發佈:2019-01-22
import vchooser from '../components/chooser.vue'
import VueHighcharts from 'vue2-highcharts'
export default {
data() {
return{
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: {
onParamChange (attr, val) {
this.itemStatus = val.value;
this.$refs.lineCharts.removeSeries();
var title = '';
let lineCharts = this.$refs.lineCharts;
if(this.itemStatus == 0){
title = '功率因素';
lineCharts.getChart().title.update({ text: '功率因素' });
lineCharts.getChart().yAxis[0].setTitle({text:'功率因素(%)'});
if(this.itemType == 0){
lineCharts.addSeries({name: '功率因素',data: []});
}else if(this.itemType == 1){
lineCharts.addSeries({name: '總功率因素',data: []});
lineCharts.addSeries({name: 'A相率因素',data: []});
lineCharts.addSeries({name: 'B相率因素',data: []});
lineCharts.addSeries({name: 'C相率因素',data: []});
}
}else if(this.itemStatus == 1){
title = '電流';
lineCharts.getChart().title.update({ text: '電流' });
lineCharts.getChart().yAxis[0].setTitle({text:'電流(A)'});
if(this.itemType == 0){
lineCharts.addSeries({name: '電流',data: []});
}else if(this.itemType == 1){
lineCharts.addSeries({name: 'Ia 相電流',data: []});
lineCharts.addSeries({name: 'Ib 相電流',data: []});
lineCharts.addSeries({name: 'Ic 相電流',data: []});
lineCharts.addSeries({name: '零序電流',data: []});
}
}else if(this.itemStatus == 2){
title = '電壓';
lineCharts.getChart().title.update({ text: '電壓' });
lineCharts.getChart().yAxis[0].setTitle({text:'電壓(V)'});
if(this.itemType == 0){
lineCharts.addSeries({name: '電壓',data: []});
}else if(this.itemType == 1){
lineCharts.addSeries({name: 'A相電壓',data: []});
lineCharts.addSeries({name: 'B相電壓',data: []});
lineCharts.addSeries({name: 'C相電壓',data: []});
}
}else if(this.itemStatus == 3){
title = '有功功率';
lineCharts.getChart().title.update({ text: '有功功率' });
lineCharts.getChart().yAxis[0].setTitle({text:'有功功率(KVA)'});
if(this.itemType == 0){
lineCharts.addSeries({name: '有功功率',data: []});
}else if(this.itemType == 1){
lineCharts.addSeries({name: '總有功功率',data: []});
lineCharts.addSeries({name: 'A相有功功率',data: []});
lineCharts.addSeries({name: 'B相有功功率',data: []});
lineCharts.addSeries({name: 'C相有功功率',data: []});
}
}else if(this.itemStatus == 4){
title = '無功功率';
lineCharts.getChart().title.update({ text: '無功功率' });
lineCharts.getChart().yAxis[0].setTitle({text:'有功功率(KVA)'});
if(this.itemType == 0){
lineCharts.addSeries({name: '無功功率',data: []});
}else if(this.itemType == 1){
lineCharts.addSeries({name: '總無功功率',data: []});
lineCharts.addSeries({name: 'A相無功功率',data: []});
lineCharts.addSeries({name: 'B相無功功率',data: []});
lineCharts.addSeries({name: 'C相無功功率',data: []});
}
}else if(this.itemStatus == 5){
title = '視在功率';
lineCharts.getChart().title.update({ text: '視在功率' });
lineCharts.getChart().yAxis[0].setTitle({text:'視在功率(KVA)'});
if(this.itemType == 0){
lineCharts.addSeries({name: '視在功率',data: []});
}else if(this.itemType == 1){
lineCharts.addSeries({name: 'A相視在功率',data: []});
lineCharts.addSeries({name: 'B相視在功率',data: []});
lineCharts.addSeries({name: 'C相視在功率',data: []});
lineCharts.addSeries({name: '總視在功率',data: []});
}
}else if(this.itemStatus == 6){
title = '總有功電量';
lineCharts.getChart().title.update({ text: '總有功電量' });
lineCharts.getChart().yAxis[0].setTitle({text:'總有功電量(KWH)'});
lineCharts.addSeries({name: '總有功電量',data: []});
}
},
routerBack(){
this.$router.go(-1);
clearInterval(this.setIntervalNum);
},
getList(){
var title = '';
let lineCharts = this.$refs.lineCharts;
if(this.itemStatus == 0){
title = '功率因素';
lineCharts.getChart().title.update({ text: '功率因素' });
lineCharts.getChart().yAxis[0].setTitle({text:'功率因素(%)'});
if(this.itemType == 0){
lineCharts.addSeries({name: '功率因素',data: []});
}else if(this.itemType == 1){
lineCharts.addSeries({name: '總功率因素',data: []});
lineCharts.addSeries({name: 'A相率因素',data: []});
lineCharts.addSeries({name: 'B相率因素',data: []});
lineCharts.addSeries({name: 'C相率因素',data: []});
}
}
this.setIntervalNum = setInterval(this.getRealTime,1000 * 60)
},
getRealTime(){
this.$http.post(this.URLINFO + '/mobile/getRealTransInfo.do',{})
.then(function (res) {
//獲取圖表上曲線點的數量,如果數量大於10,flag為true
var itemData = lineCharts.getChart().series[0].data;
var flag = false;
if(itemData.length >= 10){
flag = true;
}
//新增一個點(flag為false,表示新增一個點的同時不移除最前面的資料點,如果flag為true,表示新增一個點的同時移除最前面的資料點)
lineCharts.getChart().series[0].addPoint([res.data.num1,res.data.num2],false,flag);
lineCharts.getChart().redraw();
})
.catch(function (error) {
this.$toast('查詢監測點實時資料異常');
});
}
},
components: {
vchooser,
VueHighcharts
},
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;
}