chengdandan
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

图修改

This commit is contained in:
Hobart 2023-02-21 11:02:27 +08:00
parent 3c9bc0b0de
commit ed3fbc8c7a
1 changed files with 61 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/chart/lineChart.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div> <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
</template> </template>
<script> <script>
@ -33,7 +33,7 @@ export default {
typeValue: { typeValue: {
type: Object, type: Object,
default() { default() {
return {} return {};
} }
} }
}, },
@ -53,27 +53,23 @@ export default {
show: true show: true
}, },
series: [] series: []
}; };
}, },
created() { created() {
// console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40'); // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
}, },
methods: { methods: {
drawLine() { drawLine() {
let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart) let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
if (myChart == null) { if (myChart == null) {
myChart = this.$echarts.init(this.$refs.lineChart) myChart = this.$echarts.init(this.$refs.lineChart);
} }
let option = { let option = {
title: { title: {
show: true, show: true,
text: this.componentName + '-' + this.chartName + '-' + '曲线图', text: this.componentName + '-' + this.chartName + '-' + '曲线图',
textStyle: { textStyle: {
lineHeight: '30', lineHeight: '30'
} }
}, },
grid: { grid: {
@ -135,37 +131,37 @@ export default {
// window.onresize = () => { // 根据窗口大小变化图表自适应 // window.onresize = () => { // 根据窗口大小变化图表自适应
// myChart.resize(); // myChart.resize();
// }; // };
window.addEventListener('resize', function () { window.addEventListener('resize', function() {
myChart.resize(); myChart.resize();
}); });
} }
}, },
mounted() { mounted() {
this.drawLine();
}, },
watch: { watch: {
list: { list: {
handler(newVal) { handler(newVal) {
if (newVal && this.status == '触发' || this.status == '周期时刻') { if ((newVal && this.status == '触发') || this.status == '周期时刻') {
// x轴的数据 // x轴的数据
this.xData = newVal.map((val) => { this.xData = newVal.map(val => {
return val.time; return val.time;
}); });
this.series = [{ this.series = [
{
name: '', name: '',
type: 'line', type: 'line',
symbolSize: 6, symbolSize: 6,
smooth: true, smooth: true,
itemStyle: { itemStyle: {
color: '#fb864b', color: '#fb864b',
borderColor: '#fb864b', borderColor: '#fb864b'
// borderWidth: 2 // borderWidth: 2
}, },
data: [] data: []
}] }
];
// 区域组件触发y轴展示 // 区域组件触发y轴展示
if (this.title == '类型') { if (this.title == '类型') {
@ -173,130 +169,112 @@ export default {
formatter: '{a} {b}:{c}个', formatter: '{a} {b}:{c}个',
show: true, show: true,
confine: true confine: true
} };
this.series[0].name = '总量' this.series[0].name = '总量';
// 映射出类型数组 // 映射出类型数组
let arr = newVal.map(function (ele) { let arr = newVal.map(function(ele) {
if (ele.type_data != null) { if (ele.type_data != null) {
return ele.type_data return ele.type_data;
} }
}) });
var mapN = [] var mapN = [];
for (var t = 0; t < arr.length; t++) { for (var t = 0; t < arr.length; t++) {
for (var i = 0; i < arr[t].length; i++) { for (var i = 0; i < arr[t].length; i++) {
mapN.push(arr[t][i]) mapN.push(arr[t][i]);
} }
} }
var lineArr = [] var lineArr = [];
// 遍历需要多少条类型折线 // 遍历需要多少条类型折线
if (this.typeValue) { if (this.typeValue) {
this.typeValue.type_data.forEach(ele => { this.typeValue.type_data.forEach(ele => {
lineArr.push({ lineArr.push({
name: ele.name, name: ele.name,
type: 'line', type: 'line',
data: [], data: [],
smooth: true smooth: true
}) });
}) });
} }
// 筛选类型的数量 // 筛选类型的数量
mapN.forEach(ele => { mapN.forEach(ele => {
if (ele.name == "机动车") { if (ele.name == '机动车') {
lineArr[0].data.push(ele.quantity) lineArr[0].data.push(ele.quantity);
} else if (ele.name == '非机动车') { } else if (ele.name == '非机动车') {
lineArr[1].data.push(ele.quantity) lineArr[1].data.push(ele.quantity);
} else { } else {
lineArr[2].data.push(ele.quantity) lineArr[2].data.push(ele.quantity);
} }
});
})
for (let j = 0; j < lineArr.length; j++) { for (let j = 0; j < lineArr.length; j++) {
this.series.push(lineArr[j]) this.series.push(lineArr[j]);
} }
// 总和数量 // 总和数量
let mapNR1 = [] let mapNR1 = [];
newVal.map(function (ele) { newVal.map(function(ele) {
if (ele.type_data != null) { if (ele.type_data != null) {
var sum = ele.type_data.reduce(function (prev, cur) { var sum = ele.type_data.reduce(function(prev, cur) {
return cur.quantity + prev; return cur.quantity + prev;
}, 0); }, 0);
mapNR1.push(sum) mapNR1.push(sum);
} }
}) });
// console.log("mapNR1", mapNR1) // console.log("mapNR1", mapNR1)
this.series[0].data = mapNR1 this.series[0].data = mapNR1;
} else if (this.title == '速度') { } else if (this.title == '速度') {
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}km/h', formatter: '{a} {b}:{c}km/h',
show: true, show: true,
confine: true confine: true
} };
this.series[0].data = newVal.map((val) => { this.series[0].data = newVal.map(val => {
return val.speed; return val.speed;
}); });
} else if (this.title == '流量') { } else if (this.title == '流量') {
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}辆', formatter: '{a} {b}:{c}辆',
show: true, show: true,
confine: true confine: true
} };
this.series[0].data = newVal.map((ele) => { this.series[0].data = newVal.map(ele => {
return ele.in_flow + ele.out_flow return ele.in_flow + ele.out_flow;
}); });
} else if (this.title == '车头时距') { } else if (this.title == '车头时距') {
this.tooltip = { this.tooltip = {
formatter: '{a} {b}:{c}/s', formatter: '{a} {b}:{c}/s',
show: true, show: true,
confine: true confine: true
} };
this.series[0].data = newVal.map((val) => { this.series[0].data = newVal.map(val => {
return val.ave_speed; return val.ave_speed;
}); });
} else if (this.title == '排队数') { } else if (this.title == '排队数') {
this.series[0].data = newVal.map((val) => { this.series[0].data = newVal.map(val => {
return val.n_queue; return val.n_queue;
}); });
} else if (this.title == '检测数') { } else if (this.title == '检测数') {
this.series[0].data = newVal.map((val) => { this.series[0].data = newVal.map(val => {
return val.n_stay; return val.n_stay;
}); });
} else if (this.title == '延误') { } else if (this.title == '延误') {
this.series[0].data = newVal.map((val) => { this.series[0].data = newVal.map(val => {});
});
} else if (this.title == '拥堵') { } else if (this.title == '拥堵') {
this.series[0].data = newVal.map((val) => { this.series[0].data = newVal.map(val => {});
});
} }
if (this.$refs.lineChart) { if (this.$refs.lineChart) {
this.$nextTick(() => { this.$nextTick(() => {
this.drawLine(); this.drawLine();
});
})
} }
} }
}, },
immediate: true, immediate: true
}, },
typeValue: { typeValue: {
handler(newVal) { handler(newVal) {}
} }
} }
}
}; };
</script> </script>
<style scoped></style> <style scoped></style>