获取源代码请访问 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) #执行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】
【数据可视化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】
【数据可视化3】
使用Echarts图表时，注意在网页头部标签声明
<script src="/static/js/echarts.min.js"></script>
此js文件需要到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】
【数据可视化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】
三、页面展示
