爬取后的数据可视化Flask框架、Echarts图表

小咪咪 2023-01-10 14:38 90阅读 0赞

### 数据可视化 ###

*  一、前言
 *  二、工程介绍
 *   *  1、工程创建
     *  2、网页修改
     *  3、数据可视化
 *  三、页面展示

获取源代码请访问 [https://github.com/zhang020801/douban\_bookTop250][https_github.com_zhang020801_douban_bookTop250]

# 一、前言 #

前一篇文章（[文章链接][Link 1]）中已经将爬取到的数据导入到Sqlist数据库中，接下来是将数据库中的数据可视化，（用到html、css、Flask框架、Echarts图表）  
选择合适的网页模板进行修改，模板选择下载地址：[模板链接][Link 2]

# 二、工程介绍 #

## 1、工程创建 ##

（1）将下载好的模板导入到包含数据库文件（.db文件）的目录下，或者是将数据库文件复制到该网页模板的文件夹中。  
![在这里插入图片描述][20210124213548273.png]  
（2）新建app.py工程，进行Flask框架的编写

from flask import Flask,render_template
    import sqlite3
    app = Flask(__name__)
    
    @app.route("/index")
    def index():
        datalist = []
        conn = sqlite3.connect("book.db") #链接数据库
        cur = conn.cursor()
        sql = "select id,title,score,book_link,Img_link,author,press,time,money,num,jieshao from book250"
        data = cur.execute(sql)   #执行sql语句
        for item in data:
            datalist.append(item)
        score = []
        num = []
        conn = sqlite3.connect("book.db")
        cur = conn.cursor()
        sql = "select score,count(score) from book250 group by score"
        data = cur.execute(sql)
        for item in data:
            score.append(item[0])
            num.append(item[1])
        cur.close()
        conn.close()
        #将图书列表数据传递到index网页中
        return render_template("index.html",books = datalist,score = score,num = num)
    
    
    if __name__ == '__main__':
        app.run(debug=True)

## 2、网页修改 ##

对导入的模板进行适当的删改，对数据库中的数据进行分析，并可视化。  
在**网页文件（.html文件）** 中使用传入的数据要用双大括号括起来“\{ \{\}\}"。  
在**网页文件（.html文件）** 中编写循环时要使用下列格式

{% for book in books %}
    ...
    ...
    {% endfor %}

## 3、数据可视化 ##

【数据可视化1】

<h2 class="tm-block-title">Top250书单</h2>
    <table class="table table-striped">
    	<thead>
    		<tr>
    			<th scope="col">排名</th>
    			<th scope="col">图书名称</th>
    			<th scope="col">评分</th>
                <th scope="col">图书链接</th>
    			<th scope="col">作者/译者</th>
    			<th scope="col">出版社</th>
    			<th scope="col">出版时间</th>
    			<th scope="col">售价</th>
    			<th scope="col">评论人数</th>
    			<th scope="col">简要介绍</th>
    		</tr>
    	 </thead>
    	<tbody>
    	{% for book in books %}
    		<tr>
    			<td>
    				<div class="tm-status-circle moving">
                                        </div>{
       {book[0]}}
                </td>
    			<td>{
       {book[1]}}</td>
    			<td>{
       {book[2]}}</td>
    			<td>{
       {book[3]}}</td>
    			<td>{
       {book[5]}}</td>
    			<td>{
       {book[6]}}</td>
    			<td>{
       {book[7]}}</td>
    			<td>{
       {book[8]}}</td>
    			<td>{
       {book[9]}}</td>
    			<td>{
       {book[10]}}</td>
    		</tr>
    	{% endfor %}
    	</tbody>
    </table>

【可视化展示1】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw_size_16_color_FFFFFF_t_70]  
【数据可视化2】

<h2 class="tm-block-title">Top250 List</h2>
    <div class="tm-notification-items">
    	{% for book in books %}
    	<div class="media tm-notification-item">
    		<div class="media-body">
    			<p class="mb-2"><b>《{
       {book[1]}}》</b>
    			<a href="{
         {book[3]}}" class="tm-notification-link">图书链接</a></p>
    			<p>{
       {book[10]}}</p>
    			<span class="tm-small tm-text-color-secondary">{
       {book[6]}}    {
       {book[7]}}</span>
    		</div>
    	</div>
    	{% endfor %}
    </div>

【可视化展示2】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw_size_16_color_FFFFFF_t_70 1]  
【数据可视化3】  
使用Echarts图表时，注意在网页头部标签声明

此js文件需要到[Echarts官网][Echarts]下载到该工程的js文件夹下。

<h2 class="tm-block-title">Top250 Score List</h2>
    <div id="main" style="width: 100%;height:300px;"></div>
    	<script type="text/javascript">
    	// 基于准备好的dom，初始化echarts实例
    	var myChart = echarts.init(document.getElementById('main'));
    	// 指定图表的配置项和数据
    	var option = {
         
    				color: ['#a957a9'],
    				tooltip: {
         
    				trigger: 'axis',
    				axisPointer: {
                     // 坐标轴指示器，坐标轴触发有效
    				type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    				}
    			},
                    grid: {
         
                           eft: '3%',
                           right: '4%',
                           bottom: '3%',
                           containLabel: true
                           },
                    xAxis: [
                         {
         
                            type: 'category',
                            data: {
         {
         score}},
                            axisTick: {
         
                                  alignWithLabel: true
                            }
                          }	
                        ],
                    yAxis: [
                         {
         
                            type: 'value'
                         }
                    	],
                    series: [
                          {
         
                             type: 'bar',
                             barWidth: '60%',
                             data:{
         {
         num}}
                          }
                         ]
                       };
           // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
    	</script>

【可视化展示3】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw_size_16_color_FFFFFF_t_70 2]  
【数据可视化4】

<h2 class="tm-block-title">Score List</h2>
                             <div id="main1" style="width: 100%;height:300px;"></div>
                            <script type="text/javascript">
                            var chartDom = document.getElementById('main1');
                            var myChart = echarts.init(chartDom);
                            var option;
    
                            option = {
         
                                title: {
         
                                    text: '评分分析',
                                    subtext: '数据来源于网络',
                                    left: 'center'
                                },
                                tooltip: {
         
                                    trigger: 'item'
                                },
                                legend: {
         
                                    orient: 'vertical',
                                    left: 'left',
                                },
                                series: [
                                    {
         
                                        name: '评分及对应数量',
                                        type: 'pie',
                                        radius: '50%',
                                        data: [
                                            {
         value: {
         {
         num[0]}}, name:{
         {
         score[0]}}},
                                            {
         value: {
         {
         num[1]}}, name:{
         {
         score[1]}}},
                                            {
         value: {
         {
         num[2]}}, name:{
         {
         score[2]}}},
                                            {
         value: {
         {
         num[3]}}, name:{
         {
         score[3]}}},
                                            {
         value: {
         {
         num[4]}}, name:{
         {
         score[4]}}},
                                            {
         value: {
         {
         num[5]}}, name:{
         {
         score[5]}}},
                                            {
         value: {
         {
         num[6]}}, name:{
         {
         score[6]}}},
                                            {
         value: {
         {
         num[7]}}, name:{
         {
         score[7]}}},
                                            {
         value: {
         {
         num[8]}}, name:{
         {
         score[8]}}},
                                            {
         value: {
         {
         num[9]}}, name:{
         {
         score[9]}}},
                                            {
         value: {
         {
         num[10]}}, name:{
         {
         score[10]}}},
                                            {
         value: {
         {
         num[11]}}, name:{
         {
         score[11]}}},
                                            {
         value: {
         {
         num[12]}}, name:{
         {
         score[12]}}},
                                            {
         value: {
         {
         num[13]}}, name:{
         {
         score[13]}}}
    
                                        ],
                                        emphasis: {
         
                                            itemStyle: {
         
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            };
                             myChart.setOption(option);
                        </script>

【可视化展示4】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw_size_16_color_FFFFFF_t_70 3]

# 三、页面展示 #

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

[https_github.com_zhang020801_douban_bookTop250]: https://github.com/zhang020801/douban_bookTop250
[Link 1]: https://blog.csdn.net/gets_s/article/details/112872506
[Link 2]: http://www.mobanwang.com/
[20210124213548273.png]: /images/20221119/e70f50ae4c464086a1c7538bbc0f0c85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw_size_16_color_FFFFFF_t_70]: /images/20221119/d27262434b954259bef15fff162debf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210124220332618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw==,size_16,color_FFFFFF,t_70
[Echarts]: https://echarts.apache.org/zh/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210124221205156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210124221626251.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210124221806477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dldHNfcw==,size_16,color_FFFFFF,t_70