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); // 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++) { for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) { if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity); 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); this.chartData.xData.push(this.dataList[0].type_data[j].name);
} }
} }
}
} else if (this.timeMode == "固定时刻") { } else if (this.timeMode == "固定时刻") {
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = []; // this.chartData.xData = [];
@ -82,6 +83,7 @@ export default {
// } // }
this.chartData.xData = []; this.chartData.xData = [];
this.chartData.yData = []; 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++) { for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) { if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity); 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); this.chartData.xData.push(this.dataList[0].type_data[j].name);
} }
} }
}
} else if (this.timeMode == "固定间隔") { } else if (this.timeMode == "固定间隔") {
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
// this.chartData.xData = []; // this.chartData.xData = [];
@ -107,6 +110,7 @@ export default {
// } // }
this.chartData.xData = []; this.chartData.xData = [];
this.chartData.yData = []; 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++) { for (let j = 0; j < this.dataList[0].type_data.length; j++) {
if (this.dataList[0].type_data[j].value == undefined) { if (this.dataList[0].type_data[j].value == undefined) {
this.chartData.yData.push(this.dataList[0].type_data[j].quantity); this.chartData.yData.push(this.dataList[0].type_data[j].quantity);
@ -117,6 +121,7 @@ export default {
} }
} }
} }
}
let myChart = this.chart; let myChart = this.chart;
let option = { let option = {
color: ["#7262FD", "#FC5A5A"], color: ["#7262FD", "#FC5A5A"],

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

@ -68,7 +68,7 @@ export default {
}, },
//数据判断处理 //数据判断处理
dataProcessing(val) { dataProcessing(val) {
if (val.length > 10) { if (val && val.length > 10) {
val = val.slice(-10); val = val.slice(-10);
// this.typeData = this.typeData.slice(-10); // this.typeData = this.typeData.slice(-10);
} }
@ -92,6 +92,7 @@ export default {
this.chartData.xData = this.extractKeyValues(val, 'time').reverse(); this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
let seriesArr = this.extractKeyValues(val, 'type_data'); let seriesArr = this.extractKeyValues(val, 'type_data');
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) {
for (let i = 0; i < seriesArr[0].length; i++) { for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i]; //quantity const item = seriesArr[0][i]; //quantity
const valueList = seriesArr.map((arr) => { const valueList = seriesArr.map((arr) => {
@ -106,9 +107,14 @@ export default {
value: valueList value: valueList
}); });
} }
const totalCountList = transformedData[0].value.map((_, i) => { }
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); return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
}); });
}
transformedData.push({ transformedData.push({
name: '总数', name: '总数',
value: totalCountList value: totalCountList
@ -141,6 +147,7 @@ export default {
let seriesArr = this.extractKeyValues(val, 'type_data'); let seriesArr = this.extractKeyValues(val, 'type_data');
// console.log('seriesArr-固定时刻', seriesArr); // console.log('seriesArr-固定时刻', seriesArr);
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) {
for (let i = 0; i < seriesArr[0].length; i++) { for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i]; const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段 //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
@ -157,6 +164,7 @@ export default {
value: valueList value: valueList
}); });
} }
}
// console.log('transformedData-1',transformedData) // console.log('transformedData-1',transformedData)
const totalCountList = transformedData[0].value.map((_, i) => { const totalCountList = transformedData[0].value.map((_, i) => {
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0); return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
@ -194,6 +202,7 @@ export default {
// console.log('固定间隔-类型-seriesArr-', seriesArr); // console.log('固定间隔-类型-seriesArr-', seriesArr);
// console.log('固定间隔-类型-xData-', this.chartData.xData); // console.log('固定间隔-类型-xData-', this.chartData.xData);
const transformedData = []; const transformedData = [];
if (seriesArr && seriesArr.length > 0) {
for (let i = 0; i < seriesArr[0].length; i++) { for (let i = 0; i < seriesArr[0].length; i++) {
const item = seriesArr[0][i]; const item = seriesArr[0][i];
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段 //固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
@ -210,10 +219,15 @@ export default {
value: valueList value: valueList
}); });
} }
}
// console.log('固定间隔-类型-transformedData-1', transformedData); // console.log('固定间隔-类型-transformedData-1', transformedData);
const totalCountList = transformedData[0].value.map((_, i) => { 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); return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
}); });
}
transformedData.push({ transformedData.push({
name: '总数', name: '总数',
value: totalCountList value: totalCountList
@ -245,7 +259,7 @@ export default {
} else if (this.componentType == '速度') { } else if (this.componentType == '速度') {
if (this.dataList.length > 0) { if (this.dataList.length > 0) {
// console.log(this.dataList[0].originalSpeed,'速度速度速度速度') // 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'; this.title = 'km/h';
} else { } else {
this.title = 'pix/s'; this.title = 'pix/s';
@ -308,6 +322,7 @@ export default {
var color = ['#0CD2E6', '#3751E6', '#FFC722', 'rgb(255,115,38)']; var color = ['#0CD2E6', '#3751E6', '#FFC722', 'rgb(255,115,38)'];
if (this.componentType == '类型') { if (this.componentType == '类型') {
// console.log('类型-seriesList', this.seriesList); // console.log('类型-seriesList', this.seriesList);
if (this.seriesList.length > 0) {
for (let i = 0; i < this.seriesList.length; i++) { for (let i = 0; i < this.seriesList.length; i++) {
seriesList.push({ seriesList.push({
name: this.seriesList[i].name, name: this.seriesList[i].name,
@ -333,6 +348,7 @@ export default {
} }
}); });
} }
}
} else { } else {
seriesList = [ seriesList = [
{ {

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

@ -4,33 +4,33 @@
<script> <script>
export default { export default {
name: "echartsPie", //折线图组件 name: 'echartsPie', //折线图组件
props: { props: {
intersectionName: { intersectionName: {
type: Array, type: Array,
default() { default() {
return []; return [];
}, }
}, },
chatShowType: { chatShowType: {
type: String, type: String
}, },
echartsRef: { echartsRef: {
type: String, type: String
}, },
dataList: { dataList: {
type: Array, type: Array,
default() { default() {
return []; return [];
}, }
}, },
timeMode: { timeMode: {
type: String, type: String
}, }
}, },
data() { data() {
return { return {
chart: null, chart: null
}; };
}, },
created() {}, created() {},
@ -41,9 +41,9 @@ export default {
obj.forEach((item) => { obj.forEach((item) => {
this.renameField(item, oldFieldName, newFieldName); this.renameField(item, oldFieldName, newFieldName);
}); });
} else if (typeof obj === "object") { } else if (typeof obj === 'object') {
for (let key in obj) { for (let key in obj) {
if (typeof obj[key] === "object") { if (typeof obj[key] === 'object') {
this.renameField(obj[key], oldFieldName, newFieldName); this.renameField(obj[key], oldFieldName, newFieldName);
} else if (key === oldFieldName) { } else if (key === oldFieldName) {
obj[newFieldName] = obj[key]; obj[newFieldName] = obj[key];
@ -56,54 +56,60 @@ export default {
initEcharts() { initEcharts() {
let seriesData = null; let seriesData = null;
let myChart = this.chart; let myChart = this.chart;
if (this.timeMode == "实时触发") { if (this.timeMode == '实时触发') {
seriesData = null; seriesData = null;
this.renameField(this.dataList[0].type_data, "quantity", "value"); 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; seriesData = this.dataList[0].type_data;
} else if (this.timeMode == "固定时刻") { }
} else if (this.timeMode == '固定时刻') {
seriesData = null; seriesData = null;
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
// this.renameField(this.dataList[0].type_data,'quantity','value') // this.renameField(this.dataList[0].type_data,'quantity','value')
// seriesData = this.dataList[0].type_data // seriesData = this.dataList[0].type_data
// } // }
if (this.dataList[0].type_data&&this.dataList[0].type_data[0].quantity == undefined) { 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); this.renameField(this.dataList[0].type_data, null, null);
seriesData = this.dataList[0].type_data; seriesData = this.dataList[0].type_data;
} else { } else {
this.renameField(this.dataList[0].type_data, "quantity", "value"); this.renameField(this.dataList[0].type_data, 'quantity', 'value');
seriesData = this.dataList[0].type_data; seriesData = this.dataList[0].type_data;
} }
} else if (this.timeMode == "固定间隔") { }
} else if (this.timeMode == '固定间隔') {
seriesData = null; seriesData = null;
// for (let i = 0; i < this.dataList.length; i++) { // for (let i = 0; i < this.dataList.length; i++) {
// this.renameField(this.dataList[0].type_data, "quantity", "value"); // this.renameField(this.dataList[0].type_data, "quantity", "value");
// seriesData = this.dataList[0].type_data; // seriesData = this.dataList[0].type_data;
// } // }
if (this.dataList[0].type_data&&this.dataList[0].type_data[0].quantity == undefined) { 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); this.renameField(this.dataList[0].type_data, null, null);
seriesData = this.dataList[0].type_data; seriesData = this.dataList[0].type_data;
} else { } else {
this.renameField(this.dataList[0].type_data, "quantity", "value"); this.renameField(this.dataList[0].type_data, 'quantity', 'value');
seriesData = this.dataList[0].type_data; seriesData = this.dataList[0].type_data;
} }
} }
}
var color = [ var color = [
"#0CD2E6", '#0CD2E6',
"#3751E6", '#3751E6',
"#FFC722", '#FFC722',
"#00FF80", '#00FF80',
"#FFEA00", '#FFEA00',
"#FF7300", '#FF7300',
"#9500B3", '#9500B3',
"#3377FF", '#3377FF',
"#5087EC", '#5087EC',
"#68BBC4", '#68BBC4',
"#58A55C", '#58A55C',
"#F2BD42", '#F2BD42',
"#EE752F", '#EE752F',
"#D95040", '#D95040',
"#14CAFB", '#14CAFB'
]; ];
let option = { let option = {
// title: { // title: {
@ -117,10 +123,10 @@ export default {
animation: false, animation: false,
legend: { legend: {
top: 20, top: 20,
right: "center", right: 'center',
textStyle: {}, textStyle: {},
type: "scroll", type: 'scroll',
width: "80%", width: '80%'
// data: [ // data: [
// { // {
// name: '流量_1-zone2-饼状图-实时触发', // name: '流量_1-zone2-饼状图-实时触发',
@ -129,74 +135,72 @@ export default {
// ] // ]
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: 'axis',
backgroundColor: "rgba(1, 13, 19, 0.5)", backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 1, borderWidth: 1,
axisPointer: { axisPointer: {
type: "shadow", type: 'shadow'
// label: { // label: {
// show: true, // show: true,
// }, // },
}, },
textStyle: { textStyle: {
color: "rgba(212, 232, 254, 1)", color: 'rgba(212, 232, 254, 1)'
// fontSize: fontChart(0.24), // fontSize: fontChart(0.24),
}, },
extraCssText: "z-index:2", extraCssText: 'z-index:2'
}, },
series: [ series: [
{ {
name: "流量_1-zone2-饼状图-实时触发", name: '流量_1-zone2-饼状图-实时触发',
type: "pie", type: 'pie',
center: ["50%", "55%"], center: ['50%', '55%'],
radius: "70%", radius: '70%',
label: { label: {
normal: { normal: {
show: false, show: false
}, }
}, },
labelLine: { labelLine: {
show: false, show: false,
length: 0, length: 0,
length2: 0, length2: 0
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: "inside", position: 'inside',
formatter: "{value|{c}}", formatter: '{value|{c}}',
rich: { rich: {
value: { value: {
fontSize: 20, fontSize: 20,
color: "#ffffff", color: '#ffffff'
}
}
}
}, },
}, data: seriesData
}, }
}, ]
data: seriesData,
},
],
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener("resize", () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
}); });
this.$nextTick(() => { this.$nextTick(() => {
myChart.resize(); myChart.resize();
}); });
}, }
}, },
mounted() { mounted() {
let that = this; let that = this;
const $dom = document.getElementById(this.echartsRef); const $dom = document.getElementById(this.echartsRef);
$dom.style.width = "440px"; $dom.style.width = '440px';
$dom.style.height = "260px"; $dom.style.height = '260px';
setTimeout(() => { setTimeout(() => {
that.$nextTick(() => { that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom( this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
document.getElementById(this.echartsRef)
);
if (this.chart == null) { if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
} }
@ -210,43 +214,39 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.initEcharts(); this.initEcharts();
}); });
}, }
}, },
chatShowType: { chatShowType: {
handler: function (oldValues, newValues) {}, handler: function (oldValues, newValues) {}
}, },
echartsRef: { echartsRef: {
handler: function (oldValues, newValues) { handler: function (oldValues, newValues) {
console.log("old", oldValues); console.log('old', oldValues);
console.log("newV", newValues); console.log('newV', newValues);
let that = this; let that = this;
setTimeout(() => { setTimeout(() => {
that.$nextTick(() => { that.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom( this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
document.getElementById(this.echartsRef)
);
if (this.chart == null) { if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
} }
that.initEcharts(); that.initEcharts();
}); });
}, 300); }, 300);
}, }
}, },
dataList: { dataList: {
handler: function (oldValues, newValues) { handler: function (oldValues, newValues) {
this.$nextTick(() => { this.$nextTick(() => {
this.chart = this.$echarts.getInstanceByDom( this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
document.getElementById(this.echartsRef)
);
if (this.chart == null) { if (this.chart == null) {
this.chart = this.$echarts.init(document.getElementById(this.echartsRef)); this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
} }
this.initEcharts(); this.initEcharts();
}); });
}, }
}, }
}, }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

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

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