lixiaobang
/
TransFlow
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

bug修改

This commit is contained in:
qiudan 2023-11-08 10:49:28 +08:00
parent 0bf3950dac
commit 46a525d5b8
4 changed files with 606 additions and 588 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/sensorFusion/echartsBar.vue
View File

@ -56,7 +56,7 @@ export default {
// this.chartData.xData.push(this.dataList[0].type_data[i].name);
// }
// }
if(this.dataList.length>0&&this.dataList[0].type_data){
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
@ -66,6 +66,7 @@ export default {
this.chartData.xData.push(this.dataList[0].type_data[j].name);
}
}
}
} else if (this.timeMode == "固定时刻") {
// for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = [];
@ -82,6 +83,7 @@ export default {
// }
this.chartData.xData = [];
this.chartData.yData = [];
if(this.dataList.length>0&&this.dataList[0].type_data){
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
@ -91,6 +93,7 @@ export default {
this.chartData.xData.push(this.dataList[0].type_data[j].name);
}
}
}
} else if (this.timeMode == "固定间隔") {
// for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = [];
@ -107,6 +110,7 @@ export default {
// }
this.chartData.xData = [];
this.chartData.yData = [];
if(this.dataList.length>0&&this.dataList[0].type_data){
for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
@ -116,6 +120,7 @@ export default {
this.chartData.xData.push(this.dataList[0].type_data[j].name);
}
}
}
}
let myChart = this.chart;
let option = {

164
src/components/sensorFusion/echartsLine.vue
View File

@ -68,7 +68,7 @@ export default {
},
//数据判断处理
dataProcessing(val) {
if (val.length > 10) {
if (val && val.length > 10) {
val = val.slice(-10);
// this.typeData = this.typeData.slice(-10);
}
@ -92,23 +92,29 @@ export default {
this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
let seriesArr = this.extractKeyValues(val, 'type_data');
const transformedData = [];
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i]; //quantity
const valueList = seriesArr.map((arr) => {
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) {
t = arr[i].quantity;
}
return t;
});
transformedData.push({
name: item.name,
value: valueList
if (seriesArr && seriesArr.length > 0) {
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i]; //quantity
const valueList = seriesArr.map((arr) => {
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) {
t = arr[i].quantity;
}
return t;
});
transformedData.push({
name: item.name,
value: valueList
});
}
}
let totalCountList = 0;
if (transformedData.length > 0 && transformedData[0].value) {
totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
}
const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
transformedData.push({
name: '总数',
value: totalCountList
@ -141,21 +147,23 @@ export default {
let seriesArr = this.extractKeyValues(val, 'type_data');
// console.log('seriesArr-固定时刻', seriesArr);
const transformedData = [];
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
// const valueList = seriesArr.map((arr) => arr[i].quantity);
const valueList = seriesArr.map((arr) => {
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) {
t = arr[i].quantity;
}
return t;
});
transformedData.push({
name: item.name,
value: valueList
});
if (seriesArr && seriesArr.length > 0) {
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
// const valueList = seriesArr.map((arr) => arr[i].quantity);
const valueList = seriesArr.map((arr) => {
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) {
t = arr[i].quantity;
}
return t;
});
transformedData.push({
name: item.name,
value: valueList
});
}
}
// console.log('transformedData-1',transformedData)
const totalCountList = transformedData[0].value.map((_, i) => {
@ -194,26 +202,32 @@ export default {
// console.log('固定间隔-类型-seriesArr-', seriesArr);
// console.log('固定间隔-类型-xData-', this.chartData.xData);
const transformedData = [];
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
// const valueList = seriesArr.map((arr) => arr[i].value);
const valueList = seriesArr.map((arr) => {
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) {
t = arr[i].quantity;
}
return t;
});
transformedData.push({
name: item.name,
value: valueList
if (seriesArr && seriesArr.length > 0) {
for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
// const valueList = seriesArr.map((arr) => arr[i].value);
const valueList = seriesArr.map((arr) => {
let t = arr[i].value;
if (arr[i].quantity || arr[i].quantity === 0) {
t = arr[i].quantity;
}
return t;
});
transformedData.push({
name: item.name,
value: valueList
});
}
}
// console.log('固定间隔-类型-transformedData-1', transformedData);
let totalCountList = 0;
if (transformedData.length > 0 && transformedData[0].value) {
totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
}
// console.log('固定间隔-类型-transformedData-1', transformedData);
const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
});
transformedData.push({
name: '总数',
value: totalCountList
@ -245,7 +259,7 @@ export default {
} else if (this.componentType == '速度') {
if (this.dataList.length > 0) {
// console.log(this.dataList[0].originalSpeed,'速度速度速度速度')
if (this.dataList[0].originalSpeed >= 0) {
if (this.dataList[0].originalSpeed && this.dataList[0].originalSpeed >= 0) {
this.title = 'km/h';
} else {
this.title = 'pix/s';
@ -308,30 +322,32 @@ export default {
var color = ['#0CD2E6', '#3751E6', '#FFC722', 'rgb(255,115,38)'];
if (this.componentType == '类型') {
// console.log('类型-seriesList', this.seriesList);
for (let i = 0; i < this.seriesList.length; i++) {
seriesList.push({
name: this.seriesList[i].name,
type: 'line',
data: this.seriesList[i].value,
symbolSize: 8, //标记的大小
lineStyle: {
color: color[i],
width: 3,
shadowColor: 'rgba(255,115,38,0.17)', //设置折线阴影
shadowBlur: 5,
shadowOffsetY: 9
},
itemStyle: {
//折线拐点标志的样式
color: color[i],
borderColor: color[i],
borderWidth: 2
},
smooth: 0.4,
emphasis: {
scale: 1.5
}
});
if (this.seriesList.length > 0) {
for (let i = 0; i < this.seriesList.length; i++) {
seriesList.push({
name: this.seriesList[i].name,
type: 'line',
data: this.seriesList[i].value,
symbolSize: 8, //标记的大小
lineStyle: {
color: color[i],
width: 3,
shadowColor: 'rgba(255,115,38,0.17)', //设置折线阴影
shadowBlur: 5,
shadowOffsetY: 9
},
itemStyle: {
//折线拐点标志的样式
color: color[i],
borderColor: color[i],
borderWidth: 2
},
smooth: 0.4,
emphasis: {
scale: 1.5
}
});
}
}
} else {
seriesList = [

486
src/components/sensorFusion/echartsPie.vue
View File

@ -1,257 +1,257 @@
<template>
<div :id="echartsRef" ref="echartsPie"></div>
<div :id="echartsRef" ref="echartsPie"></div>
</template>
<script>
export default {
name: "echartsPie", //折线图组件
props: {
intersectionName: {
type: Array,
default() {
return [];
},
},
chatShowType: {
type: String,
},
echartsRef: {
type: String,
},
dataList: {
type: Array,
default() {
return [];
},
},
timeMode: {
type: String,
},
},
data() {
return {
chart: null,
};
},
created() {},
methods: {
renameField(obj, oldFieldName, newFieldName) {
if (Array.isArray(obj)) {
obj.forEach((item) => {
this.renameField(item, oldFieldName, newFieldName);
});
} else if (typeof obj === "object") {
for (let key in obj) {
if (typeof obj[key] === "object") {
this.renameField(obj[key], oldFieldName, newFieldName);
} else if (key === oldFieldName) {
obj[newFieldName] = obj[key];
delete obj[key];
}
}
}
},
//初始化页面
initEcharts() {
let seriesData = null;
let myChart = this.chart;
if (this.timeMode == "实时触发") {
seriesData = null;
this.renameField(this.dataList[0].type_data, "quantity", "value");
seriesData = this.dataList[0].type_data;
} else if (this.timeMode == "固定时刻") {
seriesData = null;
// for (let i = 0; i < this.dataList.length; i++) {
// this.renameField(this.dataList[0].type_data,'quantity','value')
// seriesData = this.dataList[0].type_data
// }
if (this.dataList[0].type_data&&this.dataList[0].type_data[0].quantity == undefined) {
this.renameField(this.dataList[0].type_data, null, null);
seriesData = this.dataList[0].type_data;
} else {
this.renameField(this.dataList[0].type_data, "quantity", "value");
seriesData = this.dataList[0].type_data;
}
} else if (this.timeMode == "固定间隔") {
seriesData = null;
// for (let i = 0; i < this.dataList.length; i++) {
// this.renameField(this.dataList[0].type_data, "quantity", "value");
// seriesData = this.dataList[0].type_data;
// }
if (this.dataList[0].type_data&&this.dataList[0].type_data[0].quantity == undefined) {
this.renameField(this.dataList[0].type_data, null, null);
seriesData = this.dataList[0].type_data;
} else {
this.renameField(this.dataList[0].type_data, "quantity", "value");
seriesData = this.dataList[0].type_data;
}
}
var color = [
"#0CD2E6",
"#3751E6",
"#FFC722",
"#00FF80",
"#FFEA00",
"#FF7300",
"#9500B3",
"#3377FF",
"#5087EC",
"#68BBC4",
"#58A55C",
"#F2BD42",
"#EE752F",
"#D95040",
"#14CAFB",
];
let option = {
// title: {
// show: true,
// text: this.componentName + '-' + this.chartName + '-' + '饼状图',
// textStyle: {
// lineHeight: '30'
// }
// },
color: color,
animation: false,
legend: {
top: 20,
right: "center",
textStyle: {},
type: "scroll",
width: "80%",
// data: [
// {
// name: '流量_1-zone2-饼状图-实时触发',
// icon: 'circle'
// }
// ]
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(1, 13, 19, 0.5)",
borderWidth: 1,
axisPointer: {
type: "shadow",
// label: {
// show: true,
// },
},
textStyle: {
color: "rgba(212, 232, 254, 1)",
// fontSize: fontChart(0.24),
},
extraCssText: "z-index:2",
},
series: [
{
name: "流量_1-zone2-饼状图-实时触发",
type: "pie",
center: ["50%", "55%"],
radius: "70%",
label: {
normal: {
show: false,
},
},
labelLine: {
show: false,
length: 0,
length2: 0,
},
label: {
normal: {
show: true,
position: "inside",
formatter: "{value|{c}}",
rich: {
value: {
fontSize: 20,
color: "#ffffff",
},
},
},
},
data: seriesData,
},
],
};
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
});
this.$nextTick(() => {
myChart.resize();
});
},
},
mounted() {
let that = this;
const $dom = document.getElementById(this.echartsRef);
$dom.style.width = "440px";
$dom.style.height = "260px";
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);
},
watch: {
intersectionName: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.initEcharts();
});
},
},
chatShowType: {
handler: function (oldValues, newValues) {},
},
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));
name: 'echartsPie', //折线图组件
props: {
intersectionName: {
type: Array,
default() {
return [];
}
that.initEcharts();
});
},
chatShowType: {
type: String
},
echartsRef: {
type: String
},
dataList: {
type: Array,
default() {
return [];
}
},
timeMode: {
type: String
}
},
data() {
return {
chart: null
};
},
created() {},
methods: {
renameField(obj, oldFieldName, newFieldName) {
if (Array.isArray(obj)) {
obj.forEach((item) => {
this.renameField(item, oldFieldName, newFieldName);
});
} else if (typeof obj === 'object') {
for (let key in obj) {
if (typeof obj[key] === 'object') {
this.renameField(obj[key], oldFieldName, newFieldName);
} else if (key === oldFieldName) {
obj[newFieldName] = obj[key];
delete obj[key];
}
}
}
},
//初始化页面
initEcharts() {
let seriesData = null;
let myChart = this.chart;
if (this.timeMode == '实时触发') {
seriesData = null;
if (this.dataList.length > 0 && this.dataList[0].type_data) {
this.renameField(this.dataList[0].type_data, 'quantity', 'value');
seriesData = this.dataList[0].type_data;
}
} else if (this.timeMode == '固定时刻') {
seriesData = null;
// for (let i = 0; i < this.dataList.length; i++) {
// this.renameField(this.dataList[0].type_data,'quantity','value')
// seriesData = this.dataList[0].type_data
// }
if (this.dataList.length > 0) {
if (this.dataList[0].type_data && this.dataList[0].type_data[0].quantity == undefined) {
this.renameField(this.dataList[0].type_data, null, null);
seriesData = this.dataList[0].type_data;
} else {
this.renameField(this.dataList[0].type_data, 'quantity', 'value');
seriesData = this.dataList[0].type_data;
}
}
} else if (this.timeMode == '固定间隔') {
seriesData = null;
// for (let i = 0; i < this.dataList.length; i++) {
// this.renameField(this.dataList[0].type_data, "quantity", "value");
// seriesData = this.dataList[0].type_data;
// }
if (this.dataList.length > 0) {
if (this.dataList[0].type_data && this.dataList[0].type_data[0].quantity == undefined) {
this.renameField(this.dataList[0].type_data, null, null);
seriesData = this.dataList[0].type_data;
} else {
this.renameField(this.dataList[0].type_data, 'quantity', 'value');
seriesData = this.dataList[0].type_data;
}
}
}
var color = [
'#0CD2E6',
'#3751E6',
'#FFC722',
'#00FF80',
'#FFEA00',
'#FF7300',
'#9500B3',
'#3377FF',
'#5087EC',
'#68BBC4',
'#58A55C',
'#F2BD42',
'#EE752F',
'#D95040',
'#14CAFB'
];
let option = {
// title: {
// show: true,
// text: this.componentName + '-' + this.chartName + '-' + '饼状图',
// textStyle: {
// lineHeight: '30'
// }
// },
color: color,
animation: false,
legend: {
top: 20,
right: 'center',
textStyle: {},
type: 'scroll',
width: '80%'
// data: [
// {
// name: '流量_1-zone2-饼状图-实时触发',
// icon: 'circle'
// }
// ]
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 1,
axisPointer: {
type: 'shadow'
// label: {
// show: true,
// },
},
textStyle: {
color: 'rgba(212, 232, 254, 1)'
// fontSize: fontChart(0.24),
},
extraCssText: 'z-index:2'
},
series: [
{
name: '流量_1-zone2-饼状图-实时触发',
type: 'pie',
center: ['50%', '55%'],
radius: '70%',
label: {
normal: {
show: false
}
},
labelLine: {
show: false,
length: 0,
length2: 0
},
label: {
normal: {
show: true,
position: 'inside',
formatter: '{value|{c}}',
rich: {
value: {
fontSize: 20,
color: '#ffffff'
}
}
}
},
data: seriesData
}
]
};
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
});
this.$nextTick(() => {
myChart.resize();
});
}
},
mounted() {
let that = this;
const $dom = document.getElementById(this.echartsRef);
$dom.style.width = '440px';
$dom.style.height = '260px';
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();
});
},
},
},
watch: {
intersectionName: {
handler: function (oldValues, newValues) {
this.$nextTick(() => {
this.initEcharts();
});
}
},
chatShowType: {
handler: function (oldValues, newValues) {}
},
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();
});
}
}
}
};
</script>
<style lang="less" scoped>
#echartsPie {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
</style>

537
src/components/sensorFusion/thermalOD.vue
View File

@ -1,291 +1,288 @@
<template>
<div :id="echartsRef" ref="echartsOD"></div>
<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[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]);
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() {},
// 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);
}
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();
});
}
} 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++) {
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++) {
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) {
mounted() {
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));
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();
});
}, 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) {},
},
},
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%;
width: 100%;
height: 100%;
}
</style>