基于ECharts+flask的爬虫可视化

ོ栖落

已于 2023-08-22 23:45:02 修改

阅读量908

点赞数 1

分类专栏：前端案例文章标签： flask python echarts

于 2023-08-22 23:44:36 首次发布

本文链接：https://blog.csdn.net/qq_63806300/article/details/132439333

版权

案例同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

5 篇文章 3 订阅

订阅专栏

本文介绍了如何使用Python的Flask框架构建一个项目，通过爬虫获取数据并存储在CSV文件中，然后利用echarts在网页上动态渲染数据。爬虫部分实现了自动加载功能，数据实时更新到网页上的饼图展示。

摘要由CSDN通过智能技术生成

项目效果。

本案例基于python的flask框架，通过爬虫程序将数据存储在csv文件中，在项目运行时会通过render_template映射出对应的页面，并且触发一个函数，该函数会读取csv文件的数据将之交给echarts渲染，echarts将之渲染到页面中。

demo.html

from flask import Flask,render_template
import pandas as pd

app = Flask(__name__)

@app.route("/")
def show():
    data = pd.read_csv('data.csv',encoding='gbk').to_dict(orient="records")
    return render_template("demo.html",data=data)

if __name__ == '__main__':
    app.run()

movie.py

import requests
import re

#获取页面信息
url = "https://movie.douban.com/top250"
headers = {
    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.27"
}
r = requests.get(url,headers=headers)
r = r.text
#解析页面
obj = re.compile(r'<li>.*?<span class="title">(?P<name>.*?)</span>.*?'
                 r'<span>(?P<num>.*?)人评价',re.S)
#匹配
result = obj.finditer(r)
f = open("data.csv",mode="a")
i = 0
f.write("name,value\n")
#输入
for it in result:
    f.write(str(i)+","+it.group("name")+","+it.group("num")+'\n')
    i += 1
f.close()

demo.html

<html>
    <head>
        <style>
            *{
                margin:0;
                padding:0;
              }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    </head>
    <body>
    <div id="main" style="width:100%;height:100%;background:gray;"></div>
    <script>
        var chartDom = document.getElementById('main');
        console.log(chartDom);
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title: {
            text: 'top',
            subtext: 'movie',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: {{data|tojson}},
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        myChart.setOption(option);
    </script>
    </body>
</html>

data.csv

data.csv由movie.py运行得到。

name,value
0,肖申克的救赎,2908819
1,霸王别姬,2147509
2,阿甘正传,2168793
3,泰坦尼克号,2199337
4,这个杀手不太冷,2302579
5,千与千寻,2252354
6,美丽人生,1330888
7,辛德勒的名单,1109486
8,星际穿越,1845221
9,盗梦空间,2068413
10,楚门的世界,1717501
11,忠犬八公的故事,1403302
12,海上钢琴师,1683202
13,三傻大闹宝莱坞,1864702
14,放牛班的春天,1316000
15,机器人总动员,1320349
16,无间道,1368920
17,疯狂动物城,1944723
18,控方证人,563523
19,大话西游之大圣娶亲,1538921
20,熔炉,934045
21,教父,971356
22,触不可及,1117970
23,当幸福来敲门,1524931
24,末代皇帝,888701

当然，我更希望爬虫程序是自动加载的，可以将之封装为一个函数，在页面加载时调用它。

ོ栖落

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
基于ECharts+flask的爬虫可视化

本案例基于python的flask框架，通过爬虫程序将数据存储在csv文件中，在项目运行时会通过render_template映射出对应的页面，并且触发一个函数，该函数会读取csv文件的数据将之交给echarts渲染，echarts将之渲染到页面中。当然，我更希望爬虫程序是自动加载的，可以将之封装为一个函数，在页面加载时调用它。
复制链接

扫一扫