Flask+echarts爬取天气预报数据并实现可视化

Double Handsome

已于 2023-03-26 17:54:06 修改

阅读量1.1k

点赞数 3

分类专栏：爬虫系列文章标签： selenium flask echarts

于 2023-03-25 17:00:00 首次发布

本文链接：https://blog.csdn.net/qq_52431815/article/details/129768575

版权

爬虫系列专栏收录该内容

20 篇文章 1 订阅

订阅专栏

文章目录

1、结果展示
2、爬取所在地未来七天的天气数据
3、Flask动态传递数据到index.html
4、页面渲染
5、运行展示
6、源码链接

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复制到浏览器即可看到结果展示页面

6、源码链接

点这里获取源码

Double Handsome

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flask+echarts爬取天气预报数据并实现可视化

右键新建一个flask01.py的文件，对爬取到的数据进行读取，并转换为列表类型，传递给index.html页面，echarts的图表样例负责接收并渲染，代码如下，在根目录下，新建一个名为templates目录，该目录名为默认的页面存储路径，不可拼错和随意修改，是固定的，然后右键创建一个index.html的文件，代码如下，右键新建一个crawl.py文件，代码如下，将爬取到的数据存储到tianqi.txt文件中，
复制链接

扫一扫