bug修改
This commit is contained in:
parent
0bf3950dac
commit
46a525d5b8
|
|
@ -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);
|
||||
|
|
@ -117,6 +121,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let myChart = this.chart;
|
||||
let option = {
|
||||
color: ["#7262FD", "#FC5A5A"],
|
||||
|
|
|
|||
|
|
@ -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,6 +92,7 @@ export default {
|
|||
this.chartData.xData = this.extractKeyValues(val, 'time').reverse();
|
||||
let seriesArr = this.extractKeyValues(val, 'type_data');
|
||||
const transformedData = [];
|
||||
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) => {
|
||||
|
|
@ -106,9 +107,14 @@ export default {
|
|||
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);
|
||||
});
|
||||
}
|
||||
|
||||
transformedData.push({
|
||||
name: '总数',
|
||||
value: totalCountList
|
||||
|
|
@ -141,6 +147,7 @@ export default {
|
|||
let seriesArr = this.extractKeyValues(val, 'type_data');
|
||||
// console.log('seriesArr-固定时刻', seriesArr);
|
||||
const transformedData = [];
|
||||
if (seriesArr && seriesArr.length > 0) {
|
||||
for (let i = 0; i < seriesArr[0].length; i++) {
|
||||
const item = seriesArr[0][i];
|
||||
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
|
||||
|
|
@ -157,6 +164,7 @@ export default {
|
|||
value: valueList
|
||||
});
|
||||
}
|
||||
}
|
||||
// console.log('transformedData-1',transformedData)
|
||||
const totalCountList = transformedData[0].value.map((_, i) => {
|
||||
return transformedData.reduce((sum, curr) => sum + curr.value[i], 0);
|
||||
|
|
@ -194,6 +202,7 @@ export default {
|
|||
// console.log('固定间隔-类型-seriesArr-', seriesArr);
|
||||
// console.log('固定间隔-类型-xData-', this.chartData.xData);
|
||||
const transformedData = [];
|
||||
if (seriesArr && seriesArr.length > 0) {
|
||||
for (let i = 0; i < seriesArr[0].length; i++) {
|
||||
const item = seriesArr[0][i];
|
||||
//固定间隔主题-类型组件type_data取value字段和历史数据接口不一样，历史数据接口取quantity字段
|
||||
|
|
@ -210,10 +219,15 @@ export default {
|
|||
value: valueList
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
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,6 +322,7 @@ export default {
|
|||
var color = ['#0CD2E6', '#3751E6', '#FFC722', 'rgb(255,115,38)'];
|
||||
if (this.componentType == '类型') {
|
||||
// console.log('类型-seriesList', this.seriesList);
|
||||
if (this.seriesList.length > 0) {
|
||||
for (let i = 0; i < this.seriesList.length; i++) {
|
||||
seriesList.push({
|
||||
name: this.seriesList[i].name,
|
||||
|
|
@ -333,6 +348,7 @@ export default {
|
|||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
seriesList = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,33 +4,33 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "echartsPie", //折线图组件
|
||||
name: 'echartsPie', //折线图组件
|
||||
props: {
|
||||
intersectionName: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
}
|
||||
},
|
||||
chatShowType: {
|
||||
type: String,
|
||||
type: String
|
||||
},
|
||||
echartsRef: {
|
||||
type: String,
|
||||
type: String
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
}
|
||||
},
|
||||
timeMode: {
|
||||
type: String,
|
||||
},
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
|
|
@ -41,9 +41,9 @@ export default {
|
|||
obj.forEach((item) => {
|
||||
this.renameField(item, oldFieldName, newFieldName);
|
||||
});
|
||||
} else if (typeof obj === "object") {
|
||||
} else if (typeof obj === 'object') {
|
||||
for (let key in obj) {
|
||||
if (typeof obj[key] === "object") {
|
||||
if (typeof obj[key] === 'object') {
|
||||
this.renameField(obj[key], oldFieldName, newFieldName);
|
||||
} else if (key === oldFieldName) {
|
||||
obj[newFieldName] = obj[key];
|
||||
|
|
@ -56,54 +56,60 @@ export default {
|
|||
initEcharts() {
|
||||
let seriesData = null;
|
||||
let myChart = this.chart;
|
||||
if (this.timeMode == "实时触发") {
|
||||
if (this.timeMode == '实时触发') {
|
||||
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;
|
||||
} else if (this.timeMode == "固定时刻") {
|
||||
}
|
||||
} 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) {
|
||||
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");
|
||||
this.renameField(this.dataList[0].type_data, 'quantity', 'value');
|
||||
seriesData = this.dataList[0].type_data;
|
||||
}
|
||||
} else if (this.timeMode == "固定间隔") {
|
||||
}
|
||||
} 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) {
|
||||
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");
|
||||
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",
|
||||
'#0CD2E6',
|
||||
'#3751E6',
|
||||
'#FFC722',
|
||||
'#00FF80',
|
||||
'#FFEA00',
|
||||
'#FF7300',
|
||||
'#9500B3',
|
||||
'#3377FF',
|
||||
'#5087EC',
|
||||
'#68BBC4',
|
||||
'#58A55C',
|
||||
'#F2BD42',
|
||||
'#EE752F',
|
||||
'#D95040',
|
||||
'#14CAFB'
|
||||
];
|
||||
let option = {
|
||||
// title: {
|
||||
|
|
@ -117,10 +123,10 @@ export default {
|
|||
animation: false,
|
||||
legend: {
|
||||
top: 20,
|
||||
right: "center",
|
||||
right: 'center',
|
||||
textStyle: {},
|
||||
type: "scroll",
|
||||
width: "80%",
|
||||
type: 'scroll',
|
||||
width: '80%'
|
||||
// data: [
|
||||
// {
|
||||
// name: '流量_1-zone2-饼状图-实时触发',
|
||||
|
|
@ -129,74 +135,72 @@ export default {
|
|||
// ]
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(1, 13, 19, 0.5)",
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(1, 13, 19, 0.5)',
|
||||
borderWidth: 1,
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
type: 'shadow'
|
||||
// label: {
|
||||
// show: true,
|
||||
// },
|
||||
},
|
||||
|
||||
textStyle: {
|
||||
color: "rgba(212, 232, 254, 1)",
|
||||
color: 'rgba(212, 232, 254, 1)'
|
||||
// fontSize: fontChart(0.24),
|
||||
},
|
||||
extraCssText: "z-index:2",
|
||||
extraCssText: 'z-index:2'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "流量_1-zone2-饼状图-实时触发",
|
||||
type: "pie",
|
||||
center: ["50%", "55%"],
|
||||
radius: "70%",
|
||||
name: '流量_1-zone2-饼状图-实时触发',
|
||||
type: 'pie',
|
||||
center: ['50%', '55%'],
|
||||
radius: '70%',
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
length: 0,
|
||||
length2: 0,
|
||||
length2: 0
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: "inside",
|
||||
formatter: "{value|{c}}",
|
||||
position: 'inside',
|
||||
formatter: '{value|{c}}',
|
||||
rich: {
|
||||
value: {
|
||||
fontSize: 20,
|
||||
color: "#ffffff",
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
data: seriesData,
|
||||
},
|
||||
],
|
||||
data: seriesData
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
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";
|
||||
$dom.style.width = '440px';
|
||||
$dom.style.height = '260px';
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
this.chart = this.$echarts.getInstanceByDom(
|
||||
document.getElementById(this.echartsRef)
|
||||
);
|
||||
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
if (this.chart == null) {
|
||||
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
|
|
@ -210,43 +214,39 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.initEcharts();
|
||||
});
|
||||
},
|
||||
}
|
||||
},
|
||||
chatShowType: {
|
||||
handler: function (oldValues, newValues) {},
|
||||
handler: function (oldValues, newValues) {}
|
||||
},
|
||||
echartsRef: {
|
||||
handler: function (oldValues, newValues) {
|
||||
console.log("old", oldValues);
|
||||
console.log("newV", newValues);
|
||||
console.log('old', oldValues);
|
||||
console.log('newV', newValues);
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
this.chart = this.$echarts.getInstanceByDom(
|
||||
document.getElementById(this.echartsRef)
|
||||
);
|
||||
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)
|
||||
);
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -4,39 +4,39 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "echartsLine", //折线图组件
|
||||
name: 'echartsLine', //折线图组件
|
||||
props: {
|
||||
intersectionName: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
}
|
||||
},
|
||||
chatShowType: {
|
||||
type: String,
|
||||
type: String
|
||||
},
|
||||
echartsRef: {
|
||||
type: String,
|
||||
type: String
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
}
|
||||
},
|
||||
startName: {
|
||||
type: String,
|
||||
type: String
|
||||
},
|
||||
endName: {
|
||||
type: String,
|
||||
type: String
|
||||
},
|
||||
timeMode: {
|
||||
type: String,
|
||||
},
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
chart: null
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
|
|
@ -47,7 +47,7 @@ export default {
|
|||
odData = odData.flat();
|
||||
var chartData = [];
|
||||
var start = [];
|
||||
if (odData[0] != undefined) {
|
||||
if (odData && odData.length > 0 && odData[0] != undefined) {
|
||||
for (let i = 0; i < odData.length; i++) {
|
||||
if (odData[i].data == undefined) {
|
||||
return false;
|
||||
|
|
@ -69,7 +69,7 @@ export default {
|
|||
},
|
||||
initEcharts() {
|
||||
let dataList = null;
|
||||
if (this.timeMode == "实时触发") {
|
||||
if (this.timeMode == '实时触发') {
|
||||
let dataOd = [];
|
||||
if (this.dataList.length > 0) {
|
||||
for (let i = 0; i < this.dataList.length; i++) {
|
||||
|
|
@ -77,7 +77,7 @@ export default {
|
|||
dataList = this.ODhanlde(dataOd);
|
||||
}
|
||||
}
|
||||
} else if (this.timeMode == "固定时刻") {
|
||||
} else if (this.timeMode == '固定时刻') {
|
||||
let dataOd = [];
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
// dataOd.push(this.dataList[0][0].ob_data);
|
||||
|
|
@ -85,14 +85,17 @@ export default {
|
|||
// }
|
||||
// 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 == "固定间隔") {
|
||||
} else if (this.timeMode == '固定间隔') {
|
||||
let dataOd = [];
|
||||
// for (let i = 0; i < this.dataList.length; i++) {
|
||||
// dataOd.push(this.dataList[i].ob_data);
|
||||
|
|
@ -100,7 +103,9 @@ export default {
|
|||
// }
|
||||
// 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 {
|
||||
|
|
@ -112,104 +117,102 @@ export default {
|
|||
let option = {
|
||||
dataZoom: [
|
||||
{
|
||||
id: "dataZoomY",
|
||||
type: "slider",
|
||||
id: 'dataZoomY',
|
||||
type: 'slider',
|
||||
yAxisIndex: [0],
|
||||
startValue: 0,
|
||||
endValue: 10,
|
||||
filterMode: "empty",
|
||||
},
|
||||
filterMode: 'empty'
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
position: "top",
|
||||
position: 'top'
|
||||
},
|
||||
animation: false,
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "8%",
|
||||
bottom: "8%",
|
||||
containLabel: true,
|
||||
left: '3%',
|
||||
right: '8%',
|
||||
bottom: '8%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.startName.split(","),
|
||||
type: 'category',
|
||||
data: this.startName.split(','),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#000",
|
||||
},
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40,
|
||||
rotate: 40
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
},
|
||||
show: true
|
||||
}
|
||||
// name: "镇街",
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
data: this.endName.split(","),
|
||||
type: 'category',
|
||||
data: this.endName.split(','),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#000",
|
||||
},
|
||||
color: '#000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 40,
|
||||
rotate: 40
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
},
|
||||
show: true
|
||||
}
|
||||
// name: "",
|
||||
},
|
||||
visualMap: {
|
||||
min: 1,
|
||||
max: 50,
|
||||
calculable: true,
|
||||
orient: "horizontal",
|
||||
left: "center",
|
||||
bottom: "1%",
|
||||
text: ["50", "1"], // 文本，默认为数值文本
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
bottom: '1%',
|
||||
text: ['50', '1'], // 文本，默认为数值文本
|
||||
//color:['#20a0ff','#D2EDFF'],
|
||||
calculable: false,
|
||||
color: ["#22DDDD", "#fec42c", "#80F1BE"],
|
||||
color: ['#22DDDD', '#fec42c', '#80F1BE']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "OD图",
|
||||
type: "heatmap",
|
||||
name: 'OD图',
|
||||
type: 'heatmap',
|
||||
data: dataList,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
},
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "rgba(120, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
shadowColor: 'rgba(120, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
const $dom = document.getElementById(this.echartsRef);
|
||||
$dom.style.width = "440px";
|
||||
$dom.style.height = "260px";
|
||||
$dom.style.width = '440px';
|
||||
$dom.style.height = '260px';
|
||||
that.$nextTick(() => {
|
||||
that.chart = that.$echarts.getInstanceByDom(
|
||||
document.getElementById(this.echartsRef)
|
||||
);
|
||||
that.chart = that.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
||||
if (that.chart == null) {
|
||||
that.chart = that.$echarts.init(document.getElementById(this.echartsRef));
|
||||
}
|
||||
|
|
@ -222,65 +225,59 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.initEcharts();
|
||||
});
|
||||
},
|
||||
}
|
||||
},
|
||||
chatShowType: {
|
||||
handler: function (oldValues, newValues) {
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
this.chart = this.$echarts.getInstanceByDom(
|
||||
document.getElementById(this.echartsRef)
|
||||
);
|
||||
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);
|
||||
console.log('old', oldValues);
|
||||
console.log('newV', newValues);
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
this.chart = this.$echarts.getInstanceByDom(
|
||||
document.getElementById(this.echartsRef)
|
||||
);
|
||||
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)
|
||||
);
|
||||
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) {},
|
||||
handler: function (oldValues, newValues) {}
|
||||
},
|
||||
endName: {
|
||||
handler: function (oldValues, newValues) {},
|
||||
handler: function (oldValues, newValues) {}
|
||||
},
|
||||
timeMode: {
|
||||
handler: function (oldValues, newValues) {},
|
||||
},
|
||||
},
|
||||
handler: function (oldValues, newValues) {}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue