data visualization
To get the source code, please visit https://github.com/zhang020801/douban_bookTop250
I. Introduction
In the previous article ( article link ), the crawled data has been imported into the Sqlist database. The next step is to visualize the data in the database (using html, css, Flask framework, Echarts chart) to
select the appropriate web page template To modify, select the download address of the template : template link
2. Project introduction
1. Project creation
(1) Import the downloaded template to the directory containing the database file (.db file), or copy the database file to the folder of the web page template.
(2) Create a new app.py project and write the Flask framework
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. Web page modification
Make appropriate deletions to the imported templates, analyze and visualize the data in the database.
To use the incoming data in a web page file (.html file) , use double curly braces to enclose "{
{}}". Use the following format when writing loops
in web files (.html files)
{% for book in books %}
...
...
{% endfor %}
3. Data visualization
【Data Visualization 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>
[Visual display 1]
[Data visualization 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>
[Visual display 2]
[Data visualization 3]
When using Echarts charts, pay attention to the label declaration in the header of the web page
<script src="/static/js/echarts.min.js"></script>
This js file needs to be downloaded from Echarts official website to the js folder of the project.
<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>
[Visual display 3]
[Data visualization 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>
[Visual display 4]
Three, page display
