数据可视化
获取源代码请访问
https://github.com/zhang020801/douban_bookTop250
一、前言
前一篇文章（文章链接）中已经将爬取到的数据导入到Sqlist数据库中，接下来是将数据库中的数据可视化，（用到html、css、Flask框架、Echarts图表）
选择合适的网页模板进行修改，模板选择下载地址：模板链接
二、工程介绍
1、工程创建
（1）将下载好的模板导入到包含数据库文件（.db文件）的目录下，或者是将数据库文件复制到该网页模板的文件夹中。
（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)
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()
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】
【数据可视化2】
<h2 class="tm-block-title">Top250 Listh2>
<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】
【数据可视化3】
使用Echarts图表时，注意在网页头部标签声明
<script src="/static/js/echarts.min.js">script>
此js文件需要到Echarts官网下载到该工程的js文件夹下。
<h2 class="tm-block-title">Top250 Score Listh2>
<div id="main" style="width: 100%;height:300px;">div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
color: ['#a957a9'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: '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】
【数据可视化4】
<h2 class="tm-block-title">Score Listh2>
<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】
三、页面展示
Original: https://blog.csdn.net/gets_s/article/details/113097816
Author: 小狐狸梦想去童话镇
Title: 爬取后的数据可视化Flask框架、Echarts图表
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/750265/
转载文章受原作者版权保护。转载请注明原作者出处！