效果图：
<template>
<!-- 天气预报 -->
<div>
<el-popover
placement="bottom"
popper-class="weather-popver"
title=""
trigger="click"
@hide="handleHideWeather"
>
<div class="bigWeather">
<div class="bigWeather-top">
<div class="bigWeather-top-txt1">
<span>当前天气</span>
<span> | </span>
<img class="bigWeather-top-icon1" src="@/assets/icon/icon-focus.svg">
<span> {{ currentWeather.areaName }}</span>
</div>
<div class="bigWeather-top-txt2">
<div class="bigWeather-top-txt2-1">{{ currentWeather.avgTemperature }}°</div>
<div class="bigWeather-top-txt2-2">{{ currentWeather.dayWeather }}</div>
</div>
<div class="bigWeather-top-txt3">
<div class="bigWeather-top-txt3-1">{{ currentWeather.minTemperature }}～{{ currentWeather.maxTemperature }}°C</div>
<div class="bigWeather-top-txt3-2">{{ currentWeather.dayWindDirection }}</div>
<!-- <div class="bigWeather-top-txt3-3">
<img class="bigWeather-top-txt3-3-1-img" src="@/assets/icon/icon-kq.svg">
<div class="bigWeather-top-txt3-3-1">空气 优</div>
</div> -->
</div>
<img class="bigWeather-top-txt4" :src="handleWeatherSrc(currentWeather.dayWeather)">
</div>
<div class="bigWeather-bottom">
<div ref="PieChart" class="bigWeather-bottom-echarts"></div>
<img class="bigWeather-bottom-l" src="@/assets/icon/icon little-unfold-r.svg" @click="scrollToLeft" v-if="!tabScrollShow">
<img class="bigWeather-bottom-r" v-if="tabScrollShow" src="@/assets/icon/icon little-unfold-l.svg" @click="scrollToRight">
</div>
</div>
<template #reference>
<div :class="defaultClass=='weather-div'?'weather-div':defaultClass" @click="clickWeather">
<img class="weather-icon" v-if="handleWeatherSrc(defaultValue.dayWeather)" :src="handleWeatherSrc(defaultValue.dayWeather)">
<span class="weather-txt1" v-if="defaultValue.avgTemperature">{{defaultValue.avgTemperature}}°</span>
<span class="weather-txt2">{{defaultValue.dayWeather}}｜{{defaultValue.minTemperature}}～{{defaultValue.maxTemperature}}°C</span>
<img class="weather-icon1" v-if="!weatherVisible" src="@/assets/icon/icon-shouqi222.svg">
<img class="weather-icon2" v-if="weatherVisible" src="@/assets/icon/icon-shouqi222.svg">
</div>
</template>
</el-popover>
</div>
</template>
<script>
import * as api from '@apis/common'
import * as echarts from 'echarts'
import clearSkyIcon from '../../../assets/icon/weather/icon-晴天.png'
import blizzardIcon from '../../../assets/icon/weather/icon-暴雪.png'
import heavyRainIcon from '../../../assets/icon/weather/icon-暴雨.png'
import hailIcon from '../../../assets/icon/weather/icon-冰雹.png'
import extremeHeavyRainIcon from '../../../assets/icon/weather/icon-大暴雨.png'
import heavySnowIcon from '../../../assets/icon/weather/icon-大雪.png'
import rainIcon from '../../../assets/icon/weather/icon-大雨.png'
import freezingRainIcon from '../../../assets/icon/weather/icon-冻雨.png'
import cloudyIcon from '../../../assets/icon/weather/icon-多云.png'
import dustIcon from '../../../assets/icon/weather/icon-浮尘.png'
import frostIcon from '../../../assets/icon/weather/icon-降霜.png'
import thunderstormRainIcon from '../../../assets/icon/weather/icon-雷阵雨.png'
import hazeIcon from '../../../assets/icon/weather/icon-霾.png'
import severeDustStormIcon from '../../../assets/icon/weather/icon-强沙尘暴.png'
import dustStormIcon from '../../../assets/icon/weather/icon-沙尘暴.png'
import torrentialRainIcon from '../../../assets/icon/weather/icon-特大暴雨.png'
import darkCloudsIcon from '../../../assets/icon/weather/icon-乌云.png'
import fogIcon from '../../../assets/icon/weather/icon-雾天.png'
import lightSnowIcon from '../../../assets/icon/weather/icon-小雪.png'
import lightRainIcon from '../../../assets/icon/weather/icon-小雨.png'
import sandIcon from '../../../assets/icon/weather/icon-扬沙.png'
import nightIcon from '../../../assets/icon/weather/icon-夜晚.png'
import overcastIcon from '../../../assets/icon/weather/icon-阴天.png'
import drizzleIcon from '../../../assets/icon/weather/icon-阴雨.png'
import raindropIcon from '../../../assets/icon/weather/icon-雨.png'
import sleetIcon from '../../../assets/icon/weather/icon-雨夹雪.png'
import snowShowerIcon from '../../../assets/icon/weather/icon-阵雪.png'
import rainShowerIcon from '../../../assets/icon/weather/icon-阵雨.png'
import moderateSnowIcon from '../../../assets/icon/weather/icon-中雪.png'
import moderateRainIcon from '../../../assets/icon/weather/icon-中雨.png'
export default {
name: 'Weather',
components: {
},
directives: {},
props: {
defaultValue: {
type: Object,
default: () => ({})
},
defaultClass: {
type: String,
default() {
return 'weather-div'
}
}
},
filters: {},
provide: {},
mixins: [],
data() {
return {
weatherVisible: false,
currentPointInfo: null,
tabScrollShow: true,
currentWeather: {}
}
},
created() {
},
methods: {
handleHideWeather() {
this.weatherVisible = false
},
clickWeather() {
const t = this
if (t.weatherVisible) return
t.weatherVisible = true
t.tabScrollShow = true
const req = {
data: t.defaultValue.datekey,
shopNo: t.defaultValue.shopNo
}
api.weatherInfo(req).then((res) => {
for (const i in res.data) {
// eslint-disable-next-line eqeqeq
if (res.data[i].weekNickName == '今天') {
t.currentWeather = res.data[i]
}
}
setTimeout(() => {
const chartDom = t.$refs.PieChart
t.myChart = echarts.init(chartDom)
t.myChart.setOption(t.replaceOptionPie(res.data))
// 监听图表的全局点击事件
t.myChart.getZr().on('click', (event) => {
const pointInPixel = [event.offsetX, event.offsetY]
const pointInGrid = t.myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
const xIndex = Math.round(pointInGrid[0])
if (xIndex >= 0 && xIndex < t.myChart.getOption().xAxis[0].data.length) {
if (t.currentPointInfo) {
res.data.map((j) => {
if (j.weekNickName === t.currentPointInfo[0].name.split(' ')[0]) {
t.currentWeather = j
}
})
// 在这里处理点击事件
}
}
})
// 监听 dataZoom 事件
t.myChart.on('dataZoom', (params) => {
console.log('params', params)
let startIndex = ''
let endIndex = ''
if (params.endValue) { // 直接点击箭头滚动
startIndex = params.startValue
endIndex = params.endValue
} else { // 鼠标滚轮滚动
const dataLength = res.data.length
startIndex = Math.round((params.batch[0].start / 100) * dataLength)
endIndex = Math.round((params.batch[0].end / 100) * dataLength)
}
console.log('startIndex', startIndex, endIndex)
// 更新 rich 属性
const newRich = t.handleWeatherIcon(res.data.slice(startIndex, endIndex + 1))
t.myChart.setOption({
xAxis: [
{
axisLabel: {
rich: newRich
}
},
{
axisLabel: {
rich: newRich
}
}
]
})
})
// 实现窗口变化时，图表的自适应
window.addEventListener('resize', () => {
t.myChart.resize()
})
}, 100)
})
},
replaceOptionPie(list) {
const t = this
return {
dataZoom: [
{
// 设置滚动条的隐藏与显示
show: false,
// 设置滚动条类型
type: 'slider',
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: 7,
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: 'inside',
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: false,
moveOnMouseWheel: false
}
],
grid: {
left: '5%',
right: '5%',
backgroundColor: 'transparent',
bottom: '3%',
top: '5px',
containLabel: true
},
tooltip: {
trigger: 'axis',
borderWidth: 2,
backgroundColor: 'rgba(50, 50, 50, 0.7)', // 设置背景颜色
textStyle: {
color: '#fff' // 设置文字颜色
},
formatter(params) {
t.currentPointInfo = params // 保存当前点的信息
return '' // 不显示提示内容
},
axisPointer: {
type: 'shadow', // 使用阴影指示器
shadowStyle: {
z: -1,
color: 'rgba(238, 248, 255, 0.2)' // 设置阴影颜色
}
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 70,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
fontFamily: 'D-DIN,SAN-SERIF',
fontSize: '12px',
fontWeight: 'normal',
interval: 0,
color: '#081836',
formatter(value) {
// 将 ' ' 替换为 '\n' 进行换行
return value.replace(' ', '\n')
}
},
// 日期数据
data: t.handleXaxis(list)
},
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 20,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
interval: 0,
formatter(value, index) {
// 使用富文本标签来显示图标
return `{${index}| }\n{icon|}`
},
rich: t.handleWeatherIcon(list)
},
data: t.handleXaxis(list)
},
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 0,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
fontFamily: 'D-DIN,SAN-SERIF',
fontSize: '12px',
fontWeight: 'normal',
interval: 0,
color: '#081836',
formatter(value) {
return `${value}℃`
}
},
// 日期数据
data: t.handleMaxWeatherList(list)
},
{
type: 'category',
boundaryGap: false,
position: 'bottom',
offset: 0,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
fontFamily: 'D-DIN,SAN-SERIF',
fontSize: '12px',
fontWeight: 'normal',
interval: 0,
color: '#081836',
formatter(value) {
return `${value}℃`
}
},
// 日期数据
data: t.handleMaxWeatherList(list)
}
],
yAxis: [
{
type: 'value',
min: t.handleLineMin(list),
max: t.handleLineMax(list),
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: false },
splitLine: { show: false }
}
],
series: [
{
name: '温度',
type: 'line',
connectNulls: true,
showSymbol: true, // 去除拐点，未划过时候
label: {
show: false,
color: '#54626F',
align: 'center',
formatter: '{c}℃'
},
lineStyle: {
color: '#D1D9E0'
},
labelLayout(params) {
return {
x: params.rect.x - params.rect.width,
y: params.rect.y < params.rect.height * 2 ? params.rect.y + params.rect.height * 3 : params.rect.y - params.rect.height,
verticalAlign: 'middle',
align: 'left'
}
},
itemStyle: {
normal: {
color: '#D1D9E0',
borderColor: '#D1D9E0',
borderWidth: 2, // 描边的线宽
lineStyle: {
color: '#D1D9E0', // 折线颜色
width: 2 // 折线宽度
}
}
},
data: t.handleLineData(list)
}
]
}
},
// 处理X轴
handleXaxis(list) {
const arr = []
list.map((i) => {
arr.push(`${i.weekNickName} ${i.datekey.slice(-4)}`)
})
return arr
},
// 处理图表折现图的最大值
handleLineMax(list) {
const arr = []
list.map((i) => {
arr.push(i.avgTemperature)
})
return Math.max(...arr) + 2
},
// 处理图表折现图的最小值
handleLineMin(list) {
const arr = []
list.map((i) => {
arr.push(i.avgTemperature)
})
return Math.min(...arr) - 2
},
// 处理折线图数据
handleLineData(list) {
const arr = []
list.map((i) => {
arr.push(i.avgTemperature)
})
return arr
},
// 处理天气折现图标显示
handleWeatherIcon(list) {
const t = this
const rich = {}
list.forEach((item, index) => {
rich[index] = {
backgroundColor: {
image: t.handleWeatherSrc(item.dayWeather)
},
height: 32,
width: 32
}
})
return rich
},
// 获取天气最高温度数组
handleMaxWeatherList(list) {
const arr = []
list.map((i) => {
arr.push(i.maxTemperature)
})
return arr
},
// 获取天气最高温度数组
handleMinWeatherList(list) {
const arr = []
list.map((i) => {
arr.push(i.minTemperature)
})
return arr
},
handleWeatherSrc(type) {
const weatherImages = {
晴: clearSkyIcon,
霾: hazeIcon,
暴雪: blizzardIcon,
小雨: lightRainIcon,
多云: cloudyIcon,
大到暴雨: heavyRainIcon,
雷阵雨: thunderstormRainIcon,
中雪: moderateSnowIcon,
冻雨: freezingRainIcon,
沙尘暴: dustStormIcon,
扬沙: sandIcon,
中到大雨: rainIcon,
小到中雪: moderateSnowIcon,
强沙尘暴: severeDustStormIcon,
阴: overcastIcon,
阵雨: rainShowerIcon,
雾: fogIcon,
雷阵雨伴有冰雹: hailIcon,
大雪: heavySnowIcon,
暴雨到大暴雨: extremeHeavyRainIcon,
大雨: rainIcon,
阵雪: snowShowerIcon,
小到中雨: moderateRainIcon,
大暴雨: extremeHeavyRainIcon,
特大暴雨: torrentialRainIcon,
中到大雪: heavySnowIcon,
中雨: moderateRainIcon,
雨: raindropIcon,
雨夹雪: sleetIcon,
浮尘: dustIcon,
大到暴雪: blizzardIcon,
小雪: lightSnowIcon,
暴雨: heavyRainIcon,
降霜: frostIcon,
乌云: darkCloudsIcon,
夜晚: nightIcon,
阴雨: drizzleIcon
}
return weatherImages[type] || ''
},
scrollToLeft() {
if (this.myChart) {
this.tabScrollShow = !this.tabScrollShow
this.myChart.dispatchAction({
type: 'dataZoom',
startValue: 0,
endValue: 7
})
}
},
scrollToRight() {
if (this.myChart) {
this.tabScrollShow = !this.tabScrollShow
const xAxisData = this.myChart.getOption().xAxis[0].data
const endValue = xAxisData.length - 1
this.myChart.dispatchAction({
type: 'dataZoom',
startValue: endValue - 7,
endValue
})
}
}
}
}
</script>
<style lang="scss">
.weather-div {
display: flex;
align-items: center;
height: 2.865vw;
padding-left: 0.8333vw;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
z-index: 20;
.weather-icon{
width:46px;
height:46px;
}
.weather-txt2{
font-family: Roboto-Bold;
font-size: 14px;
color: #FFFFFF;
letter-spacing: 0;
line-height: 16px;
font-weight: 700;
margin-left:4px;
}
.weather-txt1 {
font-family: Roboto-BoldCondensed;
font-size: 1.66667vw;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 700;
margin-right: 0.2083vw;
margin-left:10px;
}
.weather-echarts{
width: 25vw;
height:5.208vw;
padding-top:1.8vw;
}
}
.weather-popver {
padding: 0 !important;
width: 552px !important;
.bigWeather {
width: 100%;
height: fit-content;
.bigWeather-top {
width: 100%;
padding-left: 32px;
padding-top: 32px;
padding-bottom: 18px;
background-image: linear-gradient(0deg, #F5FBFF 0%, #EAF7FF 100%);
border-radius: 4px 4px 0px 0px;
position: relative;
.bigWeather-top-txt1 {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #54626F;
letter-spacing: 0;
line-height: 14px;
font-weight: 400;
.bigWeather-top-icon1 {
width: 14px;
height: 14px;
}
}
.bigWeather-top-txt2 {
margin-top: 16px;
display: flex;
align-items: flex-end;
.bigWeather-top-txt2-1 {
font-family: Roboto-BoldCondensed;
font-size: 56px;
color: #081836;
letter-spacing: 0;
line-height: 56px;
font-weight: 700;
margin-right: 9px;
}
.bigWeather-top-txt2-2 {
font-family: PingFangSC-Medium;
font-size: 16px;
color: #081836;
letter-spacing: 0;
line-height: 20px;
font-weight: 500;
}
}
.bigWeather-top-txt3 {
margin-top: 18px;
display: flex;
align-items: center;
.bigWeather-top-txt3-1 {
font-family: Roboto-Regular;
font-size: 16px;
color: #081836;
letter-spacing: 0;
line-height: 20px;
font-weight: 400;
margin-right: 16px;
}
.bigWeather-top-txt3-2 {
font-family: Roboto-Regular;
font-size: 16px;
color: #081836;
letter-spacing: 0;
line-height: 20px;
font-weight: 400;
margin-right: 16px;
}
.bigWeather-top-txt3-3 {
display: flex;
align-items: center;
flex-wrap: nowrap;
background: #DFF0FF;
border-radius: 4px;
padding: 2px 6px;
.bigWeather-top-txt3-3-1-img {
width: 9px;
height: 10px;
margin-right: 3.5px;
}
.bigWeather-top-txt3-3-1 {
font-family: PingFangSC-Regular;
font-size: 12px;
color: #0581E3;
letter-spacing: 0;
line-height: 16px;
font-weight: 400;
}
}
}
.bigWeather-top-txt4 {
width: 112px;
height: 112px;
position: absolute;
top: 24px;
right: 46px;
}
}
.bigWeather-bottom {
width: 100%;
height: fit-content;
padding: 24px;
position: relative;
.bigWeather-bottom-echarts {
width: 100%;
height: 214px;
}
.bigWeather-bottom-l {
background: rgba(255, 255, 255, 0.80);
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
left: 9px;
top: 110px;
cursor: pointer;
}
.bigWeather-bottom-r {
background: rgba(255, 255, 255, 0.80);
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.16);
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
right: 9px;
top: 110px;
cursor: pointer;
}
}
}
}
</style>