289 lines
9.8 KiB
Vue
289 lines
9.8 KiB
Vue
<template>
|
|
<div :id="echartsRef" ref="echartsOD"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'echartsLine', //折线图组件
|
|
props: {
|
|
intersectionName: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
chatShowType: {
|
|
type: String
|
|
},
|
|
echartsRef: {
|
|
type: String
|
|
},
|
|
dataList: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
startName: {
|
|
type: String
|
|
},
|
|
endName: {
|
|
type: String
|
|
},
|
|
timeMode: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null
|
|
};
|
|
},
|
|
created() {},
|
|
|
|
methods: {
|
|
//处理od组件数据
|
|
ODhanlde(odData) {
|
|
odData = odData.flat();
|
|
var chartData = [];
|
|
var start = [];
|
|
if (odData && odData.length > 0 && odData[0] != undefined) {
|
|
for (let i = 0; i < odData.length; i++) {
|
|
if (odData[i].data == undefined) {
|
|
return false;
|
|
} else {
|
|
let item = odData[i].data;
|
|
for (let j = 0; j < item.length; j++) {
|
|
start.push(item[j].start);
|
|
// 数组去重
|
|
// od图的数据
|
|
chartData.push([i, j, item[j].quantity]);
|
|
// console.log([i,j,item[j].val]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// this.thermalChartData = chartData
|
|
return chartData;
|
|
},
|
|
initEcharts() {
|
|
let dataList = null;
|
|
if (this.timeMode == '实时触发') {
|
|
let dataOd = [];
|
|
if (this.dataList.length > 0) {
|
|
for (let i = 0; i < this.dataList.length; i++) {
|
|
dataOd.push(this.dataList[i].ob_data);
|
|
dataList = this.ODhanlde(dataOd);
|
|
}
|
|
}
|
|
} else if (this.timeMode == '固定时刻') {
|
|
let dataOd = [];
|
|
// for (let i = 0; i < this.dataList.length; i++) {
|
|
// dataOd.push(this.dataList[0][0].ob_data);
|
|
// dataList = this.ODhanlde(dataOd);
|
|
// }
|
|
// if (this.dataList[0][0] == undefined) {
|
|
// for (let i = 0; i < this.dataList.length; i++) {
|
|
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
|
|
dataOd.push(this.dataList[0].ob_data);
|
|
}
|
|
|
|
dataList = this.ODhanlde(dataOd);
|
|
// }
|
|
// } else {
|
|
// dataOd.push(this.dataList[0][0].ob_data);
|
|
// dataList = this.ODhanlde(dataOd);
|
|
// }
|
|
} else if (this.timeMode == '固定间隔') {
|
|
let dataOd = [];
|
|
// for (let i = 0; i < this.dataList.length; i++) {
|
|
// dataOd.push(this.dataList[i].ob_data);
|
|
// dataList = this.ODhanlde(dataOd);
|
|
// }
|
|
// if (this.dataList[0][0] == undefined) {
|
|
// for (let i = 0; i < this.dataList.length; i++) {
|
|
if (this.dataList.length > 0 && this.dataList[0].ob_data) {
|
|
dataOd.push(this.dataList[0].ob_data);
|
|
}
|
|
dataList = this.ODhanlde(dataOd);
|
|
// }
|
|
// } else {
|
|
// dataOd.push(this.dataList[0][0].ob_data);
|
|
// dataList = this.ODhanlde(dataOd);
|
|
// }
|
|
}
|
|
let myChart = this.chart;
|
|
let option = {
|
|
dataZoom: [
|
|
{
|
|
id: 'dataZoomY',
|
|
type: 'slider',
|
|
yAxisIndex: [0],
|
|
startValue: 0,
|
|
endValue: 10,
|
|
filterMode: 'empty'
|
|
}
|
|
],
|
|
tooltip: {
|
|
position: 'top'
|
|
},
|
|
animation: false,
|
|
grid: {
|
|
left: '3%',
|
|
right: '8%',
|
|
bottom: '8%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: this.startName.split(','),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#000'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 40
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
// name: "镇街",
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: this.endName.split(','),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#000'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 40
|
|
},
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
// name: "",
|
|
},
|
|
visualMap: {
|
|
min: 1,
|
|
max: 50,
|
|
calculable: true,
|
|
orient: 'horizontal',
|
|
left: 'center',
|
|
bottom: '1%',
|
|
text: ['50', '1'], // 文本，默认为数值文本
|
|
//color:['#20a0ff','#D2EDFF'],
|
|
calculable: false,
|
|
color: ['#22DDDD', '#fec42c', '#80F1BE']
|
|
},
|
|
series: [
|
|
{
|
|
name: 'OD图',
|
|
type: 'heatmap',
|
|
data: dataList,
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
},
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowColor: 'rgba(120, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize', () => {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
const $dom = document.getElementById(this.echartsRef);
|
|
$dom.style.width = '440px';
|
|
$dom.style.height = '260px';
|
|
that.$nextTick(() => {
|
|
that.chart = that.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (that.chart == null) {
|
|
that.chart = that.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
that.initEcharts();
|
|
});
|
|
},
|
|
watch: {
|
|
intersectionName: {
|
|
handler: function (oldValues, newValues) {
|
|
this.$nextTick(() => {
|
|
this.initEcharts();
|
|
});
|
|
}
|
|
},
|
|
chatShowType: {
|
|
handler: function (oldValues, newValues) {
|
|
let that = this;
|
|
setTimeout(() => {
|
|
that.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
that.initEcharts();
|
|
});
|
|
}, 300);
|
|
}
|
|
},
|
|
echartsRef: {
|
|
handler: function (oldValues, newValues) {
|
|
console.log('old', oldValues);
|
|
console.log('newV', newValues);
|
|
let that = this;
|
|
setTimeout(() => {
|
|
that.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
that.initEcharts();
|
|
});
|
|
}, 300);
|
|
}
|
|
},
|
|
dataList: {
|
|
handler: function (oldValues, newValues) {
|
|
this.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
this.initEcharts();
|
|
});
|
|
}
|
|
},
|
|
startName: {
|
|
handler: function (oldValues, newValues) {}
|
|
},
|
|
endName: {
|
|
handler: function (oldValues, newValues) {}
|
|
},
|
|
timeMode: {
|
|
handler: function (oldValues, newValues) {}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
#echartsOD {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|