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

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

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