南丁格尔玫瑰图

项目效果图

Snipaste_2021-03-17_10-23-41

Snipaste_2021-03-17_10-23-54

Snipaste_2021-03-17_10-24-04

Snipaste_2021-03-17_10-24-13

Snipaste_2021-03-17_10-24-19

项目目录结构

  • project
    • app
      • static
        • js
          • echarts.js
      • templates
        • index.html
      • __init__.py
      • config.py
      • extentions.py
      • models.py
      • views.py
    • manage.py

项目代码

index.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/echarts.js"></script>
    <script>
        window.onload=function (){
            var chartObj=echarts.init(document.getElementById("main"))
            var chartObj2=echarts.init(document.getElementById("main2"))
            var chartObj3=echarts.init(document.getElementById("main3"))
            var chartObj4=echarts.init(document.getElementById("main4"))
            var chartObj5=echarts.init(document.getElementById("main5"))
            var option={
                title:{
                    text:"折线图展示"
                },
                legend:{},
                tooltip:{
                    trigger:"item",
                    formatted:"{a}<br>{b}{c}:{d}"
                },
                xAxis:{
                    data:[{% for i in names%}"{{i.name}}",{% endfor%}]
                },
                yAxis:{
                    type:"value"
                },
                series:[{
                    type:"line",
                    smooth:true,
                    name:"值",
                    data:[{% for i in names%}"{{i.value}}",{% endfor%}],
                    itemStyle:{
                        normal:{
                            areaStyle:{}
                        }
                    }
                }]
            };
            var option2={
                title:{
                    text:"柱状图展示"
                },
                legend:{},
                tooltip:{
                    trigger:"item",
                    formatted:"{a}<br>{b}{c}:{d}"
                },
                xAxis:{
                    data:[{% for i in names%}"{{i.name}}",{% endfor%}]
                },
                yAxis:{
                    type:"value"
                },
                series:[{
                    type:"bar",
                    name:"值",
                    data:[{% for i in names%}"{{i.value}}",{% endfor%}],
                    itemStyle:{
                        normal:{
                            areaStyle:{}
                        }
                    }
                }]
            };
            var option3={
                title:{
                    text:"饼图展示",
                    left:"center"
                },
                tooltip:{
                    trigger:"item"
                },
                legend:{
                    orient:"vertical",
                    left:"left"
                },
                series:[{
                    name:"日期",
                    type:"pie",
                    radius:"50%",
                    data:[{% for i in names%}{value:{{i.value}},name:"{{i.name}}"},{%endfor%}],
                emphasis:{
                    itemStyle:{
                        shadowBlur:10,
                        shadowOffsetX:0,
                        shadowColor:"rgba(0,0,0,0.5)"
                    }
                }
                }]
            };
            var option4={
                title:{
                    text:"南丁格尔玫瑰图",
                    left:"center"
                },
                tooltip:{
                    trigger:"item"
                },
                legend:{
                    orient:"vertical",
                    left:"left"
                },
                series:[{
                    name:"日期",
                    type:"pie",
                    radius:"50%",
                    data:[{% for i in names%}{value:{{i.value}},name:"{{i.name}}"},{%endfor%}],
                    roseType:"radius",
                    emphasis:{
                        itemStyle:{
                            shadowBlur:10,
                            shadowOffsetX:0,
                            shadowColor:"rgba(0,0,0,0.5)"
                        }
                    }
                }]
            };
            var option5 = {
                title:{
                    text:"散点图"
                },
                tooltip:{
                    trigger:"item"
                },
                xAxis: {},
                yAxis: {},
                series: [{
                    symbolSize: 20,
                    data: [
                        [10.0, 8.04],
                        [8.07, 6.95],
                        [13.0, 7.58],
                        [9.05, 8.81],
                        [11.0, 8.33],
                        [14.0, 7.66],
                        [13.4, 6.81],
                        [10.0, 6.33],
                        [14.0, 8.96],
                        [12.5, 6.82],
                        [9.15, 7.20],
                        [11.5, 7.20],
                        [3.03, 4.23],
                        [12.2, 7.83],
                        [2.02, 4.47],
                        [1.05, 3.33],
                        [4.05, 4.96],
                        [6.03, 7.24],
                        [12.0, 6.26],
                        [12.0, 8.84],
                        [7.08, 5.82],
                        [5.02, 5.68]
                    ],
                    type: 'scatter'
                }]
            };
            chartObj.setOption(option)
            chartObj2.setOption(option2)
            chartObj3.setOption(option3)
            chartObj4.setOption(option4)
            chartObj5.setOption(option5)
        }
    </script>
</head>
<body>
    <div id="main" style="width:600px;height:600px"></div>
    <div id="main2" style="width:600px;height:600px"></div>
    <div id="main3" style="width:600px;height:600px"></div>
    <div id="main4" style="width:600px;height:600px"></div>
    <div id="main5" style="width:600px;height:600px"></div>
</body>
</html>

__init__.py

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask

from app.extentions import init
from app.views import register_main
from app.config import config

def create_app():
    app=Flask(__name__)
    app.config.from_object(config.get("develop"))
    register_main(app)
    init(app)
    return app

config.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class DevelopmentConfig():
    SQLALCHEMY_DATABASE_URI="mysql+pymysql://root:123456@localhost:3306/person1"

class TestingConfig():
    SQLALCHEMY_DATABASE_URI="mysql+pymysql://root:123456@localhost:3306/person1"

class ProductionConfig():
    SQLALCHEMY_DATABASE_URI="mysql+pymysql://root:123456@localhost:3306/person1"

config={
    "develop":DevelopmentConfig(),
    "testing":TestingConfig(),
    "product":ProductionConfig(),
    "default":DevelopmentConfig()
}

extentions.py

1
2
3
4
5
6
7
8
9
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate

db=SQLAlchemy()
migrate=Migrate()

def init(app):
    db.init_app(app)
    migrate.init_app(app,db)

models.py

1
2
3
4
5
6
from app.extentions import db

class Person(db.Model):
    __tablename__="person"
    name=db.Column(db.String(32),primary_key=True)
    value=db.Column(db.Integer,nullable=True)

views.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
from flask import Blueprint,render_template
from app.models import Person

main=Blueprint("main",__name__)
def register_main(app):
    app.register_blueprint(blueprint=main)

@main.route("/")
def hello():
    return "hello world"

@main.route("/index/")
def index():
    names=Person.query.all()
    return render_template("index.html",names=names)

manage.py

1
2
3
4
5
6
7
8
9
10
from flask_script import Manager
from flask_migrate import MigrateCommand
from app import create_app

app=create_app()
manage=Manager(app)
manage.add_command("db",MigrateCommand)

if __name__ == '__main__':
    manage.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
/*
Navicat MySQL Data Transfer
Source Host     : localhost:3306
Source Database : person1
Target Host     : localhost:3306
Target Database : person1
Date: 2021-03-17 11:00:22
*/

SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for person
-- ----------------------------
DROP TABLE IF EXISTS `person`;
CREATE TABLE `person` (
  `name` varchar(32) NOT NULL,
  `value` varchar(32) DEFAULT NULL,
  PRIMARY KEY (`name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of person
-- ----------------------------
INSERT INTO `person` VALUES ('周一', '12');
INSERT INTO `person` VALUES ('周三', '18');
INSERT INTO `person` VALUES ('周二', '15');
INSERT INTO `person` VALUES ('周五', '24');
INSERT INTO `person` VALUES ('周六', '23');
INSERT INTO `person` VALUES ('周四', '48');
INSERT INTO `person` VALUES ('周日', '34');

数据迁移

python manage.py db init

python manage.py db migrate

python manage.py db upgrade

执行代码

python manage.py runserver