代码提交
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() {
|
||||
|
||||
this.drawBar()
|
||||
},
|
||||
watch: {
|
||||
typeValue: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<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>
|
||||
export default {
|
||||
name: 'lineChart', //折线图组件
|
||||
|
|
@ -31,7 +33,7 @@ export default {
|
|||
typeValue: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -51,29 +53,26 @@ 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'
|
||||
}
|
||||
},
|
||||
legend:{},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '4%',
|
||||
|
|
@ -133,36 +132,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 == '类型') {
|
||||
|
|
@ -170,129 +170,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
|
||||
},
|
||||
typeValue: {
|
||||
handler(newVal) {
|
||||
|
||||
}
|
||||
handler(newVal) {}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
|
||||
<div id="pieChart" ref="pieChart" style="width:100%;height:300px;"></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -20,8 +18,8 @@ export default {
|
|||
chartName: {
|
||||
type: String
|
||||
},
|
||||
typeValue:{
|
||||
type:Object
|
||||
typeValue: {
|
||||
type: Object
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -31,11 +29,23 @@ export default {
|
|||
// 图例数据
|
||||
legend: [],
|
||||
// pie图数据
|
||||
seriesData: []
|
||||
seriesData: [
|
||||
{
|
||||
name: '机动车',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '非机动车',
|
||||
value: 0
|
||||
}, {
|
||||
name: '行人',
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
drawPie() {
|
||||
|
|
@ -49,11 +59,11 @@ export default {
|
|||
'#FFC722'
|
||||
];
|
||||
let option = {
|
||||
title:{
|
||||
show:true,
|
||||
text:this.componentName + '-' + this.chartName + '-' + '饼状图',
|
||||
textStyle:{
|
||||
lineHeight:'30',
|
||||
title: {
|
||||
show: true,
|
||||
text: this.componentName + '-' + this.chartName + '-' + '饼状图',
|
||||
textStyle: {
|
||||
lineHeight: '30',
|
||||
}
|
||||
},
|
||||
color: color,
|
||||
|
|
@ -111,7 +121,7 @@ export default {
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.drawPie();
|
||||
},
|
||||
watch: {
|
||||
typeValue: {
|
||||
|
|
@ -120,6 +130,7 @@ export default {
|
|||
this.legend = newVal.type_data.map(ele => {
|
||||
return ele.name
|
||||
});
|
||||
this.seriesData = []
|
||||
newVal.type_data.forEach(ele => {
|
||||
this.seriesData.push({
|
||||
name: ele.name,
|
||||
|
|
@ -127,13 +138,11 @@ export default {
|
|||
})
|
||||
})
|
||||
this.drawPie()
|
||||
this.seriesData = []
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
@ -69,6 +69,14 @@
|
|||
|
||||
</div>
|
||||
<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">
|
||||
<tableShow :msg="dataArr" :type="triggerType" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue