|
|
|
@ -1,8 +1,8 @@ |
|
|
|
<template> |
|
|
|
<div class='congestion'> |
|
|
|
<div class="congestion"> |
|
|
|
<WgtTitle :title="'事件源分析'"></WgtTitle> |
|
|
|
<div class="board"> |
|
|
|
<div class="charts keep-ratio " id="channelAnalytics"></div> |
|
|
|
<div class="charts keep-ratio" id="channelAnalytics"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -11,46 +11,42 @@ |
|
|
|
import WgtTitle from "@screen/pages/perception/widgets/title"; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
import chartsStatistics from "./assets/charts"; |
|
|
|
import { eventSourceRatio } from "@/api/event/governanceAnalysis" |
|
|
|
import { eventSourceRatio } from "@/api/event/governanceAnalysis"; |
|
|
|
export default { |
|
|
|
name: 'RailWayDay', |
|
|
|
name: "RailWayDay", |
|
|
|
components: { |
|
|
|
WgtTitle |
|
|
|
WgtTitle, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
} |
|
|
|
return {}; |
|
|
|
}, |
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
created() {}, |
|
|
|
methods: { |
|
|
|
getEventSourceRatio() { |
|
|
|
return eventSourceRatio().then((response) => { |
|
|
|
console.log("response", response) |
|
|
|
let data = [] |
|
|
|
let total = null |
|
|
|
let nameData = [] |
|
|
|
console.log("response", response); |
|
|
|
let data = []; |
|
|
|
let total = null; |
|
|
|
let nameData = []; |
|
|
|
const newObj = { value: 1, name: "" }; |
|
|
|
for (let i = 0; i < response.data.length; i++) { |
|
|
|
data.push({ |
|
|
|
value: response.data[i].num, |
|
|
|
name: response.data[i].eventSourceName |
|
|
|
}) |
|
|
|
name: response.data[i].eventSourceName, |
|
|
|
}); |
|
|
|
total += response.data[i].num; |
|
|
|
} |
|
|
|
console.log("total", total) |
|
|
|
console.log("total", total); |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
// if (i % 2 === 0) { |
|
|
|
// data.splice(i + 1, 0, newObj) |
|
|
|
// } |
|
|
|
if (data[i].name != "") { |
|
|
|
nameData.push(data[i].name) |
|
|
|
nameData.push(data[i].name); |
|
|
|
} |
|
|
|
} |
|
|
|
console.log(6666, data, nameData) |
|
|
|
console.log(6666, data, nameData); |
|
|
|
chartsStatistics.legend.formatter = function (name) { |
|
|
|
let tarValue = 0; |
|
|
|
for (let i = 0; i < response.data.length; i++) { |
|
|
|
@ -59,30 +55,30 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2); |
|
|
|
return `{text|${name}} {number|${percert}%}`; |
|
|
|
return `{text|${name}} {number|${tarValue} 起 } {number|${percert}%}`; |
|
|
|
}; |
|
|
|
chartsStatistics.legend.data = nameData; |
|
|
|
chartsStatistics.title[0].text = total; |
|
|
|
// chartsStatistics.tooltip.show = false; |
|
|
|
// chartsStatistics.series[1].data[0].value = total; |
|
|
|
chartsStatistics.series[2].data = data; |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
async mounted() { |
|
|
|
await this.getEventSourceRatio() |
|
|
|
await this.getEventSourceRatio(); |
|
|
|
setTimeout(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
var myChart = echarts.init(document.getElementById('channelAnalytics')); |
|
|
|
var myChart = echarts.init(document.getElementById("channelAnalytics")); |
|
|
|
|
|
|
|
myChart.setOption(chartsStatistics); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.congestion { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
@ -94,11 +90,15 @@ export default { |
|
|
|
border-radius: 5px 5px 5px 5px; |
|
|
|
opacity: 1; |
|
|
|
border: 1px solid; |
|
|
|
border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1; |
|
|
|
border-image: linear-gradient( |
|
|
|
360deg, |
|
|
|
rgba(55, 231, 255, 0.3), |
|
|
|
rgba(55, 231, 255, 0) |
|
|
|
) |
|
|
|
1 1; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -107,4 +107,3 @@ export default { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhangzhang
12 months ago