提交
This commit is contained in:
@@ -0,0 +1,830 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="20" :style="`height:${vh}`">
|
||||
<el-col :span="12" :style="`height:${vh}`">
|
||||
<div v-loading="isLoading" id="electr1" style="width: 100%; height: 100%" />
|
||||
</el-col>
|
||||
<el-col :span="12" :style="`height:${vh}`">
|
||||
<div v-loading="isLoading" id="electr2" style="width: 100%; height: 100%" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :style="`height:${vh};position: relative;`">
|
||||
<el-radio-group v-model="radio1" class="radioGroup" size="mini" @change="change">
|
||||
<el-radio-button label="1">电压指标</el-radio-button>
|
||||
<el-radio-button label="2">电流指标</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-col :span="24" :style="`height:${vh}`">
|
||||
<div v-loading="isLoading" id="electr3" style="width: 100%; height: 100%" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import {
|
||||
getHarmonicCurrent,
|
||||
getHarmonicVoltage,
|
||||
getUnitCurrent,
|
||||
getUnitVoltage
|
||||
} from '@/api/SpecialAnalysisModuleDesign/WindFarm/ElectricityOverview'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
zoom: '',
|
||||
form: {
|
||||
id: '',
|
||||
endTime: '',
|
||||
startTime: '',
|
||||
monitorTag: '',
|
||||
type: ''
|
||||
},
|
||||
isLoading: false,
|
||||
electr1List: [],
|
||||
electr2List: [],
|
||||
electr3List: [],
|
||||
vh: undefined,
|
||||
radio1: '1',
|
||||
timeOptions: [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.info()
|
||||
},
|
||||
mounted() {
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px'
|
||||
let domID1 = document.getElementById('electr1')
|
||||
setTimeout(() => {
|
||||
;(domID1.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
|
||||
(domID1.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
||||
}, 0)
|
||||
let domID2 = document.getElementById('electr2')
|
||||
setTimeout(() => {
|
||||
;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
|
||||
(domID2.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
||||
}, 0)
|
||||
let domID3 = document.getElementById('electr3')
|
||||
setTimeout(() => {
|
||||
;(domID3.style.width = document.getElementById('app-main-in').offsetWidth + 'px'),
|
||||
(domID3.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
||||
}, 0)
|
||||
},
|
||||
info() {
|
||||
dicData('Monitoring_Labels', []).forEach(item => {
|
||||
if (item.code == 'Wind_Farm') {
|
||||
this.form.monitorTag = item.id
|
||||
}
|
||||
})
|
||||
// 字典获取数据电压等级;
|
||||
},
|
||||
change() {
|
||||
if (this.radio1 == 1) {
|
||||
//获取风电场指标总览
|
||||
getUnitVoltage(this.form).then(res => {
|
||||
this.electr3List = res.data
|
||||
this.electr3()
|
||||
})
|
||||
} else {
|
||||
//获取风电场指标总览
|
||||
getUnitCurrent(this.form).then(res => {
|
||||
this.electr3List = res.data
|
||||
this.electr3()
|
||||
})
|
||||
}
|
||||
},
|
||||
onSubmit() {
|
||||
this.isLoading = true
|
||||
this.form.startTime = this.$refs.interval.timeValue[0]
|
||||
this.form.endTime = this.$refs.interval.timeValue[1]
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
// 获取风电场指标总览-谐波电流
|
||||
getHarmonicCurrent(this.form).then(res => {
|
||||
this.isLoading = false
|
||||
this.electr1List = res.data
|
||||
this.electr1()
|
||||
})
|
||||
// 获取风电场指标总览-谐波电压
|
||||
getHarmonicVoltage(this.form).then(res => {
|
||||
this.isLoading = false
|
||||
this.electr2List = res.data
|
||||
this.electr2()
|
||||
})
|
||||
//获取风电场指标总览
|
||||
getUnitVoltage(this.form).then(res => {
|
||||
this.isLoading = false
|
||||
this.electr3List = res.data
|
||||
this.electr3()
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.form.id = data.id
|
||||
},
|
||||
electr1() {
|
||||
let echarts = require('echarts')
|
||||
let domID1 = document.getElementById('electr1')
|
||||
setTimeout(() => {
|
||||
;(domID1.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
|
||||
(domID1.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
||||
}, 0)
|
||||
|
||||
let histograms = []
|
||||
let lineCharts = []
|
||||
let nameList = []
|
||||
this.electr1List.forEach(item => {
|
||||
histograms.push(item.histograms)
|
||||
lineCharts.push(item.lineCharts)
|
||||
nameList.push(item.type)
|
||||
})
|
||||
let myChart2 = echarts.init(domID1)
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
||||
let option = {
|
||||
title: {
|
||||
text: '电流指标',
|
||||
left: 'center',
|
||||
top: '5px',
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: 'axis',
|
||||
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0
|
||||
},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// top: '25',
|
||||
// right: '25',
|
||||
// feature: {
|
||||
// saveAsImage: {}
|
||||
// }
|
||||
// },
|
||||
legend: {
|
||||
// data: ["高铁", "普铁"],
|
||||
// top: "15%",
|
||||
top: 40,
|
||||
right: '2%',
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
itemGap: 28,
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '50px',
|
||||
bottom: '40px',
|
||||
right: '50px',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
containLabel: true
|
||||
}, dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
|
||||
data: nameList
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '超标点占比:%',
|
||||
|
||||
minInterval: 1,
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '平均超标天数:天', minInterval: 1,
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '超标占比',
|
||||
type: 'bar',
|
||||
barMaxWidth: 30, // 柱状宽度
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] }
|
||||
},
|
||||
data: histograms
|
||||
},
|
||||
|
||||
{
|
||||
name: '平均超标天数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
symbolSize: 5, // 圆点大小
|
||||
symbol: 'circle',
|
||||
smooth: false, // 是否平滑曲线
|
||||
itemStyle: {
|
||||
// 折线圆点设置
|
||||
normal: {
|
||||
color: echartsColor.FigureColor[1],
|
||||
barBorderRadius: 0
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
// 折线设置
|
||||
normal: {
|
||||
show: true,
|
||||
width: 2,
|
||||
color: echartsColor.FigureColor[1]
|
||||
}
|
||||
},
|
||||
data: lineCharts
|
||||
}
|
||||
]
|
||||
}
|
||||
option && myChart2.setOption(option, true)
|
||||
window.echartsArr.push(myChart2)
|
||||
setTimeout(function () {
|
||||
myChart2.resize()
|
||||
}, 0)
|
||||
},
|
||||
electr2() {
|
||||
let echarts = require('echarts')
|
||||
let domID2 = document.getElementById('electr2')
|
||||
setTimeout(() => {
|
||||
;(domID2.style.width = document.getElementById('app-main-in').offsetWidth / 2 + 'px'),
|
||||
(domID2.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
||||
}, 0)
|
||||
let histograms = []
|
||||
let lineCharts = []
|
||||
let nameList = []
|
||||
this.electr2List.forEach(item => {
|
||||
histograms.push(item.histograms)
|
||||
lineCharts.push(item.lineCharts)
|
||||
nameList.push(item.type)
|
||||
})
|
||||
let myChart2 = echarts.init(domID2)
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
||||
let option = {
|
||||
title: {
|
||||
text: '电压指标',
|
||||
left: 'center',
|
||||
top: '5px',
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: 'axis',
|
||||
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
// data: ["高铁", "普铁"],
|
||||
// top: "15%",
|
||||
top: 40,
|
||||
right: '2%',
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
itemGap: 28,
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// top: '25',
|
||||
// right: '25',
|
||||
// feature: {
|
||||
// saveAsImage: {}
|
||||
// }
|
||||
// },
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '50px',
|
||||
bottom: '40px',
|
||||
right: '50px',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
containLabel: true
|
||||
}, dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
|
||||
data: nameList
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '超标点占比:%',
|
||||
|
||||
minInterval: 1,
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '平均超标天数:天', minInterval: 1,
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '高铁超标占比',
|
||||
type: 'bar',
|
||||
barMaxWidth: 30, // 柱状宽度
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] }
|
||||
},
|
||||
data: histograms
|
||||
},
|
||||
|
||||
{
|
||||
name: '高铁超标天数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
symbolSize: 5, // 圆点大小
|
||||
symbol: 'circle',
|
||||
smooth: false, // 是否平滑曲线
|
||||
itemStyle: {
|
||||
// 折线圆点设置
|
||||
normal: {
|
||||
color: echartsColor.FigureColor[1],
|
||||
barBorderRadius: 0
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
// 折线设置
|
||||
normal: {
|
||||
width: 2,
|
||||
color: echartsColor.FigureColor[1]
|
||||
}
|
||||
},
|
||||
data: lineCharts
|
||||
}
|
||||
]
|
||||
}
|
||||
option && myChart2.setOption(option, true)
|
||||
window.echartsArr.push(myChart2)
|
||||
setTimeout(function () {
|
||||
myChart2.resize()
|
||||
}, 0)
|
||||
},
|
||||
electr3() {
|
||||
let echarts = require('echarts')
|
||||
let domID3 = document.getElementById('electr3')
|
||||
setTimeout(() => {
|
||||
;(domID3.style.width = document.getElementById('app-main-in').offsetWidth + 'px'),
|
||||
(domID3.style.height = (window.sessionStorage.getItem('appheight') - 130) / 2 + 'px')
|
||||
}, 0)
|
||||
if (myChart2 != null && myChart2 != '' && myChart2 != undefined) {
|
||||
myChart2.dispose() //销毁
|
||||
}
|
||||
let histograms = []
|
||||
let lineCharts = []
|
||||
let nameList = []
|
||||
this.electr3List.forEach(item => {
|
||||
histograms.push(item.histograms)
|
||||
lineCharts.push(item.lineCharts)
|
||||
nameList.push(item.type)
|
||||
})
|
||||
let myChart2 = echarts.init(domID3)
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
||||
let option = {
|
||||
title: {
|
||||
text: '各单位指标',
|
||||
left: 'center',
|
||||
top: '5px',
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
//提示框组件
|
||||
trigger: 'axis',
|
||||
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0
|
||||
},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// top: '25',
|
||||
// right: '50',
|
||||
// feature: {
|
||||
// saveAsImage: {}
|
||||
// }
|
||||
// },
|
||||
legend: {
|
||||
// data: ["高铁", "普铁"],
|
||||
// top: "15%",
|
||||
top: 40,
|
||||
right: '2%',
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
itemGap: 28,
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
left: '50px',
|
||||
bottom: '40px',
|
||||
right: '80px',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
containLabel: true
|
||||
}, dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
splitArea: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
|
||||
data: nameList
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '超标点占比:%',
|
||||
|
||||
minInterval: 1,
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '平均超标天数:天', minInterval: 1,
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '超标占比',
|
||||
type: 'bar',
|
||||
barMaxWidth: 30, // 柱状宽度
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] }
|
||||
},
|
||||
data: histograms
|
||||
},
|
||||
|
||||
{
|
||||
name: '平均超标天数',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
symbolSize: 5, // 圆点大小
|
||||
symbol: 'circle',
|
||||
smooth: false, // 是否平滑曲线
|
||||
itemStyle: {
|
||||
// 折线圆点设置
|
||||
normal: {
|
||||
show: true,
|
||||
color: echartsColor.FigureColor[1],
|
||||
barBorderRadius: 0
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
// 折线设置
|
||||
normal: {
|
||||
width: 2,
|
||||
color: echartsColor.FigureColor[1]
|
||||
}
|
||||
},
|
||||
data: lineCharts
|
||||
}
|
||||
]
|
||||
}
|
||||
option && myChart2.setOption(option, true)
|
||||
window.echartsArr.push(myChart2)
|
||||
setTimeout(function () {
|
||||
myChart2.resize()
|
||||
}, 0)
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../styles/comStyle.less');
|
||||
::v-deep .el-form-item--small .el-form-item__content,
|
||||
.el-form-item--small .el-form-item__label {
|
||||
height: 32px;
|
||||
}
|
||||
::v-deep .Area {
|
||||
.el-input {
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
.radioGroup {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user