364 lines
12 KiB
Vue
364 lines
12 KiB
Vue
<template>
|
||
<div style="width: 100%; margin-top: 5px">
|
||
<div class="tableTitle">
|
||
<div>
|
||
<span
|
||
style="
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background-color: #3297ff;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 8px;
|
||
"
|
||
></span>
|
||
<span style="font-size: 18px">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div id="lineChart" ref="lineChart" style="width: 705px; height: 300px"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'lineChart', //折线图组件
|
||
props: {
|
||
itemData: {
|
||
type: Object,
|
||
default() {
|
||
return {};
|
||
}
|
||
},
|
||
originalDataArr: {
|
||
type: Array,
|
||
default() {
|
||
return [];
|
||
}
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default() {
|
||
return [];
|
||
}
|
||
},
|
||
pageType: {
|
||
type: String
|
||
},
|
||
title: {
|
||
type: String
|
||
},
|
||
// 时间模式
|
||
status: {
|
||
type: String
|
||
},
|
||
// 组件名称
|
||
componentName: {
|
||
type: String
|
||
},
|
||
chartName: {
|
||
type: String
|
||
},
|
||
// 单个数据接收
|
||
typeValue: {
|
||
type: Object,
|
||
default() {
|
||
return {};
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
xData: [],
|
||
yData: [],
|
||
yData1: [],
|
||
yData2: [],
|
||
yData3: [],
|
||
arrN: [],
|
||
// series: []
|
||
// triggerType:'触发时刻'
|
||
myChart: null,
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
name: 'km/h',
|
||
series: [],
|
||
|
||
//
|
||
listArr: []
|
||
};
|
||
},
|
||
created() {
|
||
// console.log(this.componentName + '-' + JSON.stringify(this.itemData));
|
||
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
|
||
},
|
||
|
||
methods: {
|
||
drawLine(newVal, title, timeMode) {
|
||
// console.log('newVal == ', newVal)
|
||
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
|
||
if (myChart == null) {
|
||
myChart = this.$echarts.init(this.$refs.lineChart);
|
||
}
|
||
// var series = []
|
||
if (newVal) {
|
||
this.xData = newVal.map((val) => {
|
||
return val.time;
|
||
});
|
||
}
|
||
|
||
// myChart.showLoading() //开启loading
|
||
let option = {
|
||
legend: {},
|
||
grid: {
|
||
left: '2%',
|
||
right: '4%',
|
||
bottom: '10%',
|
||
top: '20%',
|
||
containLabel: true
|
||
},
|
||
tooltip: this.tooltip,
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#eeebeb',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: '#6c6c6c'
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
boundaryGap: ['5%', '5%'],
|
||
|
||
data: this.xData.reverse()
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: this.name,
|
||
axisLabel: {
|
||
color: '#6c6c6c'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#eeebeb',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
series: this.getMessage(newVal, title, timeMode)
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', function () {
|
||
myChart.resize();
|
||
});
|
||
// this.$nextTick(() => {
|
||
// myChart.setOption(option)
|
||
// myChart.resize();
|
||
// })
|
||
},
|
||
|
||
getMessage(newVal, title, timeMode) {
|
||
if (newVal) {
|
||
var series = [
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
symbolSize: 6,
|
||
smooth: true,
|
||
itemStyle: {
|
||
color: '#fb864b',
|
||
borderColor: '#fb864b'
|
||
// borderWidth: 2
|
||
},
|
||
data: []
|
||
}
|
||
];
|
||
|
||
if (title === '类型') {
|
||
this.tooltip = {
|
||
formatter: '{a} {b}:{c}个',
|
||
show: true,
|
||
confine: true
|
||
};
|
||
this.name = '';
|
||
series[0].name = '总量';
|
||
// 映射出类型数组
|
||
let arr = newVal.map(function (ele) {
|
||
if (ele.type_data != null) {
|
||
return ele.type_data;
|
||
}
|
||
});
|
||
var mapN = [];
|
||
if (arr && arr.length > 0) {
|
||
for (var t = 0; t < arr.length; t++) {
|
||
if (arr[t] && arr[t].length > 0) {
|
||
for (var i = 0; i < arr[t].length; i++) {
|
||
mapN.push(arr[t][i]);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
var lineArr = [];
|
||
if (newVal[0].type_data != undefined) {
|
||
newVal[0].type_data.forEach((ele) => {
|
||
lineArr.push({
|
||
name: ele.name,
|
||
type: 'line',
|
||
data: [],
|
||
smooth: true
|
||
});
|
||
});
|
||
}
|
||
mapN.forEach((ele, index) => {
|
||
if (lineArr[index] && lineArr[index].data) {
|
||
lineArr[index].data.push(ele.quantity);
|
||
}
|
||
// if (ele.name == '机动车') {
|
||
// lineArr[0].data.push(ele.quantity);
|
||
// } else if (ele.name == '非机动车') {
|
||
// lineArr[1].data.push(ele.quantity);
|
||
// } else {
|
||
// lineArr[2].data.push(ele.quantity);
|
||
// }
|
||
});
|
||
if (lineArr && lineArr.length > 0) {
|
||
for (let j = 0; j < lineArr.length; j++) {
|
||
series.push(lineArr[j]);
|
||
}
|
||
}
|
||
|
||
// 总和数量
|
||
let mapNR1 = [];
|
||
newVal.map(function (ele) {
|
||
if (ele.type_data != null) {
|
||
var sum = ele.type_data.reduce(function (prev, cur) {
|
||
return cur.quantity + prev;
|
||
}, 0);
|
||
mapNR1.push(sum);
|
||
}
|
||
});
|
||
series[0].data = mapNR1;
|
||
} else if (title === '速度') {
|
||
let unit = 'km/h';
|
||
if (this.originalDataArr && this.originalDataArr.length > 0) {
|
||
if (this.originalDataArr[0].speed >= 0) {
|
||
unit = 'km/h';
|
||
} else {
|
||
unit = 'pix/s';
|
||
}
|
||
}
|
||
this.tooltip = {
|
||
formatter: `{a} {b}:{c}${unit}`,
|
||
show: true,
|
||
confine: true
|
||
};
|
||
this.name = unit;
|
||
// console.log(this.status + '-速度-' + JSON.stringify(newVal));
|
||
series[0].data = newVal.map((val) => {
|
||
if (val.speed == -1) {
|
||
return '-';
|
||
}
|
||
return Math.abs(val.speed);
|
||
});
|
||
} else if (title === '流量') {
|
||
this.name = '辆';
|
||
if (this.status != '实时触发') {
|
||
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
|
||
}
|
||
series[0].data = newVal.map((ele) => {
|
||
return ele.in_flow + ele.out_flow;
|
||
});
|
||
} else if (title === '车头时距') {
|
||
this.name = '秒';
|
||
this.tooltip = {
|
||
formatter: '{a} {b}:{c}/s',
|
||
show: true,
|
||
confine: true
|
||
};
|
||
series[0].data = newVal.map((val) => {
|
||
if (timeMode == '固定间隔') {
|
||
return val.ave_headway;
|
||
} else {
|
||
return val.headway;
|
||
}
|
||
});
|
||
} else if (title === '排队数') {
|
||
this.name = '辆';
|
||
if (this.status != '实时触发') {
|
||
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
|
||
}
|
||
series[0].data = newVal.map((val) => {
|
||
// return val.n_queue;
|
||
if (timeMode == '固定间隔') {
|
||
return val.ave_queue;
|
||
} else {
|
||
return val.n_queue;
|
||
}
|
||
});
|
||
} else if (title === '检测数') {
|
||
this.name = '辆';
|
||
if (this.status != '实时触发') {
|
||
this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
|
||
}
|
||
series[0].data = newVal.map((val) => {
|
||
if (timeMode == '固定间隔') {
|
||
return val.ave_stay;
|
||
} else {
|
||
return val.n_stay;
|
||
}
|
||
});
|
||
} else if (title === '延误') {
|
||
this.name = '秒';
|
||
series[0].data = newVal.map((val) => {
|
||
return val.ave_delay;
|
||
});
|
||
} else if (title === '拥堵') {
|
||
this.name = '秒';
|
||
series[0].data = newVal.map((val) => {});
|
||
}
|
||
series.forEach((ele) => {
|
||
ele.data.reverse();
|
||
});
|
||
return series;
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
// if (this.historyData.length != 0) {
|
||
// this.drawLine(this.historyData, this.title, this.status);
|
||
// }
|
||
// this.getMessage(this.list)
|
||
// console.log(this.$parent.dataArr, '父组件的dataArr');
|
||
// this.$set(this.$parent.dataArr)
|
||
},
|
||
watch: {}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.tableTitle {
|
||
background: #f7f8fa;
|
||
margin-bottom: 5px;
|
||
padding: 8px;
|
||
}
|
||
</style>
|