Skip to content

W
web-monitor
Commit 7e408ccf authored by yanzhongrong's avatar yanzhongrong
Browse files
Options

pic analysis

parent e0543186
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 91 deletions
src/views/history/leakyCableStatus/components/picAnalysis.vue
View file @ 7e408ccf
<template> <template>
<el-dialog title="驻波比图形分析" :visible.sync="visible" width="60%" @close="cancel"> <el-dialog
<div ref="chartLine" class="chartLine"></div> title="驻波比图形分析"
:visible.sync="visible"
width="1060px"
@close="cancel"
>
<div v-show="listData.length" ref="chartLine" class="chartLine" :key="componentKeys"></div>
<div v-show="!listData.length" style="font-size:20px;text-align:center"><i class="el-icon-warning" style="color:orange;margin-right:10px" />暂无数据</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="cancel">关 闭</el-button> <el-button @click="cancel">关 闭</el-button>
</span> </span>
...@@ -24,6 +30,8 @@ export default { ...@@ -24,6 +30,8 @@ export default {
data() { data() {
return { return {
visible: false, visible: false,
componentKeys: 0,
listData: []
} }
}, },
watch: { watch: {
...@@ -35,6 +43,7 @@ export default { ...@@ -35,6 +43,7 @@ export default {
}, },
curInfo(newV) { curInfo(newV) {
if (newV) { if (newV) {
this.componentKeys++
this.init() this.init()
} }
} }
...@@ -45,121 +54,126 @@ export default { ...@@ -45,121 +54,126 @@ export default {
let keyList = Object.keys(res.collect) let keyList = Object.keys(res.collect)
let valueList = Object.values(res.collect) let valueList = Object.values(res.collect)
let finallyList = [] let finallyList = []
let obj = {} for (var i = 0; i < keyList.length; i++) {
let source = [] let obj = {}
if(keyList.length == 1) { let source = []
valueList[0].map(item => { valueList[i].map(item => {
let arr = [] let arr = []
arr.push(parseInt(item.distance),parseInt(item.value)) arr.push(parseInt(item.distance), parseInt(item.value))
source.push(arr) source.push(arr)
}) })
obj.dimensions = ['float', `${keyList[0]}`] obj.dimensions = [`${keyList[i]}`]
obj.source = source obj.source = source
finallyList.push(obj) finallyList.push(obj)
finallyList.length ? this.getLine(finallyList) : ''
} else {
for(var i = 0; i < keyList.length; i++) {
let obj = {}
let source = []
valueList[i].map(item => {
let arr = []
arr.push(parseInt(item.distance), parseInt(item.value))
source.push(arr)
})
obj.dimensions = ['', `${keyList[i]}`]
obj.source = source
finallyList.push(obj)
}
console.log(finallyList, 'finallyList');
finallyList.length ? this.getLine(finallyList) : ''
} }
this.listData = finallyList
finallyList.length ? this.getLine(finallyList) : ''
}) })
}, },
getLine(data) { getLine(data) {
this.myChartLine = echarts.init(this.$refs.chartLine) if(data.length) {
let option = { this.myChartLine = echarts.init(this.$refs.chartLine)
legend: {}, let option = {
tooltip: {}, legend: {},
dataset: data, tooltip: {
xAxis: { trigger: 'axis',
type: "value", formatter: function (params) {
boundaryGap: false, if (params.length > 1) {
axisLabel: { let str = params[0].data[0] + "<br />"
//show:true, params.forEach(item => {
// interval:2 str += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + item.color + '"></span>'
// rotate:60, + '<span style="display:inline-block;width:70px;margin-right:5px;">' + item.seriesName + '</span>'
color: "#30eee9", + " 驻波比"
}, + '<span style="font-weight:700;">' + item.data[1] + "</span><br />";
axisLine: { })
show: true, return str;
lineStyle: { } else {
color: "#397cbc", let str = params[0].data[0] + "<br />"
str += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + params[0].color + '"></span>'
+ '<span style="display:inline-block;width:70px;margin-right:5px;">' + params[0].seriesName + '</span>'
+ " 驻波比"
+ '<span style="font-weight:700;">' + params[0].data[1] + "</span><br />";
return str;
}
}, },
}, },
axisTick: { dataset: data,
show: false, xAxis: {
},
splitLine: {
show: false,
lineStyle: {
color: "#195384",
},
},
},
yAxis: [
{
type: "value", type: "value",
name: "", boundaryGap: false,
min: 0,
axisLabel: { axisLabel: {
formatter: "{value}", color: "#30eee9",
textStyle: {
color: "#2ad1d2",
},
}, },
axisLine: { axisLine: {
show: true,
lineStyle: { lineStyle: {
color: "#27b4c2", color: "#397cbc",
}, },
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
splitLine: { splitLine: {
show: true, show: false,
lineStyle: { lineStyle: {
color: "#195384", color: "#195384",
}, },
}, },
}, },
], yAxis: [
// Declare several bar series, each will be mapped {
// to a column of dataset.source by default. type: "value",
series: [ name: "",
{ min: 0,
type: 'line', axisLabel: {
datasetIndex: 0 formatter: "{value}",
}, textStyle: {
{ color: "#2ad1d2",
type: 'line', },
datasetIndex: 1 },
}, { axisLine: {
type: 'line', lineStyle: {
datasetIndex: 2 color: "#27b4c2",
}, { },
type: 'line', },
datasetIndex: 3 axisTick: {
}, { show: false,
type: 'line', },
datasetIndex: 4 splitLine: {
} show: true,
] lineStyle: {
}; color: "#195384",
this.lineOption = option },
this.myChartLine.setOption(option) },
// }) },
],
series: [
{
type: 'line',
datasetIndex: 0
},
{
type: 'line',
datasetIndex: 1
}, {
type: 'line',
datasetIndex: 2
}, {
type: 'line',
datasetIndex: 3
}, {
type: 'line',
datasetIndex: 4
}
]
};
this.lineOption = option
this.myChartLine.setOption(option)
window.addEventListener("resize", () => {
this.myChartLine.resize()
})
}
}, },
cancel() { cancel() {
this.visible = false this.visible = false
...@@ -171,7 +185,7 @@ export default { ...@@ -171,7 +185,7 @@ export default {
<style> <style>
.chartLine { .chartLine {
width: 100%; width: 1000px;
height: 500px; height: 500px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment