<template>
|
<div id='tvocChartBody'>
|
<img height='20px' width='70%' style='margin-top:15px' src='~@/assets/img/weather/tvoc-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='tvocChart' style='margin-top:20px'></div>
|
</div>
|
</template>
|
<script>
|
import echarts from 'echarts'
|
export default {
|
data () {
|
return {
|
chartHeight: 100,
|
TVOCListOfCount: [],
|
TVOCListOfDay: [],
|
TVOCListOfMonth: [],
|
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.TVOCListOfCount = []
|
this.TVOCListOfDay = []
|
this.TVOCListOfMonth = []
|
this.timeListOfCount = []
|
this.timeListOfDay = []
|
this.timeListOfMonth = []
|
let _this = this
|
setTimeout(function () {
|
_this.drawChart(0)
|
}, 1000)
|
},
|
getDataListOfCount (curVal, oldVal) {
|
this.TVOCListOfCount = []
|
this.timeListOfCount = []
|
var list = curVal
|
let _this = this
|
list.forEach(function (item, index) {
|
_this.TVOCListOfCount.unshift(item.tvoc)
|
_this.timeListOfCount.unshift(item.createTime)
|
})
|
},
|
getDataListOfDay (curVal, oldVal) {
|
this.TVOCListOfDay = []
|
this.timeListOfDay = []
|
var list = curVal
|
let _this = this
|
list.forEach(function (item, index) {
|
_this.TVOCListOfDay.unshift(item.tvoc)
|
_this.timeListOfDay.unshift(item.createTime)
|
})
|
},
|
getDataListOfMonth (curVal, oldVal) {
|
this.TVOCListOfMonth = []
|
this.timeListOfMonth = []
|
var list = curVal
|
let _this = this
|
list.forEach(function (item, index) {
|
_this.TVOCListOfMonth.unshift(item.tvoc)
|
_this.timeListOfMonth.unshift(item.createTime)
|
})
|
}
|
},
|
activated () {},
|
methods: {
|
init () {
|
var tvocChartBody = document.getElementById('tvocChartBody')
|
var tvocChart = document.getElementById('tvocChart')
|
tvocChartBody.style.height = this.chartHeight - 20 + 'px'
|
tvocChart.style.height = this.chartHeight - 70 + 'px'
|
},
|
drawChart (val) {
|
var TVOCList
|
var TimeList
|
if (val === 0) {
|
TVOCList = this.TVOCListOfCount
|
TimeList = this.timeListOfCount
|
} else if (val === 1) {
|
TVOCList = this.TVOCListOfDay
|
TimeList = this.timeListOfDay
|
} else if (val === 2) {
|
TVOCList = this.TVOCListOfMonth
|
TimeList = this.timeListOfMonth
|
}
|
var option = {
|
animationDuration: 2000,
|
color: ['#1176C3'],
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#283b56'
|
}
|
}
|
},
|
xAxis: [
|
{
|
type: 'category',
|
scale: true,
|
min: 0,
|
data: TimeList,
|
axisLine: {
|
lineStyle: {
|
color: '#3F68A0'
|
}
|
},
|
axisLabel: {
|
textStyle: {
|
color: 'white'
|
}
|
}
|
}
|
],
|
yAxis: [
|
{
|
min: 0,
|
type: 'value',
|
scale: true,
|
name: 'mg/m3',
|
boundaryGap: [0.2, 0.2],
|
axisLine: {
|
lineStyle: {
|
color: '#3F68A0'
|
}
|
},
|
axisLabel: {
|
textStyle: {
|
color: 'white'
|
}
|
},
|
splitLine: {
|
// 坐标轴在 grid 区域中的分隔线
|
show: false
|
}
|
}
|
],
|
series: [
|
{
|
type: 'bar',
|
itemStyle: {
|
color: 'grey'
|
},
|
data: TVOCList
|
},
|
{
|
symbolSize: 0,
|
name: 'tvoc',
|
type: 'line',
|
data: TVOCList,
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
color: 'red',
|
width: 2
|
}
|
}
|
}
|
}
|
]
|
}
|
|
var tempChart = echarts.init(document.getElementById('tvocChart'))
|
tempChart.setOption(option)
|
}
|
}
|
}
|
</script>
|
