【爬取豆瓣前 250 部电影】Python 爬虫和数据可视化（下篇）

我不是女神ヾ 2023-01-05 12:26 153阅读 0赞

### 文章目录 ###

*  数据可视化
 *   *  Flask 入门
     *  Echarts 应用

# 数据可视化 #

项目展示

> 主页

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70]

> 电影页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 1][]

> 评分分布图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 2]

> 词云页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 3]

> 开发人员页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 4]

## Flask 入门 ##

Flash 作为 Web 的框架，它的作用主要是为了开发 Web 应用程序

创建第一个 Flask 程序，主要做两件事，一是路由解析，二是重定向到指定页面

也就是说，当访问 127.0.01:5000/ 的时候，会访问 index.html 页面(5000是flask框架默认的)

from flask import Flask,render_template
    import sqlite3
    app = Flask(__name__)
    
    @app.route('/')
    def index():
        return render_template("index.html")
    
    if __name__ == '__main__':
        app.run()

其它几个页面也是类似

例如，电影页面的业务层如下

@app.route('/movie')
    def movie():
        datalist = []
        con = sqlite3.connect("movie.db")
        cur = con.cursor()
        sql = "select * from movie250"
        data = cur.execute(sql)
        for item in data:
            datalist.append(item)
        cur.close()
        con.close()
        return render_template("movie.html",movies = datalist)

评分网页 业务层代码

@app.route('/score')
    def score():
        score = [] # 评分
        num = [] # 评分电影数
        con = sqlite3.connect("movie.db")
        cur = con.cursor()
        sql = "select score,count(score) from movie250 group by score"
        data = cur.execute(sql)
        for item in data:
            score.append(item[0])
            num.append(item[1])
        cur.close()
        con.close()
        return render_template("score.html",score = score,num = num)

前端方面的代码可以在网上找一个模板

## Echarts 应用 ##

Echarts 主要用在了评分分布图

<div id="main" style="width: 100%;height:400px;"></div>
    
    
    <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { }, tooltip: { }, legend: { data:['销量'] }, xAxis: { show :true, axisTick:{ show :false }, name:'电影评分', type:'category', data:{ { score }}, /*从业务层传来的分数列表*/ nameTextStyle:{ fontStyle : 'normal', fontWeight: 'bold' }, /*data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]*/ }, yAxis: { name:'电影数量', axisTick:{ show :false }, nameTextStyle:{ fontStyle : 'normal', fontWeight: 'bold' }, type:'value' }, series: [{ /*data: [5, 20, 36, 10, 10, 20],*/ data:{ { num }}, /*这个是从业务层传来的列表*/ barWidth:'60%', type: 'bar' }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70]: /images/20221119/1887f816089b43679a78d1625a8d513b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210112150654789.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210112150725905.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210112150921795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021011215094222.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzYzMzQ0,size_16,color_FFFFFF,t_70