Flask+echarts爬取天气预报数据并实现可视化-Toy模板网

这篇具有很好参考价值的文章主要介绍了Flask+echarts爬取天气预报数据并实现可视化。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、结果展示

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

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>