1、结果展示
2、爬取所在地未来七天的天气数据
右键新建一个crawl.py文件，代码如下，将爬取到的数据存储到tianqi.txt文件中，
from selenium.webdriver import Chrome
from selenium.webdriver.chrome.options import Options
from selenium.webdriver import ChromeOptions
from time import sleep
from lxml import etree
# 实现无可视化界面
chrome_options = Options()
chrome_options.add_argument('--headless')
chrome_options.add_argument('--disable-gpu')
# 实现规避检测
option = ChromeOptions()
option.add_experimental_option('excludeSwitches', ['enable-automation'])
# 新建一个谷歌浏览器
bro = Chrome(chrome_options=chrome_options, options=option)
# 浏览器最大化
bro.maximize_window()
# 模拟浏览器发送请求
bro.get('https://tianqi.2345.com/')
sleep(1)
# 获取当前界面的源码数据
page_text = bro.page_source
# 数据解析
tree = etree.HTML(page_text)
temp_list = tree.xpath('//div[@id="J_bannerList"]/div')
fp = open('./tianqi.txt','a',encoding='utf-8')
# print(temp_list)
# 将数据写入带本地的tianqi.txt文件中
for temp in temp_list[1:]:
date = temp.xpath('./div[1]/text()')[0]
temp_scope = temp.xpath('./div[5]/text()')[0]
# 去空格
date = date.strip()
temp_scope = temp_scope.strip()
temp_list = temp_scope.split('~')
highest = temp_list[1][:-1]
lowest = temp_list[0]
fp.write(date + " " + lowest + " " + highest + '\n')
fp.close()
sleep(1)
bro.quit()
3、Flask动态传递数据到index.html
右键新建一个flask01.py的文件，对爬取到的数据进行读取，并转换为列表类型，传递给index.html页面，echarts的图表样例负责接收并渲染，代码如下，
from flask import Flask, render_template, jsonify
import pandas as pd
import numpy as np
app = Flask(__name__)
data = pd.read_csv('tianqi.txt', header=None, sep=" ")
# 读取每列的数据
data_1 = data.iloc[:, 0]
data_2 = data.iloc[:, 1]
data_3 = data.iloc[:, 2]
# 将每列的数据转换为列表
array1 = np.array(data_1).tolist()
array2 = np.array(data_2).tolist()
array3 = np.array(data_3).tolist()
# print(array1)
# print(array2)
# print(array3)
# 起始页，也是数据展示页
@app.route('/')
def index():
return render_template('index.html')
# echarts 名字可以改为任意，但一定要与HTML文件中一致
@app.route('/echarts', methods=["GET"])
def echarts():
return jsonify(date_time=array1, lowest=array2, highest=array3)
if __name__ == '__main__':
app.run()
4、页面渲染
在根目录下，新建一个名为templates目录，该目录名为默认的页面存储路径，不可拼错和随意修改，是固定的，然后右键创建一个index.html的文件，代码如下，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<!--<script src="../package/dist/echarts.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="main" style="height: 600px;width: auto;"></div>
</body>
<script type="text/javascript">
const main = echarts.init(document.getElementById('main'))
const option = ({
title: {
text: '未来七天的天气变化'
},
tooltip: {
trigger: 'axis'
},
legend: {},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '最高温度',
type: 'line',
data: [],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
markLine: {
data: [{ type: 'average', name: 'Avg' }]
}
},
{
name: '最低温度',
type: 'line',
data: [],
markPoint: {
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
},
markLine: {
data: [
{ type: 'average', name: 'Avg' },
[
{
symbol: 'none',
x: '100%',
yAxis: 'max'
},
{
symbol: 'circle',
label: {
position: 'start',
formatter: 'Max'
},
type: 'max',
name: '最高点'
}
]
]
}
}
]
})
// 异步加载数据
$.get('/echarts').done(function (data) {
// 填入数据
main.setOption({
xAxis: {
type: 'category',
boundaryGap: false,
data: data.date_time
},
series: [{
// 根据名字对应到相应的系列
name: '最高温度',
data: data.highest //flask传递过来的数据data
},
{
// 根据名字对应到相应的系列
name: '最低温度',
data: data.lowest //flask传递过来的数据data
}],
});
});
main.setOption(option)
</script>
</html>
5、运行展示
切换到flask01.py文件下，右键运行，然后将http://127.0.0.1:5000复制到浏览器即可看到结果展示页面