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

文章目录

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

  1、结果展示

  2、爬取所在地未来七天的天气数据

  右键新建一个crawl.py文件，代码如下，将爬取到的数据存储到tianqi.txt文件中，

  from selenium.webdriver import Chromefrom selenium.webdriver.chrome.options import Optionsfrom selenium.webdriver import ChromeOptionsfrom time import sleepfrom 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('//p[@]/p')fp = open('./tianqi.txt','a',encoding='utf-8')# print(temp_list)# 将数据写入带本地的tianqi.txt文件中for temp in temp_list[1:]:    date = temp.xpath('./p[1]/text()')[0]    temp_scope = temp.xpath('./p[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, jsonifyimport pandas as pdimport numpy as npapp = 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的文件，代码如下，

          首页                    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)

  5、运行展示

  切换到flask01.py文件下，右键运行，然后将http://127.0.0.1:5000复制到浏览器即可看到结果展示页面

  6、源码链接

  点这里获取源码