<template>
|
<div id='airChartBody'>
|
<img height='20px' width='70%' style='margin-top:15px' src='~@/assets/img/weather/air-chart-title.png'>
|
<el-row>
|
<el-col :span='24' style='text-align:right'>
|
<div>
|
<el-button @click="drawChart(2)" id='month' style='margin:0px;margin-right:10px' class='cycleBtn'></el-button>
|
<el-button @click="drawChart(1)" id='week' style='margin:0px' class='cycleBtn'></el-button>
|
<el-button @click="drawChart(0)" id='day' style='margin:0px' class='cycleBtn'></el-button>
|
</div>
|
</el-col>
|
</el-row>
|
<div id='airChart' style='margin-top:20px'></div>
|
</div>
|
</template>
|
<script>
|
import echarts from 'echarts'
|
export default {
|
data () {
|
return {
|
chartHeight: 100,
|
CO2ListOfCount: [],
|
PM25ListOfCount: [],
|
PM10ListOfCount: [],
|
ECH20ListOfCount: [],
|
CO2ListOfDay: [],
|
PM25ListOfDay: [],
|
PM10ListOfDay: [],
|
ECH20ListOfDay: [],
|
CO2ListOfMonth: [],
|
PM25ListOfMonth: [],
|
PM10ListOfMonth: [],
|
ECH20ListOfMonth: [],
|
timeListOfCount: [],
|
timeListOfDay: [],
|
timeListOfMonth: []
|
}
|
},
|
computed: {
|
getStreetlightId () {
|
return this.$store.state.weather.streetlightIdOfWeather
|
},
|
getChartHeight () {
|
return this.$store.state.weather.chartHeight
|
},
|
getDataListOfCount () {
|
return this.$store.state.weather.dataListOfCount
|
},
|
getDataListOfDay () {
|
return this.$store.state.weather.dataListOfDay
|
},
|
getDataListOfMonth () {
|
return this.$store.state.weather.dataListOfMonth
|
}
|
},
|
watch: {
|
getChartHeight (curVal, oldVal) {
|
this.chartHeight = curVal
|
this.init()
|
},
|
getStreetlightId (curVal, oldVal) {
|
this.CO2ListOfCount = []
|
this.PM25ListOfCount = []
|
this.PM10ListOfCount = []
|
this.ECH20ListOfCount = []
|
this.timeListOfCount = []
|
this.CO2ListOfDay = []
|
this.PM25ListOfDay = []
|
this.PM10ListOfDay = []
|
this.ECH20ListOfDay = []
|
this.timeListOfDay = []
|
this.CO2ListOfMonth = []
|
this.PM25ListOfMonth = []
|
this.PM10ListOfMonth = []
|
this.ECH20ListOfMonth = []
|
this.timeListOfMonth = []
|
let _this = this
|
setTimeout(function () {
|
_this.drawChart(0)
|
}, 1000)
|
},
|
getDataListOfCount (curVal, oldVal) {
|
this.CO2ListOfCount = []
|
this.PM25ListOfCount = []
|
this.PM10ListOfCount = []
|
this.ECH20ListOfCount = []
|
this.timeListOfCount = []
|
var list = curVal
|
let _this = this
|
list.forEach(function (item, index) {
|
_this.CO2ListOfCount.unshift(item.eco2)
|
_this.PM10ListOfCount.unshift(item.pm10)
|
_this.PM25ListOfCount.unshift(item.pm25)
|
_this.ECH20ListOfCount.unshift(item.ech2o)
|
_this.timeListOfCount.unshift(item.createTime)
|
})
|
},
|
getDataListOfDay (curVal, oldVal) {
|
this.CO2ListOfDay = []
|
this.PM25ListOfDay = []
|
this.PM10ListOfDay = []
|
this.ECH20ListOfDay = []
|
this.timeListOfDay = []
|
var list = curVal
|
let _this = this
|
list.forEach(function (item, index) {
|
_this.CO2ListOfDay.unshift(item.eco2)
|
_this.PM10ListOfDay.unshift(item.pm10)
|
_this.PM25ListOfDay.unshift(item.pm25)
|
_this.ECH20ListOfDay.unshift(item.ech2o)
|
_this.timeListOfDay.unshift(item.createTime)
|
})
|
},
|
getDataListOfMonth (curVal, oldVal) {
|
this.CO2ListOfMonth = []
|
this.PM25ListOfMonth = []
|
this.PM10ListOfMonth = []
|
this.ECH20ListOfMonth = []
|
this.timeListOfMonth = []
|
var list = curVal
|
let _this = this
|
list.forEach(function (item, index) {
|
_this.CO2ListOfMonth.unshift(item.eco2)
|
_this.PM10ListOfMonth.unshift(item.pm10)
|
_this.PM25ListOfMonth.unshift(item.pm25)
|
_this.ECH20ListOfMonth.unshift(item.ech2o)
|
_this.timeListOfMonth.unshift(item.createTime)
|
})
|
}
|
},
|
activated () {},
|
methods: {
|
init () {
|
var airChartBody = document.getElementById('airChartBody')
|
var airChart = document.getElementById('airChart')
|
airChartBody.style.height = this.chartHeight - 20 + 'px'
|
airChart.style.height = this.chartHeight - 70 + 'px'
|
let _this = this
|
setTimeout(function () {
|
_this.drawChart(0)
|
}, 500)
|
},
|
drawChart (val) {
|
var CO2List
|
var PM25List
|
var PM10List
|
var ECH20List
|
var TimeList
|
if (val === 0) {
|
CO2List = this.CO2ListOfCount
|
PM25List = this.PM25ListOfCount
|
PM10List = this.PM10ListOfCount
|
ECH20List = this.ECH20ListOfCount
|
TimeList = this.timeListOfCount
|
} else if (val === 1) {
|
CO2List = this.CO2ListOfDay
|
PM25List = this.PM25ListOfDay
|
PM10List = this.PM10ListOfDay
|
ECH20List = this.ECH20ListOfDay
|
TimeList = this.timeListOfDay
|
} else if (val === 2) {
|
CO2List = this.CO2ListOfMonth
|
PM25List = this.PM25ListOfMonth
|
PM10List = this.PM10ListOfMonth
|
ECH20List = this.ECH20ListOfMonth
|
TimeList = this.timeListOfMonth
|
}
|
var option = {
|
animationDuration: 2000,
|
color: ['#2B72AA', '#6FBBF8', '#6CDFF3', '#9EA0F4'],
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
data: TimeList,
|
axisLine: {
|
lineStyle: {
|
color: '#3F68A0'
|
}
|
}
|
},
|
yAxis: {
|
type: 'value',
|
min: 0,
|
splitLine: {
|
// 坐标轴在 grid 区域中的分隔线
|
show: false
|
},
|
axisLabel: {
|
textStyle: {
|
color: 'white'
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#3F68A0'
|
}
|
}
|
},
|
legend: {
|
data: ['CO2/ppm', 'PM2.5/ug/m3', 'PM10/ug/m3', '甲醛/ug/m3'],
|
textStyle: {
|
// 图例文字的样式
|
color: 'white',
|
fontSize: 16
|
}
|
},
|
series: [
|
{
|
symbolSize: 0,
|
name: 'CO2/ppm',
|
data: CO2List,
|
type: 'line',
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
color: '#2B72AA',
|
width: 2
|
}
|
}
|
},
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#2B72AA' },
|
{ offset: 1, color: '#2B72AA' }
|
])
|
}
|
}
|
},
|
{
|
symbolSize: 0,
|
name: 'PM2.5/ug/m3',
|
data: PM25List,
|
type: 'line',
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
color: '#6FBBF8',
|
width: 2
|
}
|
}
|
},
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#6FBBF8' },
|
{ offset: 1, color: '#6FBBF8' }
|
])
|
}
|
}
|
},
|
{
|
symbolSize: 0,
|
name: 'PM10/ug/m3',
|
data: PM10List,
|
type: 'line',
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
color: '#6CDFF3',
|
width: 2
|
}
|
}
|
},
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#6CDFF3' },
|
{ offset: 1, color: '#6CDFF3' }
|
])
|
}
|
}
|
},
|
{
|
symbolSize: 0,
|
name: '甲醛/ug/m3',
|
data: ECH20List,
|
type: 'line',
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
color: '#9EA0F4',
|
width: 2
|
}
|
}
|
},
|
areaStyle: {
|
normal: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
{ offset: 0, color: '#9EA0F4' },
|
{ offset: 1, color: '#9EA0F4' }
|
])
|
}
|
}
|
}
|
]
|
}
|
|
var tempChart = echarts.init(document.getElementById('airChart'))
|
tempChart.setOption(option)
|
}
|
}
|
}
|
</script>
|
