代码提交
This commit is contained in:
commit
0978f5d2bf
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -128,7 +128,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.drawBar()
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
typeValue: {
|
typeValue: {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
<template><div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div></template>
|
<template>
|
||||||
|
<div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -31,7 +33,7 @@ export default {
|
||||||
typeValue: {
|
typeValue: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {
|
default() {
|
||||||
return {}
|
return {};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -51,29 +53,26 @@ 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'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
legend:{},
|
||||||
grid: {
|
grid: {
|
||||||
left: '2%',
|
left: '2%',
|
||||||
right: '4%',
|
right: '4%',
|
||||||
|
|
@ -133,36 +132,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: '',
|
{
|
||||||
type: 'line',
|
name: '',
|
||||||
symbolSize: 6,
|
type: 'line',
|
||||||
smooth: true,
|
symbolSize: 6,
|
||||||
itemStyle: {
|
smooth: true,
|
||||||
color: '#fb864b',
|
itemStyle: {
|
||||||
borderColor: '#fb864b',
|
color: '#fb864b',
|
||||||
// borderWidth: 2
|
borderColor: '#fb864b'
|
||||||
},
|
// borderWidth: 2
|
||||||
data: []
|
},
|
||||||
}]
|
data: []
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
// 区域组件触发y轴展示
|
// 区域组件触发y轴展示
|
||||||
if (this.title == '类型') {
|
if (this.title == '类型') {
|
||||||
|
|
@ -170,128 +170,111 @@ 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
|
||||||
},
|
},
|
||||||
typeValue: {
|
typeValue: {
|
||||||
handler(newVal) {
|
handler(newVal) {}
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div>
|
<div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -20,8 +18,8 @@ export default {
|
||||||
chartName: {
|
chartName: {
|
||||||
type: String
|
type: String
|
||||||
},
|
},
|
||||||
typeValue:{
|
typeValue: {
|
||||||
type:Object
|
type: Object
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
@ -31,7 +29,19 @@ export default {
|
||||||
// 图例数据
|
// 图例数据
|
||||||
legend: [],
|
legend: [],
|
||||||
// pie图数据
|
// pie图数据
|
||||||
seriesData: []
|
seriesData: [
|
||||||
|
{
|
||||||
|
name: '机动车',
|
||||||
|
value: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '非机动车',
|
||||||
|
value: 0
|
||||||
|
}, {
|
||||||
|
name: '行人',
|
||||||
|
value: 0
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -49,11 +59,11 @@ export default {
|
||||||
'#FFC722'
|
'#FFC722'
|
||||||
];
|
];
|
||||||
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',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
color: color,
|
color: color,
|
||||||
|
|
@ -111,7 +121,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.drawPie();
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
typeValue: {
|
typeValue: {
|
||||||
|
|
@ -120,6 +130,7 @@ export default {
|
||||||
this.legend = newVal.type_data.map(ele => {
|
this.legend = newVal.type_data.map(ele => {
|
||||||
return ele.name
|
return ele.name
|
||||||
});
|
});
|
||||||
|
this.seriesData = []
|
||||||
newVal.type_data.forEach(ele => {
|
newVal.type_data.forEach(ele => {
|
||||||
this.seriesData.push({
|
this.seriesData.push({
|
||||||
name: ele.name,
|
name: ele.name,
|
||||||
|
|
@ -127,13 +138,11 @@ export default {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
this.drawPie()
|
this.drawPie()
|
||||||
this.seriesData = []
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -69,6 +69,14 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="echartArr.includes('表格')">
|
<div v-show="echartArr.includes('表格')">
|
||||||
|
<div class="tableTitle">
|
||||||
|
<div class="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tableTime">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
|
<div v-if="pageType == '断面'" style="margin-bottom: 20px; border: 1px solid #e4e7ed">
|
||||||
<tableShow :msg="dataArr" :type="triggerType" />
|
<tableShow :msg="dataArr" :type="triggerType" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue