图修改
This commit is contained in:
parent
3c9bc0b0de
commit
ed3fbc8c7a
|
|
@ -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: {
|
||||
|
|
@ -138,34 +134,34 @@ export default {
|
|||
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 = [{
|
||||
this.series = [
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: '#fb864b',
|
||||
borderColor: '#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) {
|
||||
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 = []
|
||||
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)
|
||||
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>
|
||||
Loading…
Reference in New Issue