<template>
|
<div id='windChartBody'>
|
<img height='20px' width='70%' style='margin-top:15px' src='~@/assets/img/weather/wind-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='windChart' style='margin-top:20px'></div>
|
</div>
|
</template>
|
<script>
|
import echarts from 'echarts'
|
export default {
|
data () {
|
return {
|
chartHeight: 100,
|
windListOfCount: [],
|
windListOfDay: [],
|
windListOfMonth: [],
|
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.windListOfCount = []
|
this.windListOfDay = []
|
this.windListOfMonth = []
|
this.timeListOfCount = []
|
this.timeListOfDay = []
|
this.timeListOfMonth = []
|
let _this = this
|
setTimeout(function () {
|
_this.drawChart(0)
|
}, 1000)
|
},
|
getDataListOfCount (curVal, oldVal) {
|
this.windListOfCount = []
|
this.timeListOfCount = []
|
var list = curVal
|
let _this = this
|
list.forEach(function (item, index) {
|
_this.windListOfCount.unshift(item.windSpeed)
|
_this.timeListOfCount.unshift(item.createTime)
|
})
|
},
|
getDataListOfDay (curVal, oldVal) {
|
this.windListOfDay = []
|
this.timeListOfDay = []
|
var list = curVal
|
let _this = this
|
list.forEach(function (item, index) {
|
_this.windListOfDay.unshift(item.windSpeed)
|
_this.timeListOfDay.unshift(item.createTime)
|
})
|
},
|
getDataListOfMonth (curVal, oldVal) {
|
this.windListOfMonth = []
|
this.timeListOfMonth = []
|
var list = curVal
|
let _this = this
|
list.forEach(function (item, index) {
|
_this.windListOfMonth.unshift(item.windSpeed)
|
_this.timeListOfMonth.unshift(item.createTime)
|
})
|
}
|
},
|
activated () {},
|
methods: {
|
init () {
|
var windChartBody = document.getElementById('windChartBody')
|
var windChart = document.getElementById('windChart')
|
windChartBody.style.height = this.chartHeight - 20 + 'px'
|
windChart.style.height = this.chartHeight - 70 + 'px'
|
},
|
drawChart (val) {
|
var windList
|
var TimeList
|
if (val === 0) {
|
windList = this.windListOfCount
|
TimeList = this.timeListOfCount
|
} else if (val === 1) {
|
windList = this.windListOfDay
|
TimeList = this.timeListOfDay
|
} else if (val === 2) {
|
windList = this.windListOfMonth
|
TimeList = this.timeListOfMonth
|
}
|
var option = {
|
animationDuration: 2000,
|
color: ['#1176C3'],
|
tooltip: {
|
trigger: 'axis'
|
},
|
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: 'm/s',
|
boundaryGap: [0.2, 0.2],
|
axisLine: {
|
lineStyle: {
|
color: '#3F68A0'
|
}
|
},
|
axisLabel: {
|
textStyle: {
|
color: 'white'
|
}
|
},
|
splitLine: {
|
// 坐标轴在 grid 区域中的分隔线
|
show: false
|
}
|
}
|
],
|
series: [
|
{
|
symbolSize: 0,
|
name: '风速',
|
type: 'bar',
|
data: windList,
|
itemStyle: {
|
normal: {
|
lineStyle: {
|
color: 'red',
|
width: 2
|
}
|
}
|
}
|
}
|
]
|
}
|
|
var tempChart = echarts.init(document.getElementById('windChart'))
|
tempChart.setOption(option)
|
}
|
}
|
}
|
</script>
|
