数据可视化

一、Flask介绍

#通过访问路径，获取用户的字符串参数
@app.route('/user/')
def welcome(name):
    return "你好，%s"%name
1
2
3
4

在这里插入图片描述

@app.route('/user/')
def welcome2(id):
    return "你好，%d号的会员"%id
1
2
3

在这里插入图片描述
能够自动根据参数匹配不同的路由

#返回给用户渲染后的网页文件
@app.route('/')
def index2():
    return render_template("index.html") #渲染模板
1
2
3
4

在这里插入图片描述

def index2():
    time= datetime.date.today() #普通变量
    name=["小张","小王","小赵"]#列表变量
    task={"任务":"打扫卫生","时间":"3小时"}
    return render_template("index.html",var=time,list=name,task=task)

1
2
3
4
5
6

<body>
  今天是{{ var }},欢迎光临。<br/>
  今天值班的有:<br/>
  {% for data in list %}
      <li>{{ data }}li>
  {% endfor %}

  任务：<br/>  
      <table border="1">
          {% for key,value in task.items() %} 
             <tr>
                 <td>{{ key }}td>
                 <td>{{ value }}td>
             tr>
          {% endfor %}
      table>

body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

二、豆瓣数据可视换案列

2.1、五分钟上手Echarts

https://echarts.apache.org/v4/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

测试demo:

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartstitle>
    
    <script src="echarts.min.js">script>
head>
<body>
    
    <div id="main" style="width: 600px;height:400px;">div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

在这里插入图片描述
豆瓣项目
需要显示字符串时：

并且前端使用tojson完成接收数据
在这里插入图片描述
完整代码：
app.py

from flask import Flask,render_template
import sqlite3

app = Flask(__name__)


@app.route('/')
def index():
    return render_template("index.html")


@app.route('/index')
def home():
    #return render_template("index.html")
    return index()


@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()
    # print(datalist)
    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(str(item[0]))
        num.append(item[1])

    cur.close()
    con.close()
    return render_template("score.html",score= score,num=num)


@app.route('/word')
def word():
    return render_template("word.html")

@app.route('/team')
def team():
    return render_template("team.html")


if __name__ == '__main__':
    app.run()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

movie.html

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>豆瓣Top250数据分析title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">

  
  <link href="static/assets/img/favicon.png" rel="icon">
  <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">

  
  <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">

  
  <link href="static/assets/css/style.css" rel="stylesheet">

head>

<body>



  
  <header id="header">
    <div class="container">

      <div class="logo float-left">
        <h1 class="text-light"><a href="temp.html"><span>Mambaspan>a>h1>
        
        
      div>

      <nav class="nav-menu float-right d-none d-lg-block">
        <ul>
          <li class="active"><a href="/index">首页<i class="la la-angle-down">i>a>li>
          <li><a href="/movie">电影a>li>
          <li><a href="/score">评分a>li>
          <li><a href="/word">词云a>li>
          <li><a href="/team">团队a>li>

        ul>
      nav>

    div>
  header>

  
    <section id="team" class="team">
      <div class="container">

        <div class="section-title">
          <h2>豆瓣电影Top250电影h2>
        div>

        
    <section class="counts section-bg">
      <div class="container">

          <table class="table table-striped">

              <tr>
                  <td>排名td>
                  <td>电影中文名称td>
                  <td>电影外国名称td>
                  <td>评分td>
                  <td>评价人数td>
                  <td>一句话概述td>
                  <td>其他信息td>
              tr>

              {% for movie in movies %}
              <tr>
                  <td>{{movie[0]}}td>
                  <td>
                      <a href="{{ movie[1] }}" target="_blank">
                      {{ movie[3] }}
                        a>
                  td>
                  <td>{{movie[4]}}td>
                  <td>{{movie[5]}}td>
                  <td>{{movie[6]}}td>
                  <td>{{movie[7]}}td>
                  <td>{{movie[8]}}td>
              tr>

              {% endfor %}


          table>


        div>

      div>
    section>

      div>
    section>


  
  <footer id="footer">


    <div class="container">
      <div class="copyright">
        © Copyright <strong><span>Mambaspan>strong>. All Rights Reserved
      div>

    div>
  footer>

  <a href="#" class="back-to-top"><i class="icofont-simple-up">i>a>

  
  <script src="static/assets/vendor/jquery/jquery.min.js">script>
  <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js">script>
  <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js">script>
  <script src="static/assets/vendor/php-email-form/validate.js">script>
  <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js">script>
  <script src="static/assets/vendor/venobox/venobox.min.js">script>
  <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js">script>
  <script src="static/assets/vendor/counterup/counterup.min.js">script>
  <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js">script>
  <script src="static/assets/vendor/aos/aos.js">script>

  
  <script src="static/assets/js/main.js">script>

body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

score.html

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <script src="static/assets/js/echarts.min.js">script>

  <title>豆瓣Top250数据分析title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">

  
  <link href="static/assets/img/favicon.png" rel="icon">
  <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">

  
  <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">

  
  <link href="static/assets/css/style.css" rel="stylesheet">

head>

<body>



  
  <header id="header">
    <div class="container">

      <div class="logo float-left">
        <h1 class="text-light"><a href="temp.html"><span>Mambaspan>a>h1>
        
        
      div>

      <nav class="nav-menu float-right d-none d-lg-block">
        <ul>
          <li class="active"><a href="/index">首页<i class="la la-angle-down">i>a>li>
          <li><a href="/movie">电影a>li>
          <li><a href="/score">评分a>li>
          <li><a href="/word">词云a>li>
          <li><a href="/team">团队a>li>

        ul>
      nav>

    div>
  header>

  
    <section id="team" class="team">
      <div class="container">

        <div class="section-title">
          <h2>豆瓣电影Top250评分分布图h2>
        div>

        
    <section class="counts section-bg">
      <div class="container">

            
            <div id="main" style="width: 100%;height:300px">div>


      div>
    section>

      div>
    section>

 <script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {

    color:['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right:'4%',
        bottom:'3%',
        containLabel:true
    },
    xAxis: {
        type: 'category',
        data: {{ score|tojson }}
        <!--['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','999']-->
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: {{ num }},
            <!--[120, 20, 150, 80, 70, 110, 130,200],-->
        barWidth:'60%',
        type:'bar'
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       script>


  
  <footer id="footer">


    <div class="container">
      <div class="copyright">
        © Copyright <strong><span>Mambaspan>strong>. All Rights Reserved
      div>
    
    div>
  footer>

  <a href="#" class="back-to-top"><i class="icofont-simple-up">i>a>

  
  <script src="static/assets/vendor/jquery/jquery.min.js">script>
  <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js">script>
  <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js">script>
  <script src="static/assets/vendor/php-email-form/validate.js">script>
  <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js">script>
  <script src="static/assets/vendor/venobox/venobox.min.js">script>
  <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js">script>
  <script src="static/assets/vendor/counterup/counterup.min.js">script>
  <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js">script>
  <script src="static/assets/vendor/aos/aos.js">script>

  
  <script src="static/assets/js/main.js">script>

body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

相关阅读:
网络安全之WebShell截获
 OSPF实验：配置与检测全网互通
 Docker Harbor&&Docker Registry
好用的爬取静态页面谷歌浏览器工具：Save All Resources
python用selenium网页模拟时xpath无法定位元素解决方法2
springboot 通过url下载文件并上传到OSS
LeetCoded贪心算法系列——455.分发饼干
 js 前端 Function.prototype.call.call(0[‘toString‘], *, 16)
使用canvas做了一个最简单的网页版画板，5分钟学会
 [C#]C#调用cplex
原文地址：https://blog.csdn.net/qq_53906512/article/details/132925502