From 63c0ecf98f3705b4c70e4bafee5f325966a5777b Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Thu, 06 Jul 2023 09:13:54 +0800
Subject: [PATCH] 提交
---
src/components/Wind/realTimeLocal/airChangeTrend.vue | 164 ++++++++++++++++++++++++++++++------------------------
1 files changed, 92 insertions(+), 72 deletions(-)
diff --git a/src/components/Wind/realTimeLocal/airChangeTrend.vue b/src/components/Wind/realTimeLocal/airChangeTrend.vue
index 4483cd9..eb82ecb 100644
--- a/src/components/Wind/realTimeLocal/airChangeTrend.vue
+++ b/src/components/Wind/realTimeLocal/airChangeTrend.vue
@@ -1,14 +1,22 @@
<template>
<div class="air_trend">
<div class="air_top header_air">
- <img class="air_img" :src="require('@/assets/images/regionalOverview/histogram.png')" alt="">
+ <img
+ class="air_img"
+ :src="require('@/assets/images/regionalOverview/histogram.png')"
+ alt=""
+ />
<span class="air_text">������24������������������������</span>
</div>
- <div v-if="this.dataAxis.length > 0" class="air_histogram">
- <div id="myChart" :style="{width: '100%', height: '200px'}" />
+ <div v-show="this.dataAxis.length > 0" class="air_histogram">
+ <div id="myChart" :style="{width: '350px', height: '200px'}"/>
</div>
- <div v-else style="width: 100%">
- <el-empty style="width: 100%" :image-size="60" description="���������������������" />
+ <div v-show="this.dataAxis.length <= 0" style="width: 100%">
+ <el-empty
+ style="width: 100%"
+ :image-size="60"
+ description="���������������������"
+ />
</div>
</div>
</template>
@@ -21,13 +29,13 @@
return {
dataAxis: [],
dataValue: [],
- timer: null
+ timer: null,
}
},
created() {
+ this.query24HoursAQI()
},
mounted() {
- // console.log(this.timer)
if (this.timer !== null) {
clearInterval(this.timer)
this.timer = null
@@ -57,9 +65,9 @@
url: '/aqi/query24HoursAQI',
method: 'get',
params: {
- regionCode: this.$store.state.regionCode
- }
- }).then(res => {
+ regionCode: this.$store.state.regionCode,
+ },
+ }).then((res) => {
if (res.code === 0) {
const arr = []
const arr1 = []
@@ -70,6 +78,7 @@
}
this.dataAxis = arr
this.dataValue = arr1
+ this.initChats()
}
})
},
@@ -78,11 +87,22 @@
const myChart = echarts.init(chartDom)
// 'aqi': [50, 100, 150, 200, 300]
let option
- const dataObj = this.dataValue.map(value => {
+ const dataObj = this.dataValue.map((value) => {
const obj = {}
obj.value = value
const itemStyle = {
- color: value < 50 ? '#00e400' : value < 100 ? '#ffff00' : value < 150 ? '#ff7e00' : value < 200 ? '#ff0000' : value < 300 ? '#99004c' : '#7e0023'
+ color:
+ value < 50
+ ? '#00e400'
+ : value < 100
+ ? '#ffff00'
+ : value < 150
+ ? '#ff7e00'
+ : value < 200
+ ? '#ff0000'
+ : value < 300
+ ? '#99004c'
+ : '#7e0023',
}
obj.itemStyle = itemStyle
return obj
@@ -95,27 +115,27 @@
borderWidth: '1',
borderColor: '#d9d9d9',
textStyle: {
- color: '#808080'
+ color: '#808080',
},
axisPointer: {
type: 'none',
lineStyle: {
- color: 'rgba(128, 128, 128, .6)'
- }
- }
+ color: 'rgba(128, 128, 128, .6)',
+ },
+ },
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
- containLabel: true
+ containLabel: true,
},
xAxis: [
{
type: 'category',
data: this.dataAxis,
axisTick: {
- alignWithLabel: true
+ alignWithLabel: true,
},
axisLabel: {
inside: false,
@@ -131,17 +151,17 @@
}
}
},
- formatter: function(value) {
+ formatter: function (value) {
return echarts.format.formatTime('hh:mm', new Date(value))
- }
+ },
},
axisLine: {
show: false,
lineStyle: {
- color: 'rgba(153, 153, 153, 0.4)'
- }
- }
- }
+ color: 'rgba(153, 153, 153, 0.4)',
+ },
+ },
+ },
],
yAxis: {
// ���������������������������
@@ -150,73 +170,73 @@
lineStyle: {
color: 'rgba(153, 153, 153, 0.1)',
width: 1,
- type: 'solid'
- }
+ type: 'solid',
+ },
},
axisLine: {
- show: false
+ show: false,
},
axisTick: {
- show: false
+ show: false,
},
axisLabel: {
- color: '#999'
- }
+ color: '#999',
+ },
},
series: [
{
name: 'AQI',
type: 'bar',
barWidth: '60%',
- data: dataObj
- }
- ]
+ data: dataObj,
+ },
+ ],
}
myChart.setOption(option)
- }
- }
+ },
+ },
}
</script>
<style lang="less">
- .air_trend {
- width: 100%;
- margin-top: 6px;
- background-color: #fff;
- //box-shadow: 0 0 5px 1px #999;
- padding: 0;
- border: solid 1px #d9d9d9;
- border-radius: 3px;
- box-sizing: border-box;
+.air_trend {
+ width: 100%;
+ margin-top: 6px;
+ background-color: #fff;
+ //box-shadow: 0 0 5px 1px #999;
+ padding: 0;
+ border: solid 1px #d9d9d9;
+ border-radius: 3px;
+ box-sizing: border-box;
+}
+.air_trend > .air_top {
+ display: inline-block;
+ outline: none;
+ width: 100%;
+ float: left;
+}
+.header_air {
+ position: relative;
+ height: 40px;
+ background-color: #f8f7f7;
+ .air_img {
+ position: absolute;
+ top: 10px;
+ left: 16px;
+ width: 20px;
}
- .air_trend > .air_top {
- display: inline-block;
- outline: none;
- width: 100%;
- float: left;
- }
- .header_air {
- position: relative;
+ .air_text {
+ position: absolute;
height: 40px;
- background-color: #F8F7F7;
- .air_img {
- position: absolute;
- top: 10px;
- left: 16px;
- width: 20px;
- }
- .air_text {
- position: absolute;
- height: 40px;
- line-height: 40px;
- left: 40px;
- font-size: 15px;
- color: #808080;
- }
+ line-height: 40px;
+ left: 40px;
+ font-size: 15px;
+ color: #808080;
}
- .air_histogram {
- width: 100%;
- height: 200px;
- margin-bottom: 10px;
- }
+}
+.air_histogram {
+ width: 100%;
+ height: 200px;
+ margin-bottom: 10px;
+}
</style>
--
Gitblit v1.8.0