微调
This commit is contained in:
guanj
@@ -1,293 +1,293 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<my-echart class="bars_w" :options="areaStatistics" />
|
<my-echart class="bars_w" :options="areaStatistics" />
|
||||||
<div class="separate">
|
<div class="separate">
|
||||||
<my-echart class="bars_w" :options="voltageStatistics" />
|
<my-echart class="bars_w" :options="voltageStatistics" />
|
||||||
<my-echart class="bars_w" :options="monthlyStatistics" />
|
<my-echart class="bars_w" :options="monthlyStatistics" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { reactive, ref, defineExpose } from 'vue'
|
import { reactive, ref, defineExpose } from 'vue'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
let areaStatistics = ref({})
|
let areaStatistics = ref({})
|
||||||
let voltageStatistics = ref({})
|
let voltageStatistics = ref({})
|
||||||
let monthlyStatistics = ref({})
|
let monthlyStatistics = ref({})
|
||||||
|
|
||||||
const Processing = (list: any) => {
|
const Processing = (list: any) => {
|
||||||
// 区域
|
// 区域
|
||||||
let echartsndArr: string[] = []
|
let echartsndArr: string[] = []
|
||||||
let echartsArr: string[] = []
|
let echartsArr: string[] = []
|
||||||
list.areaCalculation.forEach((item: any) => {
|
list.areaCalculation.forEach((item: any) => {
|
||||||
echartsndArr.push(item.areaName)
|
echartsndArr.push(item.areaName)
|
||||||
if (item.frequency == 0) {
|
// if (item.frequency == 0) {
|
||||||
item.frequency = 1.1
|
// item.frequency = 1.1
|
||||||
} else if (item.frequency == 1) {
|
// } else if (item.frequency == 1) {
|
||||||
item.frequency = 1.3
|
// item.frequency = 1.3
|
||||||
}
|
// }
|
||||||
echartsArr.push(item.frequency)
|
echartsArr.push(item.frequency)
|
||||||
})
|
})
|
||||||
areaStatistics.value = {
|
areaStatistics.value = {
|
||||||
title: {
|
title: {
|
||||||
text: '区域'
|
text: '区域'
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
let html = '区域：' + params[0].name
|
let html = '区域：' + params[0].name
|
||||||
params.forEach((item: any) => {
|
params.forEach((item: any) => {
|
||||||
if (item.value == 1.1) {
|
if (item.value == 1.1) {
|
||||||
html += `<br/>${item.seriesName}: ${0}次`
|
html += `<br/>${item.seriesName}: ${0}次`
|
||||||
} else if (item.value == 1.3) {
|
} else if (item.value == 1.3) {
|
||||||
html += `<br/>${item.seriesName}: ${1}次`
|
html += `<br/>${item.seriesName}: ${1}次`
|
||||||
} else {
|
} else {
|
||||||
html += `<br/>${item.seriesName}: ${item.value}次`
|
html += `<br/>${item.seriesName}: ${item.value}次`
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return html
|
return html
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
data: ['暂降次数']
|
data: ['暂降次数']
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
name: '区域', // 给X轴加单位
|
name: '区域', // 给X轴加单位
|
||||||
data: echartsndArr
|
data: echartsndArr
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: '次数' // 给X轴加单位
|
name: '次数' // 给X轴加单位
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
barMinHeight: 5,
|
barMinHeight: 5,
|
||||||
barMaxWidth: 30,
|
barMaxWidth: 30,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
//这里是颜色
|
//这里是颜色
|
||||||
color: function (params: any) {
|
color: function (params: any) {
|
||||||
if (params.data == 1.1) {
|
if (params.data == 0) {
|
||||||
return '#B3B3B3'
|
return '#B3B3B3'
|
||||||
} else {
|
} else {
|
||||||
return '#07CCCA '
|
return '#07CCCA '
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
name: '暂降次数',
|
name: '暂降次数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: echartsArr
|
data: echartsArr
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 电压等级
|
// 电压等级
|
||||||
const Grade = (list: any) => {
|
const Grade = (list: any) => {
|
||||||
let echartsndArr: string[] = []
|
let echartsndArr: string[] = []
|
||||||
let echartsArr: string[] = []
|
let echartsArr: string[] = []
|
||||||
list.voltageLevelCalculation.forEach((item: any) => {
|
list.voltageLevelCalculation.forEach((item: any) => {
|
||||||
echartsndArr.push(item.voltageLevel)
|
echartsndArr.push(item.voltageLevel)
|
||||||
if (item.frequency == 0) {
|
// if (item.frequency == 0) {
|
||||||
item.frequency = 1.1
|
// item.frequency = 1.1
|
||||||
} else if (item.frequency == 1) {
|
// } else if (item.frequency == 1) {
|
||||||
item.frequency = 1.3
|
// item.frequency = 1.3
|
||||||
}
|
// }
|
||||||
echartsArr.push(item.frequency)
|
echartsArr.push(item.frequency)
|
||||||
})
|
})
|
||||||
|
|
||||||
voltageStatistics.value = {
|
voltageStatistics.value = {
|
||||||
title: {
|
title: {
|
||||||
text: '电压等级'
|
text: '电压等级'
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
let html = '电压等级：' + params[0].name
|
let html = '电压等级：' + params[0].name
|
||||||
params.forEach((item: any) => {
|
params.forEach((item: any) => {
|
||||||
if (item.value == 1.1) {
|
if (item.value == 1.1) {
|
||||||
html += `<br/>${item.seriesName}: ${0}次`
|
html += `<br/>${item.seriesName}: ${0}次`
|
||||||
} else if (item.value == 1.3) {
|
} else if (item.value == 1.3) {
|
||||||
html += `<br/>${item.seriesName}: ${1}次`
|
html += `<br/>${item.seriesName}: ${1}次`
|
||||||
} else {
|
} else {
|
||||||
html += `<br/>${item.seriesName}: ${item.value}次`
|
html += `<br/>${item.seriesName}: ${item.value}次`
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return html
|
return html
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
data: ['暂降次数']
|
data: ['暂降次数']
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
name: '电压等级',
|
name: '电压等级',
|
||||||
data: echartsndArr
|
data: echartsndArr
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: '次数' // 给X轴加单位
|
name: '次数' // 给X轴加单位
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
barMaxWidth: 30,
|
barMaxWidth: 30,
|
||||||
barMinHeight: 5,
|
barMinHeight: 5,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
//这里是颜色
|
//这里是颜色
|
||||||
color: function (params: any) {
|
color: function (params: any) {
|
||||||
if (params.data == 1.1) {
|
if (params.data == 0) {
|
||||||
return '#B3B3B3'
|
return '#B3B3B3'
|
||||||
} else {
|
} else {
|
||||||
return '#07CCCA '
|
return '#07CCCA '
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// color: echartsColor.FigureColor[0],
|
// color: echartsColor.FigureColor[0],
|
||||||
},
|
},
|
||||||
name: '暂降次数',
|
name: '暂降次数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: echartsArr
|
data: echartsArr
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//时间
|
//时间
|
||||||
const Relation = (list: any, interval: number) => {
|
const Relation = (list: any, interval: number) => {
|
||||||
let echartsndArr: string[] = []
|
let echartsndArr: string[] = []
|
||||||
let echartsArr: string[] = []
|
let echartsArr: string[] = []
|
||||||
let echartswArr: string[] = []
|
let echartswArr: string[] = []
|
||||||
list.monthCalculation.forEach((item: any, i: number) => {
|
list.monthCalculation.forEach((item: any, i: number) => {
|
||||||
if (i != 0) {
|
if (i != 0) {
|
||||||
item.month = item.month.slice(5)
|
item.month = item.month.slice(5)
|
||||||
} else if (i == 0) {
|
} else if (i == 0) {
|
||||||
let date = item.month.slice(5)
|
let date = item.month.slice(5)
|
||||||
// let t = item.month.slice(0, 4);
|
// let t = item.month.slice(0, 4);
|
||||||
// item.month = date + "\n" + "(" + t + ")";
|
// item.month = date + "\n" + "(" + t + ")";
|
||||||
item.month = date
|
item.month = date
|
||||||
}
|
}
|
||||||
|
|
||||||
echartsndArr.push(item.month)
|
echartsndArr.push(item.month)
|
||||||
// if (item.linked == 0 || item.notAssociated == 0) {
|
// if (item.linked == 0 || item.notAssociated == 0) {
|
||||||
// item.linked = 3.14159;
|
// item.linked = 3.14159;
|
||||||
// item.notAssociated = 3.14159;
|
// item.notAssociated = 3.14159;
|
||||||
// }
|
// }
|
||||||
if (item.linked == 0) {
|
// if (item.linked == 0) {
|
||||||
item.linked = 1.1
|
// item.linked = 1.1
|
||||||
} else if (item.linked == 1) {
|
// } else if (item.linked == 1) {
|
||||||
item.linked = 1.3
|
// item.linked = 1.3
|
||||||
}
|
// }
|
||||||
echartsArr.push(item.linked)
|
echartsArr.push(item.linked)
|
||||||
if (item.notAssociated == 0) {
|
// if (item.notAssociated == 0) {
|
||||||
item.notAssociated = 1.1
|
// item.notAssociated = 1.1
|
||||||
} else if (item.notAssociated == 1) {
|
// } else if (item.notAssociated == 1) {
|
||||||
item.notAssociated = 1.3
|
// item.notAssociated = 1.3
|
||||||
}
|
// }
|
||||||
echartswArr.push(item.notAssociated)
|
echartswArr.push(item.notAssociated)
|
||||||
})
|
})
|
||||||
monthlyStatistics.value = {
|
monthlyStatistics.value = {
|
||||||
title: {
|
title: {
|
||||||
text: '时间'
|
text: '时间'
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
let html = '时间：' + params[0].name
|
let html = '时间：' + params[0].name
|
||||||
params.forEach((item: any) => {
|
params.forEach((item: any) => {
|
||||||
if (item.value == 1.1) {
|
if (item.value == 1.1) {
|
||||||
html += `<br/>${item.seriesName}: ${0}次`
|
html += `<br/>${item.seriesName}: ${0}次`
|
||||||
} else if (item.value == 1.3) {
|
} else if (item.value == 1.3) {
|
||||||
html += `<br/>${item.seriesName}: ${1}次`
|
html += `<br/>${item.seriesName}: ${1}次`
|
||||||
} else {
|
} else {
|
||||||
html += `<br/>${item.seriesName}: ${item.value}次`
|
html += `<br/>${item.seriesName}: ${item.value}次`
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return html
|
return html
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
legend: {
|
legend: {
|
||||||
data: ['未关联暂降次数', '已关联处理事件']
|
data: ['未关联暂降次数', '已关联处理事件']
|
||||||
},
|
},
|
||||||
color: ['#07CCCA', '#Ff6600'],
|
color: ['#07CCCA', '#Ff6600'],
|
||||||
xAxis: {
|
xAxis: {
|
||||||
name: '月份', // 给X轴加单位
|
name: '月份', // 给X轴加单位
|
||||||
data: echartsndArr
|
data: echartsndArr
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: '次数' // 给X轴加单位
|
name: '次数' // 给X轴加单位
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '未关联暂降次数',
|
name: '未关联暂降次数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barMaxWidth: 30,
|
barMaxWidth: 30,
|
||||||
barMinHeight: 5,
|
barMinHeight: 5,
|
||||||
data: echartswArr,
|
data: echartswArr,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
label: {
|
label: {
|
||||||
// show: true, //数字开启显示
|
// show: true, //数字开启显示
|
||||||
textStyle: {
|
textStyle: {
|
||||||
//数值样式
|
//数值样式
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: 600
|
fontWeight: 600
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
color: function (params: any) {
|
color: function (params: any) {
|
||||||
if (params.data == 1.1) {
|
if (params.data == 0) {
|
||||||
return '#B3B3B3'
|
return '#B3B3B3'
|
||||||
} else {
|
} else {
|
||||||
return '#07CCCA '
|
return '#07CCCA '
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '已关联处理事件',
|
name: '已关联处理事件',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barMaxWidth: 30,
|
barMaxWidth: 30,
|
||||||
data: echartsArr,
|
data: echartsArr,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
label: {
|
label: {
|
||||||
// show: true, //数字开启显示
|
// show: true, //数字开启显示
|
||||||
textStyle: {
|
textStyle: {
|
||||||
//数值样式
|
//数值样式
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: 600
|
fontWeight: 600
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
color: function (params: any) {
|
color: function (params: any) {
|
||||||
if (params.data == 1.1) {
|
if (params.data == 0) {
|
||||||
return '#B3B3B3'
|
return '#B3B3B3'
|
||||||
} else {
|
} else {
|
||||||
return '#Ff6600'
|
return '#Ff6600'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Processing()
|
// Processing()
|
||||||
defineExpose({ Processing, Grade, Relation })
|
defineExpose({ Processing, Grade, Relation })
|
||||||
const layout = mainHeight(150) as any
|
const layout = mainHeight(150) as any
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.bars_w {
|
.bars_w {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(v-bind('layout.height') / 2);
|
height: calc(v-bind('layout.height') / 2);
|
||||||
}
|
}
|
||||||
.separate {
|
.separate {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user