从安装软件到flask框架搭建可视化大屏（二）——创建一个flask页面，搭建可视化大屏，零基础也可以学会

开源代码
2025-09-09 19:48:01

附录：所有文件的完整代码 models.py # models/models.py from flask_sqlalchemy import SQLAlchemy db = SQLAlchemy() class User(db.Model): __tablename__ = 'user' # 显式指定表名为 'user' id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(150), unique=True, nullable=False) password = db.Column(db.String(150), nullable=False) def __repr__(self): return f'<User {self.username}>' forms.py from flask_wtf import FlaskForm from wtforms import StringField, PasswordField, SubmitField from wtforms.validators import DataRequired, Length, EqualTo, Regexp class LoginForm(FlaskForm): username = StringField('用户名', validators=[DataRequired(), Length(min=4, max=25)], render_kw={"placeholder": "请输入用户名"}) password = PasswordField('密码', validators=[DataRequired(), Length(min=6, max=80)], render_kw={"placeholder": "请输入密码"}) submit = SubmitField('登录') class RegisterForm(FlaskForm): username = StringField('用户名', validators=[DataRequired(), Length(min=4, max=25)], render_kw={"placeholder": "请输入用户名"}) password = PasswordField('密码', validators=[ DataRequired(), Length(min=6), Regexp( '^(?=.*[a-z])(?=.*[A-Z])(?=.*\W).+$', message='密码至少包含一个大写字母，一个小写字母和一个特殊字符' ) ], render_kw={"placeholder": "请输入密码"}) confirm = PasswordField('确认密码', validators=[EqualTo('password')], render_kw={"placeholder": "请再次输入密码"}) submit = SubmitField('确认') views.py # views/views.py from flask import Blueprint, render_template, redirect, url_for, flash, request, session from forms.forms import LoginForm, RegisterForm from models.models import db, User views_bp = Blueprint('views', __name__) @views_bp.route('/login', methods=['GET', 'POST']) def login(): form = LoginForm() if form.validate_on_submit(): username = form.username.data password = form.password.data user = User.query.filter_by(username=username).first() # TODO: Implement password hashing if user and user.password == password: flash('登录成功!', 'success') # 设置用户会话 session['username'] = user.username return redirect(url_for('views.index')) # 登录后跳转到 index.html else: flash('无效的用户名或密码', 'danger') return render_template('login.html', form=form) @views_bp.route('/register', methods=['GET', 'POST']) def register(): form = RegisterForm() if form.validate_on_submit(): username = form.username.data password = form.password.data if User.query.filter_by(username=username).first(): flash('用户名已存在', 'danger') return redirect(url_for('views.register')) user = User(username=username, password=password) db.session.add(user) try: db.session mit() flash('注册成功，请登录', 'success') return redirect(url_for('views.login')) except Exception as e: db.session.rollback() flash('注册失败，请重试', 'danger') print(f"注册错误: {e}") else: # 捕捉密码格式验证失败的情况 if form.password.errors: flash('注册失败，请重新输入密码', 'danger') return render_template('register.html', form=form) @views_bp.route('/visual_dashboard') def visual_dashboard(): # 检查用户是否已登录 if 'username' not in session: flash('请先登录', 'danger') return redirect(url_for('views.login')) return render_template('visual_dashboard.html', title='可视化大屏') @views_bp.route('/') def index(): # 检查用户是否已登录 if 'username' not in session: flash('请先登录', 'danger') return redirect(url_for('views.login')) return render_template('index.html') @views_bp.route('/logout') def logout(): session.pop('username', None) flash('已登出', 'success') return redirect(url_for('views.login')) @views_bp.route('/quota') def quota(): return render_template('quota.html') @views_bp.route('/trend') def trend(): return render_template('trend.html') @views_bp.route('/chronic') def chronic(): return render_template('chronic.html') @views_bp.route('/go_to_quota') def go_to_quota(): return redirect(url_for('views.quota')) @views_bp.route('/go_to_trend') def go_to_trend(): return redirect(url_for('views.trend')) @views_bp.route('/go_to_chronic') def go_to_chronic(): return redirect(url_for('views.chronic')) app.py # app.py from flask import Flask, render_template, redirect, url_for, flash from config import Config from models.models import db, User from forms.forms import LoginForm, RegisterForm from views.views import views_bp def create_app(): app = Flask(__name__) app.config.from_object(Config) db.init_app(app) with app.app_context(): db.create_all() # 创建默认用户（如果不存在） if not User.query.filter_by(username='admin').first(): user = User(username='admin', password='password') # TODO: Implement password hashing db.session.add(user) db.session mit() # 注册蓝图 app.register_blueprint(views_bp) # 定义根路径路由，重定向到登录页面 @app.route('/') def index(): return redirect(url_for('views.login')) # 其他路由保持不变 @app.route('/quota') def quota(): return render_template('quota.html') @app.route('/trend') def trend(): return render_template('trend.html') @app.route('/chronic') def chronic(): return render_template('chronic.html') @app.route('/go_to_quota') def go_to_quota(): return redirect(url_for('views.quota')) @app.route('/go_to_trend') def go_to_trend(): return redirect(url_for('views.trend')) @app.route('/go_to_chronic') def go_to_chronic(): return redirect(url_for('views.chronic')) return app app = create_app() if __name__ == '__main__': app.run(debug=True) config.py import os class Config: SECRET_KEY = os.environ.get('SECRET_KEY') or 'you-will-never-guess' SQLALCHEMY_DATABASE_URI = 'mysql+mysqlconnector://root:mysql@localhost:3306/demologin' SQLALCHEMY_TRACK_MODIFICATIONS = False base.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}可视化系统{% endblock %}</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> </head> <body> {% block body %} <div class="login-background"> <div class="login-container"> {% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %} <div class="alert alert-{{ category }}">{{ message }}</div> {% endfor %} {% endif %} {% endwith %} {% block content %}{% endblock %} </div> <img src=" sso.xyafu.edu /sso/img/text.png" alt="标语" class="slogan"> <img src=" .xyafu.edu /images/logo.png" alt="Logo" class="logo"> </div> {% endblock %} <script src="{{ url_for('static', filename='js/scripts.js') }}"></script> </body> </html> chronic.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据可视化demo</title> <link href="../static/css/common.css" rel="stylesheet"> <link href="../static/css/bootstrap.min.css" rel="stylesheet"> <link href="../static/css/bootstrap-table.css" rel="stylesheet"> <link href="../static/css/pagination.css" rel="stylesheet"> <script src="../static/js/Plugin/jquery-3.3.1.min.js"></script> <script src="../static/js/Plugin/echarts.min.js"></script> <script src="../static/js/Plugin/jquery.pagination.min.js"></script> <script src="../static/js/common.js"></script> <script src="../static/js/chronic.js"></script> </head> <body>  <header class="header left"> <div class="left nav"> <ul> <li class="nav_active"><i class="nav_1"></i><a href="{{ url_for('index') }}">采集概况</a></li> <li><i class="nav_2"></i><a href="{{ url_for('quota') }}">指标分析</a></li> <li><i class="nav_3"></i><a href="{{ url_for('trend') }}">趋势分析</a></li> <li><i class="nav_4"></i><a href="{{ url_for('chronic') }}">慢病病人列表</a></li> </ul> </div> <div class="header_center left" style="position:relative"> <h2><strong>大数据展示</strong></h2> </div> <div class="right nav text_right"> <ul> </ul> </div> </header>  <div class="con left" style="width: 98%;margin-left: 1%;margin-bottom: 25px;"> <input type="text" placeholder="请输入姓名身份证" style="width: 180px;height: 28px;border-radius: 3px;text-indent: 1em;border: 1px solid#4b8df8;color: #fff;" /><button class="btn btn-primary btn-sm" style="margin-left:20px"><span class="glyphicon glyphicon-search"></span>查询</button> <div class="div_any_child"> <div class="table_p" style="height: 96%;margin-top: 20px;"> <table> <thead><tr> <th>序号</th> <th>姓名</th> <th>慢病</th> <th>操作</th> </tr> </thead> <tbody> <tr><td>1</td><td>萝卜1</td><td>高血压</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> <tr><td>2</td><td>萝卜2</td><td>糖尿病</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> <tr><td>3</td><td>萝卜3</td><td>高血压</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> <tr><td>4</td><td>萝卜4</td><td>糖尿病</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> <tr><td>5</td><td>萝卜5</td><td>高血压</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> <tr><td>6</td><td>萝卜6</td><td>糖尿病</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> <tr><td>7</td><td>萝卜7</td><td>高血压</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> <tr><td>8</td><td>萝卜8</td><td>糖尿病</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> <tr><td>9</td><td>萝卜9</td><td>高血压</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> <tr><td>10</td><td>萝卜0</td><td>糖尿病</td><td><button class="btn btn-primary btn-sm">查看</button></td></tr> </tbody> </table> </div> <div class="box"> <div id="pagination" class="page fl"></div> </div> </div> </div> </div> </body> </html> index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据可视化大屏</title> <link href="../static/css/common.css" rel="stylesheet"> <script src="../static/js/Plugin/jquery-3.3.1.min.js"></script> <script src=" .jq22 /jquery/echarts-4.2.1.min.js"></script> <script src="../static/js/Plugin/bmap.min.js"></script> <script type="text/javascript" src="http://api.map.baidu /api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script> <script src="../static/js/common.js"></script> <script src="../static/js/index.js"></script> <script src="../static/js/Plugin/laydate/laydate.js"></script> </head> <body>  <header class="header left"> <div class="left nav"> <ul> <li class="nav_active"><i class="nav_1"></i><a href="{{ url_for('index') }}">采集概况</a></li> <li><i class="nav_2"></i><a href="{{ url_for('quota') }}">指标分析</a></li> <li><i class="nav_3"></i><a href="{{ url_for('trend') }}">趋势分析</a></li> <li><i class="nav_4"></i><a href="{{ url_for('chronic') }}">慢病病人列表</a></li> </ul> </div> <div class="header_center left" style="position:relative"> <h2><strong>大数据展示</strong></h2> </div> <div class="right nav text_right"> <ul> </ul> </div> </header>  <div class="con left">  <div class="con_div"> <div class="con_div_text left"> <div class="con_div_text01 left"> <img src="../static/img/info_1.png" class="left text01_img"/> <div class="left text01_div"> <p>总采集数据量(G)</p> <p>1235</p> </div> </div> <div class="con_div_text01 right"> <img src="../static/img/info_2.png" class="left text01_img"/> <div class="left text01_div"> <p>当月采集数据量(G)</p> <p>235</p> </div> </div> </div> <div class="con_div_text left"> <div class="con_div_text01 left"> <img src="../static/img/info_3.png" class="left text01_img"/> <div class="left text01_div"> <p>总门诊数(人)</p> <p class="sky">12356</p> </div> </div> <div class="con_div_text01 right"> <img src="../static/img/info_4.png" class="left text01_img"/> <div class="left text01_div"> <p>当月门诊数(人)</p> <p class="sky">12356</p> </div> </div> </div> <div class="con_div_text left"> <div class="con_div_text01 left"> <img src="../static/img/info_5.png" class="left text01_img"/> <div class="left text01_div"> <p>总住院数(人)</p> <p class="org">12356</p> </div> </div> <div class="con_div_text01 right"> <img src="../static/img/info_6.png" class="left text01_img"/> <div class="left text01_div"> <p>当月住院数(人)</p> <p class="org">12356</p> </div> </div> </div> </div>  <div class="div_any"> <div class="left div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_1.png">各医院采集数据量</div> <p id="pieChart1" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_2.png">各医院门诊住院费用</div> <p id="histogramChart" class="p_chart"></p> </div> </div> <div class="div_any02 left "> <div class="div_any_child div_height"> <div class="div_any_title any_title_width"><img src="../static/img/title_0.png">信阳市地图 </div> <div id="mapChart" style="width:97.5%;height:95%;display: inline-block;padding-left: 1.25%;padding-top:2.2%"></div> </div> </div> <div class="right div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src=../static/img/title_3.png">数据采集条数(当日)</div> <p id="lineChart" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_4.png">就诊人数(当日)</div> <p id="lineChart2" class="p_chart"></p> </div> </div> </div> <div id="el-dialog" class=""> <div class="xc_layer"></div> <div class="popBox" id="printView"> <div class="ttBox"><span class="tt" id="reportTitle">第一医院</span><img src="../static/img/close.png" style="width: 30px;float: right;cursor: pointer;" title="关闭弹窗" class="close"/></div> <div class="txtBox" id="el-dialog_body"> <div style="height:100%;width: 98%;margin-left: 1%;"> <div class="left div_any01" style="width: 64%;"> <div class="div_any_child"> <div class="div_any_title"><div type="text" class="demo-input" id="date1" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../static/img/title_4.png">门诊住院人次</div> <p id="lineChart3" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><div type="text" class="demo-input" id="date2" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../static/img/title_7.png">医疗费用</div> <p id="lineChart4" class="p_chart"></p> </div> </div> <div class="left div_any01" style="width: 32%;"> <div class="div_any_child"> <div class="div_any_title"><div type="text" class="demo-input" id="date3" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../static/img/title_18.png">病人年龄段分布</div> <p id="pieChart2" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><div type="text" class="demo-input" id="date4" style="display: inline-block;cursor: pointer;margin-right: 16px;"></div><img src="../static/img/title_20.png">医疗费用组成</div> <p id="pieChart3" class="p_chart"></p> </div> </div> </div> </div> </div> </div> <div id="allmap"></div> </div> </body> </html> login.html {% extends "base.html" %} {% block content %} <h2>登录</h2> <form method="POST"> {{ form.hidden_tag() }} <p> {{ form.username(size=32) }} </p> <p> {{ form.password(size=32) }} </p> <p>{{ form.submit() }}</p> </form> <p>没有账号？ <a href="{{ url_for('views.register') }}">注册</a></p> {% endblock %} NCDindex.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>慢病展示</title> <link href="../static/css/common.css" rel="static/cssheet"> <script src="../static/js/Plugin/jquery-3.3.1.min.js"></script> <script src=" .jq22 /jquery/echarts-4.2.1.min.js"></script> <script src="../static/js/Plugin/bmap.min.js"></script> <script src="http://api.map.baidu /api?v=2.0&ak=LelFSt6BfykGf8m3PB5zr8LaXAG2cMg6"></script> <script src="../static/js/common.js"></script> <script src="../static/js/NCDindex.js"></script> </head> <body>  <header class="header left"> <div class="left nav"> <ul> <li class="nav_active"><i class="nav_1"></i><a href="index.html">慢病概况</a> </li> <li><i class="nav_2"></i><a href="quota.html">指标分析</a> </li> <li><i class="nav_3"></i><a href="trend.html">服务预警</a> </li> </ul> </div> <div class="header_center left"> <h2><strong>慢病展示</strong></h2> </div> <div class="right nav text_right"> <ul> </ul> </div> </header>  <div class="con left">  <div class="con_div"> <div class="con_div_text left"> <div class="con_div_text01 left"> <img src="../static/img/info_1.png" class="left text01_img"/> <div class="left text01_div"> <p>慢病总人次(人)</p> <p>1235</p> </div> </div> <div class="con_div_text01 right"> <img src="../static/img/info_2.png" class="left text01_img"/> <div class="left text01_div"> <p>当月就诊人次(人)</p> <p>235</p> </div> </div> </div> <div class="con_div_text left"> <div class="con_div_text01 left"> <img src="../static/img/info_3.png" class="left text01_img"/> <div class="left text01_div"> <p>总门诊数(人)</p> <p class="sky">12356</p> </div> </div> <div class="con_div_text01 right"> <img src="../static/img/info_4.png" class="left text01_img"/> <div class="left text01_div"> <p>当月门诊数(人)</p> <p class="sky">12356</p> </div> </div> </div> <div class="con_div_text left"> <div class="con_div_text01 left"> <img src="../static/img/info_5.png" class="left text01_img"/> <div class="left text01_div"> <p>总住院数(人)</p> <p class="org">12356</p> </div> </div> <div class="con_div_text01 right"> <img src="../static/img/info_6.png" class="left text01_img"/> <div class="left text01_div"> <p>当月住院数(人)</p> <p class="org">12356</p> </div> </div> </div> </div>  <div class="div_any"> <div class="left div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_1.png">慢病分布人次</div> <p id="pieChart" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_2.png">各医院门诊住院费用</div> <p id="histogramChart" class="p_chart"></p> </div> </div> <div class="div_any02 left "> <div class="div_any_child div_height"> <div class="div_any_title any_title_width"><img src="../static/img/title_0.png">厦门市地图 </div> <div id="mapChart" style="width:97.5%;height:95%;display: inline-block;padding-left: 1.25%;padding-top:2.2%"></div> </div> </div> <div class="right div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_3.png">数据采集条数(当日)</div> <p id="lineChart" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_4.png">就诊人数(当日)</div> <p id="lineChart2" class="p_chart"></p> </div> </div> </div> </div> </body> </html> quota.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据可视化大屏</title> <link href="../static/css/common.css" rel="stylesheet"> <script src="../static/js/Plugin/jquery-3.3.1.min.js"></script> <script src=" .jq22 /jquery/echarts-4.2.1.min.js"></script> <script src="../static/js/Plugin/bmap.min.js"></script> <script src="../static/js/common.js"></script> <script src="../static/js/quota.js"></script> </head> <body>  <header class="header left"> <div class="left nav"> <ul> <li class="nav_active"><i class="nav_1"></i><a href="{{ url_for('index') }}">采集概况</a></li> <li><i class="nav_2"></i><a href="{{ url_for('quota') }}">指标分析</a></li> <li><i class="nav_3"></i><a href="{{ url_for('trend') }}">趋势分析</a></li> <li><i class="nav_4"></i><a href="{{ url_for('chronic') }}">慢病病人列表</a></li> </ul> </div>> <div class="header_center left" style="position:relative"> <h2><strong>大数据展示</strong></h2> </div> <div class="right nav text_right"> <ul> </ul> </div> </header>  <div class="con left">  <div class="con_div"> <div class="con_div_text left"> <div class="con_div_text01 left"> <img src="../static/img/info_7.png" class="left text01_img"/> <div class="left text01_div"> <p>全年医疗费用(万元)</p> <p>1235</p> </div> </div> <div class="con_div_text01 right"> <img src="../static/img/info_8.png" class="left text01_img"/> <div class="left text01_div"> <p>当月医疗费用(万元)</p> <p>235</p> </div> </div> </div> <div class="con_div_text left"> <div class="con_div_text01 left"> <img src="../static/img/info_9.png" class="left text01_img"/> <div class="left text01_div"> <p>全年体检人数(人)</p> <p class="sky">12356</p> </div> </div> <div class="con_div_text01 right"> <img src="../static/img/info_10.png" class="left text01_img"/> <div class="left text01_div"> <p>当月体检人数(人)</p> <p class="sky">12356</p> </div> </div> </div> <div class="con_div_text left"> <div class="con_div_text01 left"> <img src="../static/img/info_11.png" class="left text01_img"/> <div class="left text01_div"> <p>西药占比</p> <p class="org">92%</p> </div> </div> <div class="con_div_text01 right"> <img src="../static/img/info_12.png" class="left text01_img"/> <div class="left text01_div"> <p>中药占比</p> <p class="org">8%</p> </div> </div> </div> </div>  <div class="div_any"> <div class="left div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_5.png">各医院门诊人次(人)</div> <p id="histogramChart1" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_6.png">各医院住院人次(人)</div> <p id="histogramChart2" class="p_chart"></p> </div> </div> <div class="left div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_7.png">各医院医疗费用(元)</div> <p id="lineChart1" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_8.png">各医院体检人次(人)</div> <p id="lineChart2" class="p_chart"></p> </div> </div> <div class="left div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_9.png">药占比(%)</div> <p id="histogramChart3" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_10.png">平均住院天数(天)</div> <p id="histogramChart4" class="p_chart"></p> </div> </div> <div class="left div_any01"> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_11.png">手术工作量(台)</div> <p id="pieChart1" class="p_chart"></p> </div> <div class="div_any_child"> <div class="div_any_title"><img src="../static/img/title_12.png">床位数量分布(床)</div> <p id="pieChart2" class="p_chart"></p> </div> </div> </div> </div> </body> </html> register.html {% extends "base.html" %} {% block content %} <h2>注册</h2> <form method="POST"> {{ form.hidden_tag() }} <p> {{ form.username(size=32) }} </p> <p> {{ form.password(size=32) }} </p> <p> {{ form.confirm(size=32) }} </p> <p>{{ form.submit() }}</p> </form> <p>已有账号？ <a href="{{ url_for('views.login') }}">登录</a></p> {% endblock %} res.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <div class="cont-parent"> <div class="cont"> <div class="form sign-in"> <h2>Time to feel like home,</h2> <form action="/register" method="post"> <label> <span>用户名</span> <input type="text" name="username" placeholder="Username" required/> </label> <label> <span>密码</span> <input type="password" name="password" placeholder="Password" required/> </label> <button type="submit" class="submit">注册</button> </form> <button type="button" class="fb-btn">Join with <span>facebook</span></button> </div> <div class="sub-cont"> <div class="img"> <div class="img__text m--up"> <h2>已经有账号了?</h2> <p>那就去<a href="/">登录</a>吧!</p> </div> </div> </div> </div> </body> </html> trend.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据可视化大屏</title> <link href="../static/css/common.css" rel="stylesheet"> <script src="../static/js/Plugin/jquery-3.3.1.min.js"></script> <script src=" .jq22 /jquery/echarts-4.2.1.min.js"></script> <script src="../static/js/common.js"></script> <script src="../static/js/trend.js"></script> </head> <body>  <header class="header left"> <div class="left nav"> <ul> <li class="nav_active"><i class="nav_1"></i><a href="{{ url_for('index') }}">采集概况</a></li> <li><i class="nav_2"></i><a href="{{ url_for('quota') }}">指标分析</a></li> <li><i class="nav_3"></i><a href="{{ url_for('trend') }}">趋势分析</a></li> <li><i class="nav_4"></i><a href="{{ url_for('chronic') }}">慢病病人列表</a></li> </ul> </div> <div class="header_center left" style="position:relative"> <h2><strong>大数据展示</strong></h2> </div> <div class="right nav text_right"> <ul> </ul> </div> </header>  <div class="con left" style="width:50%;">  <div class="div_any"> <div class="left div_any01" style="width:100%;"> <div class="div_any_child" style="width:98%;position:relative;height: 420px;"> <div class="div_any_title"><img src="../static/img/title_13.png">主要传染病</div> <div id="histogramChart1" style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div> <div id="lineChart1" style="width: 52%;height: 66%;display: inline-block;"></div> <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;right: 2%;top: 8%;"> <div style="display: inline-block;width:33%;text-align:center;"> <div style="color:#fff;font-size: 18px;line-height: 32px;">病例报告数</div> <div style="color:#87cefa;font-size: 30px;line-height: 42px;">2354</div> </div><div style="display: inline-block;width:33%;text-align:center;"> <div style="color:#fff;font-size: 18px;line-height: 32px;">死亡数</div> <div style="color:red;font-size: 30px;line-height: 42px;">26</div> </div><div style="display: inline-block;width:33%;text-align:center;"> <div style="color:#fff;font-size: 18px;line-height: 32px;">同比发病数趋势</div> <div style="color:#ff7f50;font-size: 30px;line-height: 42px;">5.36%</div> </div> </div> </div> </div> <div class="left div_any01" style="width:48%;"> <div class="div_any_child" style="height: 420px;"> <div class="div_any_title"><img src="../static/img/title_14.png">主要症状</div> <p id="histogramChart2" class="p_chart" style="height: 400px;"></p> </div> </div> <div class="left div_table_box" style="width: 48%;"> <div class="div_any_child" style="height: 420px;"> <div class="div_any_title"><img src="../static/img/title_16.png">预警信息</div> <div class="table_p"> <table> <thead><tr> <th>序号</th> <th>内容</th> <th>发布时间</th> </tr> </thead> <tbody> <tr><td>1</td><td>9月21日感染性腹泻发病：123人次</td><td>2018-11-05</td></tr> <tr><td>2</td><td>9月20日流行性感冒：57人次</td><td>2018-11-03</td></tr> <tr><td>3</td><td>9月19日:手足口病发病同比增长220%</td><td>2018-11-01</td></tr> <tr><td>4</td><td>9月18日登革热死亡:2人</td><td>2018-10-29</td></tr> <tr><td>5</td><td>9月17日流行性感冒：157人次</td><td>2018-10-27</td></tr> <tr><td>6</td><td>9月15日全区传染病发病人数较低</td><td>2018-10-25</td></tr> <tr><td>7</td><td>9月14日流行性感冒：157人次</td><td>2018-10-23</td></tr> <tr><td>8</td><td>9月13日全区传染病发病人数较低</td><td>2018-10-21</td></tr> <tr><td>9</td><td>9月12日流行性感冒：157人次</td><td>2018-10-20</td></tr> </tbody> </table> </div> </div> </div> </div> </div> </div> <div class="con right" style="width:50%;"> <div class="div_any"> <div class="left div_any01" style="width:100%;"> <div class="div_any_child" style="width:98%;position:relative;height: 420px;"> <div class="div_any_title"><img src="../static/img/title_17.png">主要疾病排行</div> <div id="histogramChart3" style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div> <div id="lineChart2" style="width: 52%;height: 90%;display: inline-block;"></div> </div> </div> <div class="left div_any01" style="width:48%;"> <div class="div_any_child" style="height: 420px;"> <div class="div_any_title"><img src="../static/img/title_18.png">年龄分布</div> <p id="pieChart1" class="p_chart" style="height: 400px;"></p> </div> </div> <div class="right div_any01" style="width:48%;"> <div class="div_any_child" style="height: 420px;"> <div class="div_any_title"><img src="../static/img/title_19.png">性别分布</div> <p id="pieChart2" class="p_chart" style="height: 400px;"></p> </div> </div> </div> </div> </body> </html> chronic.js // 人口增长率与国内生产总值 var lineYear = [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022]; (function () { var myChart = echarts.init(document.querySelector(".line .chart")); var lineOneData = [3.2, 3.4, 3.5, 3.7, 4.02, 4.19, 4.34, 4.56, 4.80,4.98]; var lineThreeData = [9.7, 10.1, 10.5, 10.8, 11.4, 11.9, 12.6, 13.5, 14.2, 14.9]; var lineTwoData = [136072, 136782, 137462, 138271, 139008, 139538, 140005, 141212, 141260, 141175]; option = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, }, grid: { left: "0", right: "4%", bottom: "0%", top: "14%", containLabel: true, }, legend: { data: ["全国人口数量（万人）","人口老龄化（%）","养老保险（%）"], right: 1, top: 0, textStyle: { color: "#fff", }, }, xAxis: { type: "category", data: lineYear, axisLine: { lineStyle: { color: "rgba(255,255,255,0.1)", }, }, axisLabel: { interval: 0, textStyle: { color: "rgba(255,255,255,.8)", fontSize: transformFontSize(12) }, }, }, yAxis: [ { type: "value", axisLine: { show: false, }, splitLine: { show: true, lineStyle: { color: "rgba(255,255,255,0.1)", }, }, axisLabel: { color: "rgba(255,255,255,.8)", fontSize: transformFontSize(12), }, }, { type: "value", position: "right", axisLine: { show: false, }, splitLine: { show: true, lineStyle: { color: "rgba(255,255,255,0.1)", }, }, axisLabel: { color: "rgba(255,255,255,.8)", fontSize: transformFontSize(12), }, formatter: function (value) { return value + '%' } }, ], series: [ { name: "养老保险（%）", type: "line", yAxisIndex: 1, showAllSymbol: true, symbol: "circle", symbolSize: 10, lineStyle: { normal: { color: "#6c50f3", shadowColor: "rgba(0, 0, 0, .3)", shadowBlur: 0, shadowOffsetY: 5, shadowOffsetX: 5, }, }, itemStyle: { color: "#f65ed0", borderColor: "#f65ed0", borderWidth: 3, shadowColor: "rgba(0, 0, 0, .3)", shadowBlur: 0, shadowOffsetY: 2, shadowOffsetX: 2, }, areaStyle: { color: new echarts.graphic.LinearGradient( 10, 0, 0, 1, [ { offset: 0, color: "rgba(108,80,243,0.3)", }, { offset: 1, color: "rgba(108,80,243,0)", }, ], false ), shadowColor: "rgba(108,80,243, 0.9)", shadowBlur: 20, }, data: lineOneData, }, { name: "人口老龄化（%）", type: "line", yAxisIndex: 1, showAllSymbol: true, symbol: "circle", symbolSize: 10, lineStyle: { normal: { color: "#6c50f3", shadowColor: "rgba(0, 0, 0, .3)", shadowBlur: 0, shadowOffsetY: 5, shadowOffsetX: 5, }, }, itemStyle: { color: "#6c50f3", borderColor: "#fff", borderWidth: 3, shadowColor: "rgba(0, 0, 0, .3)", shadowBlur: 0, shadowOffsetY: 2, shadowOffsetX: 2, }, areaStyle: { color: new echarts.graphic.LinearGradient( 10, 0, 0, 1, [ { offset: 0, color: "rgba(108,80,243,0.3)", }, { offset: 1, color: "rgba(108,80,243,0)", }, ], false ), shadowColor: "rgba(108,80,243, 0.9)", shadowBlur: 20, }, data: lineThreeData, }, { name: "全国人口数量（万人）", type: "bar", barWidth: "20%", itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#248ff7", }, { offset: 1, color: "#6851f1", }, ]), barBorderRadius: 11, }, }, data: lineTwoData, }, ], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); })(); (function () { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".pie .chart")); var barData1 = [12127.3, 7121.2, 327.7, 21127.1, 217.0, 217.5, 5878.1, 548.4,8548.6, 1218.9] var barData2 = [13220, 14491, 15712, 17111, 18322, 19853, 21559, 21210, 24100, 25124] var barData3 = [31.2, 31.0, 30.6, 30.1, 29.3, 28.4, 28.2, 30.2, 29.8, 30.2] yData = [10010078, 484018, 360104, 31018, 10105]; option = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, }, grid: { left: "0", right: "4%", bottom: "0%", top: "14%", containLabel: true, }, legend: { data: ["劳动力（万人）","消费（万元）","投资（%）"], right: 1, top: 0, textStyle: { color: "#fff", }, }, xAxis: { type: "category", data: lineYear, axisLine: { lineStyle: { color: "rgba(255,255,255,0.1)", }, }, axisLabel: { interval: 0, textStyle: { color: "rgba(255,255,255,.8)", fontSize: transformFontSize(12) }, }, }, yAxis: [ { type: "value", axisLine: { show: false, }, splitLine: { show: true, lineStyle: { color: "rgba(255,255,255,0.1)", }, }, axisLabel: { color: "rgba(255,255,255,.8)", fontSize: transformFontSize(12), }, }, { type: "value", position: "right", axisLine: { show: false, }, splitLine: { show: true, lineStyle: { color: "rgba(255,255,255,0.1)", }, }, axisLabel: { color: "rgba(255,255,255,.8)", fontSize: transformFontSize(12), }, formatter: function (value) { return value + '%' } }, ], series: [ { name: "消费（万元）", type: "line", yAxisIndex: 1, showAllSymbol: true, symbol: "circle", symbolSize: 10, lineStyle: { normal: { color: "#6c50f3", shadowColor: "rgba(0, 0, 0, .3)", shadowBlur: 0, shadowOffsetY: 5, shadowOffsetX: 5, }, }, itemStyle: { color: "#f65ed0", borderColor: "#f65ed0", borderWidth: 3, shadowColor: "rgba(0, 0, 0, .3)", shadowBlur: 0, shadowOffsetY: 2, shadowOffsetX: 2, }, areaStyle: { color: new echarts.graphic.LinearGradient( 10, 0, 0, 1, [ { offset: 0, color: "rgba(108,80,243,0.3)", }, { offset: 1, color: "rgba(108,80,243,0)", }, ], false ), shadowColor: "rgba(108,80,243, 0.9)", shadowBlur: 20, }, data: barData1, }, { name: "投资（%）", type: "line", yAxisIndex: 1, showAllSymbol: true, symbol: "circle", symbolSize: 10, lineStyle: { normal: { color: "#6c50f3", shadowColor: "rgba(0, 0, 0, .3)", shadowBlur: 0, shadowOffsetY: 5, shadowOffsetX: 5, }, }, itemStyle: { color: "#6c50f3", borderColor: "#fff", borderWidth: 3, shadowColor: "rgba(0, 0, 0, .3)", shadowBlur: 0, shadowOffsetY: 2, shadowOffsetX: 2, }, areaStyle: { color: new echarts.graphic.LinearGradient( 10, 0, 0, 1, [ { offset: 0, color: "rgba(108,80,243,0.3)", }, { offset: 1, color: "rgba(108,80,243,0)", }, ], false ), shadowColor: "rgba(108,80,243, 0.9)", shadowBlur: 20, }, data: barData3, }, { name: "劳动力（万人）", type: "bar", barWidth: "20%", itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#248ff7", }, { offset: 1, color: "#6851f1", }, ]), barBorderRadius: 11, }, }, data: barData2, }, ], }; // 3. 配置项和数据给我们的实例化对象 myChart.setOption(option); // 4. 当我们浏览器缩放的时候，图表也等比例缩放 window.addEventListener("resize", function () { // 让我们的图表调用 resize这个方法 myChart.resize(); }); })(); // 折线图定制 (function () { var myChart = echarts.init(document.getElementById('echart5')); const scatterOption = ( option = { legend: { orient: 'vertical', itemWidth: 10, itemHeight: 10, textStyle:{ color:'rgba(255,255,255,.5)' }, top:'20%', right:30, data:['城镇人口','乡村人口'] }, color: ['#10d8ec','#82e321'], tooltip : { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, calculable : true, series: [ { name: 'Access From', type: 'pie', radius: '50%', data: [ { value: 92071, name: '城镇人口' }, { value: 49104, name: '乡村人口' }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }); const barOption = ( option = { legend: { orient: 'vertical', itemWidth: 10, itemHeight: 10, textStyle:{ color:'rgba(255,255,255,.5)' }, top:'20%', right:30, data:['男性人数','女性人数'] }, color: ['#5ae755','#f68fb8'], tooltip : { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, calculable : true, series: [ { name: 'Access From', type: 'pie', radius: '50%', data: [ { value: 72206, name: '男性人数' }, { value: 68969, name: '女性人数' }, ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }); let currentOption = scatterOption; myChart.setOption(scatterOption); setInterval(function () { currentOption = currentOption === scatterOption ? barOption : scatterOption; myChart.setOption(currentOption, true); }, 3000); window.addEventListener("resize", function () { myChart.resize(); }); })(); (function () { var speed = 50; var list = document.getElementById('list'); var list2 = document.getElementById('list2'); var rule = document.getElementById('rule'); list2.innerHTML = list.innerHTML; function Marquee() { if (list2.offsetTop - rule.scrollTop <= 0) rule.scrollTop -= list.offsetHeight; else { rule.scrollTop++; } } var MyMar = setInterval(Marquee, speed); rule.addEventListener('mouseover', function () { clearInterval(MyMar) }); rule.addEventListener('mouseout', function () { MyMar = setInterval(Marquee, speed) }); })(); function transformFontSize(px) { let clientWidth = window.innerWidth || document.body.clientWidth if (!clientWidth) { return 0 } let fontSize = clientWidth / 1920 return px * fontSize } common.js function callResourceAdapter(type, url, requestContent, successCallback, failCallback) { if (requestContent == null){ requestContent = {}; } if (type == null){ type = 'POST'; } function invocationSuccess(result) { var resultJson = result; if(resultJson.msgCode == '800'){ if (successCallback && typeof(successCallback) == "function") { successCallback(resultJson.rows,resultJson.map,resultJson.vo,resultJson.msg); } } if(resultJson.msgCode == '801'){ showToast(resultJson.msg); } if(resultJson.msgCode == '900'){ var message = '系统错误，请联系管理员'; if(resultJson.msg){ message = resultJson.msg; } showToast(message); if (failCallback && typeof(failCallback) == "function") { failCallback(); } } } function invocationFailure(error) { showToast('无法连接至服务器,请稍后再试'); if (failCallback && typeof(failCallback) == "function") { failCallback(); } } $.ajax({ type: type, url: serverUrl+url, data: JSON.stringify(requestContent), crossDomain:true, contentType: "application/json; charset=utf-8", // dataType: "json", timeout:120000, statusCode:{ 404: function() { showToast('服务器无响应,请稍后再试') }, 422: function() { showToast('应用程序请求对象错误,请稍后再试') }, 403: function() { showToast('无访问权限') }, 400: function() { showToast('应用程序请求无效,请稍后再试') }, }, success: function (data, textStatus, jqXHR) { switch (jqXHR.status) { case 200: invocationSuccess(data); break; default: break; } }, error: function (jqXHR, textStatus,errorThrown) { invocationFailure(jqXHR); } }) } function showToast(text,timeout) { $(".yui-toast-mask").remove(); var html = [ '<div class="yui-toast-mask">', '<div class="yui-toast">', '<div class="yui-toast-text">'+text+'</div>', '</div>', '</div>', ]; var dom = $(html.join('')); $("body").append(dom); if(timeout&&typeof(timeout)=='number'){ setTimeout(function () { dom.remove(); },timeout); } $(".yui-toast-mask").click(function () { dom.remove(); }); } function hideToast() { $(".yui-toast-mask").remove(); } function loaderShow() { var loadPage = $('<div class="loading" style="top:30%;left:50%;position: absolute;background: transparent;text-align: center;">' + '<img src="../images/loading.gif" />' + '</div>'); $("#content").append(loadPage); } function loaderHide() { $(".loading").remove(); } function getLocationDom() { var that = this; var html = "<div id='breadcrumb'>"; $.each(LOCATION,function(index,data){ if(index==0){ html += '<a href="javascript:void(0)" class="tip-bottom"><i class="fa fa-home"></i>'+data+'</a>'; return ; } if(index==LOCATION.length-1){ html += '<a class="current">'+data+'</a>'; return ; } html += "<a href='javascript:void(0)'>"+data+"</a>"; }); html += "</div>"; $("#content-header").html(html); } function getNav(successCallback) { var postNav = []; postNav.push('<li class="submenu" data-for= "home">','<a href="javascript:void(0)"><span>首页</span></a>'); postNav.push('<li class="submenu" data-for= "analysis">','<a href="javascript:void(0)"><span>指标统计</span></a>'); postNav.push('<li class="submenu" data-for= "trend">','<a href="javascript:void(0)"><span>趋势排名</span></a>'); $("#sidebar ul").html(postNav.join('')); if (successCallback&&typeof(successCallback) == 'function'){ successCallback(); } } function bindNav(navId) { var HEIGHT = $("body").height()-100; $("#content").height(HEIGHT); $(".container-fluid").slimScroll({ height: HEIGHT+'px', //容器高度,默认250px size: '5px', //滚动条宽度,默认7px railColor: '#000000', //滚动条背景轨迹颜色,默认#333333 railOpacity: 0.3, //滚动条背景轨迹透明度,默认0.2 wheelStep: 10, //滚动条滚动值,默认20 disableFadeOut: false //是否禁用鼠标在内容处一定时间不动隐藏滚动条,当设置alwaysVisible为true时该参数无效,默认false }); $("#"+navId).delegate("li[data-for='home']","click",function(){ window.location.href="home.html" }).delegate("li[data-for='analysis']","click",function(){ window.location.href="analysis.html" }).delegate("li[data-for='trend']","click",function(){ window.location.href="trend.html" }) } function last_year_month() { var list = []; var date = getFormatDate(new Date()); var year = date.split("-")[0]; var mouth = date.split("-")[1]; for (var i=0;i<12;i++){ var objM = mouth-i; var objY = year; if(objM<=0){ objM = objM+12; objY = year -1; } if(objM<10){ objM = "0"+objM; } var obj = objY +"-"+objM; list.push(obj) } return list; } function getFormatDate(date){ var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); if(month<10){ month = '0'+month.toString(); } month = month.toString(); if(day<10){ day = '0'+day.toString(); } day = day.toString(); return year+'-'+month+'-'+day; } function last_month_day() { var list = []; var date = getFormatDate(new Date()); var year = date.split("-")[0]; var mouth = date.split("-")[1]; var day = date.split("-")[2]-1; for (var i=0;i<30;i++){ var objM = mouth; var objD = day-i; if(objD<=0){ objD = objD+30; objM = mouth -1; objM = "0"+objM } var obj = year+"-"+objM +"-"+objD; list.push(obj) } return list; } function getFormatMonth(date){ var year = date.getFullYear(); var month = date.getMonth()+1; var day = date.getDate(); if(month<10){ month = '0'+month.toString(); } month = month.toString(); if(day<10){ day = '0'+day.toString(); } day = day.toString(); return year+'-'+month; } //分页 function paging(totalPage,currentPage) { $("#pagination").pagination({ currentPage: currentPage, totalPage: totalPage, isShow: true, count: 8, homePageText: "首页", endPageText: "尾页", prevPageText: "上一页", nextPageText: "下一页", callback: function(current) { $("#current").text(current) } }); }

flexible.js (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit() { var rem = docEl.clientWidth / 24; docEl.style.fontSize = rem + "px"; } setRemUnit(); // reset rem unit on page resize window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function(e) { if (e.persisted) { setRemUnit(); } }); // detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document); index.js var symptomName = last_month_day(); $(function(){ init(); init2(); $("#el-dialog").addClass("hide"); $(".close").click(function(event) { $("#el-dialog").addClass("hide"); }); var date = new Date(); var numble = date.getDate(); var today = getFormatMonth(new Date()); $("#date1").html(today); $("#date2").html(today); $("#date3").html(today); $("#date4").html(today); lay('.demo-input').each(function(){ laydate.render({ type: 'month', elem: this, trigger: 'click', theme: '#95d7fb', calendar: true, showBottom: true, done: function () { console.log( $("#startDate").val()) } }) }); }) function init(){ //地图 var mapChart = echarts.init(document.getElementById('mapChart')); mapChart.setOption({ bmap: { center: [114.040,32.080], zoom: 12, roam: true, }, tooltip : { trigger: 'item', formatter:function(params, ticket, callback){ return params.value[2] } }, series: [{ type: 'scatter', coordinateSystem: 'bmap', data: [ [114.040,32.080, '信阳市'] , [114.13,32.15, '信阳人民医院'] , [114.07,32.13, '信阳市中心医院浉河院区'], [114.05,32.13, '信阳一五四医院'], [114.05,32.12, '信阳市第三人民医院'], ] }] }); mapChart.on('click', function (params) { $("#el-dialog").removeClass('hide'); $("#reportTitle").html(params.value[2]); }); var bmap = mapChart.getModel().getComponent('bmap').getBMap() bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]})); bmap.setMapStyle({style:'midnight'}) var pieChart1 = echarts.init(document.getElementById('pieChart1')); pieChart1.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6",], legend: { y : '260', x : 'center', textStyle : { color : '#ffffff', }, data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], }, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}G ({d}%)" }, calculable : false, series : [ { name:'采集数据量', type:'pie', radius : ['40%', '70%'], center : ['50%', '45%'], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '20', fontWeight : 'bold' } } } }, data:[ {value:335, name:'信阳第一医院'}, {value:310, name:'信阳中山医院'}, {value:234, name:'信阳中医院'}, {value:135, name:'信阳第五医院'} ] } ] }); var lineChart = echarts.init(document.getElementById('lineChart')); lineChart.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6",], legend: { y : '260', x : 'center', textStyle : { color : '#ffffff', }, data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], }, calculable : false, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}条" }, yAxis: [ { type: 'value', axisLine : {onZero: false}, axisLine:{ lineStyle:{ color: '#034c6a' }, }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "k条" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } } } ], xAxis: [ { type: 'category', data : ['8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'], axisLine:{ lineStyle:{ color: '#034c6a' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } }, } ], grid:{ left: '5%', right: '5%', bottom: '20%', containLabel: true }, series : [ { name:'信阳第一医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[15, 0, 20, 45, 22.1, 25, 70, 55, 76] }, { name:'信阳中山医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[25, 10, 30, 55, 32.1, 35, 80, 65, 76] }, { name:'信阳中医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[35, 20, 40, 65, 42.1, 45, 90, 75, 96] }, { name:'信阳第五医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[45, 30, 50, 75, 52.1, 55, 100, 85, 106] } ] }); var histogramChart = echarts.init(document.getElementById('histogramChart')); histogramChart.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6",], legend: { y : '250', x : 'center', data:['信阳第一医院', '信阳中山医院','信阳中医院','信阳第五医院'], textStyle : { color : '#ffffff', } }, calculable :false, grid:{ left: '5%', right: '5%', bottom: '20%', containLabel: true }, tooltip : { trigger: 'axis', axisPointer : { type : 'shadow' } }, xAxis : [ { type : 'value', axisLabel: { show: true, textStyle: { color: '#fff' } }, splitLine:{ lineStyle:{ color:['#f2f2f2'], width:0, type:'solid' } } } ], yAxis : [ { type : 'category', data:['门诊人数(人)', '住院人次(人)','人均费用(元)'], axisLabel: { show: true, textStyle: { color: '#fff' } }, splitLine:{ lineStyle:{ width:0, type:'solid' } } } ], series : [ { name:'信阳第一医院', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[320, 302, 301] }, { name:'信阳中山医院', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[120, 132, 101] }, { name:'信阳中医院', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[220, 182, 191] }, { name:'信阳第五医院', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[150, 212, 201] } ] }); var lineChart2 = echarts.init(document.getElementById('lineChart2')); lineChart2.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6",], legend: { y : '260', x : 'center', textStyle : { color : '#ffffff', }, data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], }, calculable : false, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}条" }, yAxis: [ { type: 'value', axisLine : {onZero: false}, axisLine:{ lineStyle:{ color: '#034c6a' }, }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "k条" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } } } ], xAxis: [ { type: 'category', data : ['8:00','10:00','12:00','14:00','16:00','18:00'], axisLine:{ lineStyle:{ color: '#034c6a' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } }, } ], grid:{ left: '5%', right: '5%', bottom: '20%', containLabel: true }, series : [ { name:'信阳第一医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[15, 0, 20, 45, 22.1, 25,].reverse() }, { name:'信阳中山医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[25, 10, 30, 55, 32.1, 35, ].reverse() }, { name:'信阳中医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[35, 20, 40, 65, 42.1, 45, ].reverse() }, { name:'信阳第五医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[45, 30, 50, 75, 52.1, 55, 6].reverse() } ] }); } function init2(){ var lineChart3 = echarts.init(document.getElementById('lineChart3')); lineChart3.setOption({ color:["#87cefa","#ff7f50",], legend: { y : 'top', x : 'center', textStyle : { color : '#ffffff', }, data : ['门诊人次','住院人次'], }, calculable : false, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人" }, dataZoom: { show: true, realtime : true, start: 0, end: 18, height: 20, backgroundColor: '#f8f8f8', dataBackgroundColor: '#e4e4e4', fillerColor: '#87cefa', handleColor: '#87cefa', }, yAxis: [ { type: 'value', axisLine : {onZero: false}, axisLine:{ lineStyle:{ color: '#034c6a' }, }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "人" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } } } ], xAxis: [ { type: 'category', data : symptomName, boundaryGap : false, axisLine:{ lineStyle:{ color: '#034c6a' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } }, } ], grid:{ left: '5%', right: '5%', bottom: '20%', containLabel: true }, series : [ { name:'门诊费用', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[1150, 180, 2100, 2415, 1212.1, 3125,1510, 810, 2100, 2415, 1122.1, 3215,1510, 801, 2001, 2245, 1232.1, 3245,1520, 830, 2200, 2145, 1223.1, 3225,150, 80, 200, 245, 122.1, 325] }, { name:'住院费用', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[2500, 1000, 3000, 5005, 3200.1, 3005, 2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005, 2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005,] }, ] }); var lineChart4 = echarts.init(document.getElementById('lineChart4')); lineChart4.setOption({ color:["#87cefa","#ff7f50",], calculable : false, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}元" }, dataZoom: { show: true, realtime : true, start: 0, end: 18, height: 20, backgroundColor: '#f8f8f8', dataBackgroundColor: '#e4e4e4', fillerColor: '#87cefa', handleColor: '#87cefa', }, yAxis: [ { type: 'value', axisLine : {onZero: false}, axisLine:{ lineStyle:{ color: '#034c6a' }, }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "元" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } } } ], xAxis: [ { type: 'category', data : symptomName, boundaryGap : false, axisLine:{ lineStyle:{ color: '#034c6a' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } }, } ], grid:{ left: '5%', right: '5%', bottom: '20%', containLabel: true }, series : [ { name:'医疗费用', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[1500, 800, 1200, 2450, 1122.1, 1325,1150, 180, 1200, 1245, 1122.1, 1325,150, 180, 1200, 2145, 1212.1, 3215,1510, 180, 2100, 2415, 122.1, 325,150, 80, 200, 245, 122.1, 325].reverse() }, ] }); //年龄分布 var pieChart2 = echarts.init(document.getElementById('pieChart2')); pieChart2.setOption({ color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"], tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人" }, calculable : true, series : [ { name:'发病人数', type:'pie', radius : [30, 110], center : ['50%', '50%'], roseType : 'area', x: '50%', sort : 'ascending', data:[ {value:10, name:'婴儿(1-3岁)'}, {value:5, name:'少儿(4-10岁)'}, {value:15, name:'少年(10-18岁)'}, {value:25, name:'青年(18-45岁)'}, {value:125, name:'中年(45-60岁)'}, {value:175, name:'老年(60岁以上)'}, ] } ] }) //医疗费用组成 var pieChart3 = echarts.init(document.getElementById('pieChart3')); pieChart3.setOption({ color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"], tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}元" }, calculable : true, series : [ { name:'发病人数', type:'pie', radius : [30, 110], center : ['50%', '50%'], roseType : 'area', x: '50%', sort : 'ascending', data:[ {value:10, name:'诊察费用'}, {value:500, name:'检查费用'}, {value:150, name:'检验费用'}, {value:250, name:'西药费用'}, {value:125, name:'中药费用'}, {value:1750, name:'手术费用'}, ] } ] }) } myMap.js (function () { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".map .chart")); // 2. 指定配置和数据 // 2. 指定配置和数据 var geoCoordMap = { 台湾: [121.5135, 25.0308], 黑龙江: [127.9688, 45.368], 内蒙古: [110.3467, 41.4899], 吉林: [125.8154, 44.2584], 北京市: [116.4551, 40.2539], 辽宁: [123.1238, 42.1216], 河北: [114.4995, 38.1006], 天津: [117.4219, 39.4189], 山西: [112.3352, 37.9413], 陕西: [109.1162, 34.2004], 甘肃: [103.5901, 36.3043], 宁夏: [106.3586, 38.1775], 青海: [101.4038, 36.8207], 新疆: [87.9236, 43.5883], 西藏: [91.11, 29.97], 四川: [103.9526, 30.7617], 重庆: [108.384366, 30.439702], 山东: [117.1582, 36.8701], 河南: [113.4668, 34.6234], 江苏: [118.8062, 31.9208], 安徽: [117.29, 32.0581], 湖北: [114.3896, 30.6628], 浙江: [119.5313, 29.8773], 福建: [119.4543, 25.9222], 江西: [116.0046, 28.6633], 湖南: [113.0823, 28.2568], 贵州: [106.6992, 26.7682], 云南: [102.9199, 25.4663], 广东: [113.12244, 23.009505], 广西: [108.479, 23.1152], 海南: [110.3893, 19.8516], 上海: [121.4648, 31.2891], }; var MapData = [ [{ name: "北京市" }, { name: "上海", value: 35089, value1: 19084, value2: 16005 }], [{ name: "天津" }, { name: "海南", value: 22642, value1: 11367, value2: 11275 }], [{ name: "天津" }, { name: "上海", value: 22642, value1: 11367, value2: 11275 }], [{ name: "河北" }, { name: "上海", value: 125526, value1: 70281, value2: 55245 }], [{ name: "山西" }, { name: "上海", value: 118384, value1: 67058, value2: 51326 }], [{ name: "内蒙古" }, { name: "上海", value: 47163, value1: 23820, value2: 23343 }], [{ name: "辽宁" }, { name: "江苏", value: 122922, value1: 59869, value2: 63053 }], [{ name: "吉林" }, { name: "上海", value: 105841, value1: 51627, value2: 54214 }], [{ name: "黑龙江" }, { name: "上海", value: 165644, value1: 79481, value2: 86163 }], [{ name: "江苏" }, { name: "上海", value: 1798258, value1: 1009157, value2: 789101 }], [{ name: "浙江" }, { name: "安徽", value: 515614, value1: 264405, value2: 251209 }], [{ name: "安徽" }, { name: "上海", value: 2426484, value1: 1337217, value2: 1089267 }], [{ name: "福建" }, { name: "河南", value: 294823, value1: 161641, value2: 133182 }], [{ name: "江西" }, { name: "河南", value: 502200, value1: 276599, value2: 225601 }], [{ name: "山东" }, { name: "上海", value: 501181, value1: 293389, value2: 207792 }], [{ name: "河南" }, { name: "山东", value: 1342950, value1: 800170, value2: 542780 }], [{ name: "湖北" }, { name: "上海", value: 417652, value1: 220363, value2: 197289 }], [{ name: "湖南" }, { name: "重庆", value: 237535, value1: 121332, value2: 116203 }], [{ name: "广东" }, { name: "上海", value: 122677, value1: 67666, value2: 55011 }], [{ name: "广西" }, { name: "广东", value: 84654, value1: 43041, value2: 41613 }], [{ name: "海南" }, { name: "上海", value: 18140, value1: 9090, value2: 9050 }], [{ name: "重庆" }, { name: "上海", value: 189139, value1: 101670, value2: 87469 }], [{ name: "四川" }, { name: "新疆", value: 517464, value1: 276427, value2: 241037 }], [{ name: "贵州" }, { name: "上海", value: 188738, value1: 104324, value2: 84414 }], [{ name: "云南" }, { name: "上海", value: 139168, value1: 78497, value2: 60671 }], [{ name: "西藏" }, { name: "云南", value: 2649, value1: 990, value2: 1659 }], [{ name: "陕西" }, { name: "西藏", value: 185178, value1: 105779, value2: 79399 }], [{ name: "甘肃" }, { name: "上海", value: 178139, value1: 99794, value2: 78345 }], [{ name: "青海" }, { name: "甘肃", value: 12732, value1: 6473, value2: 6259 }], [{ name: "宁夏" }, { name: "上海", value: 16861, value1: 9046, value2: 7815 }], [{ name: "新疆" }, { name: "上海", value: 44205, value1: 19434, value2: 24771 }], [{ name: "新疆" }, { name: "宁夏", value: 44205, value1: 19434, value2: 24771 }], ] var planePath = "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z"; //var planePath = 'arrow'; var convertData = function (data) { var fromCoord = geoCoordMap[data[0].name]; var toCoord = geoCoordMap[data[1].name]; return [ { fromName: data[0].name, toName: data[1].name, coords: [fromCoord, toCoord], value: data[1].value, value1: data[1].value1, value2: data[1].value2, } ]; }; var series = []; MapData.forEach(function (item, i) { series.push( { name: item[0].name, type: "lines", zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: "red", //arrow箭头的颜色 symbolSize: 3 }, lineStyle: { normal: { color: "#fff", width: 0, curveness: 0.2 } }, data: convertData(item) }, { name: item[0].name, type: "lines", zlevel: 2, symbol: ["none", "arrow"], symbolSize: 10, effect: { show: true, period: 6, trailLength: 0, symbol: planePath, symbolSize: 15 }, lineStyle: { normal: { color: "#fff", width: 1, opacity: 0.6, curveness: 0.2 } }, data: convertData(item) }, { name: item[0].name, type: "effectScatter", coordinateSystem: "geo", zlevel: 2, rippleEffect: { brushType: "stroke" }, label: { normal: { show: true, position: "right", formatter: "{b}" } }, symbolSize: 10, itemStyle: { normal: { color: "#fff" }, emphasis: { areaColor: "#2B91B7" } }, data: [ { name: item[0].name, value: geoCoordMap[item[0].name], code: item[1].value, code1: item[1].value1, code2: item[1].value2 } ] } ); }); var option = { tooltip: { trigger: "item", formatter: function (params, ticket, callback) { if (params.seriesType == "effectScatter") { return params.data.name + "：" + params.data.code + '人' + '<br />' + '男：' + params.data.code1 + '<br />' + '女：' + params.data.code2; } else if (params.seriesType == "lines") { return ( params.data.fromName + " > " + params.data.toName + "：" + params.data.value + '人' + '<br />' + '男：' + params.data.value1 + '<br />' + '女：' + params.data.value2 ); } else { return params.name; } } }, geo: { map: "china", label: { emphasis: { show: true, color: "#fff" } }, roam: false, // 放大我们的地图 zoom: 1.1, itemStyle: { normal: { areaColor: "rgba(43, 196, 243, 0.42)", borderColor: "rgba(43, 196, 243, 1)", borderWidth: 1 }, emphasis: { areaColor: "#2B91B7" } } }, series: series }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); })(); NCDindex.js var symptomName = last_month_day(); $(function(){ init(); }) function init(){ //地图 var mapChart = echarts.init(document.getElementById('mapChart')); mapChart.setOption({ bmap: { center: [118.096435,24.485408], zoom: 12, roam: true, }, tooltip : { trigger: 'item', formatter:function(params, ticket, callback){ return params.value[2] } }, series: [{ type: 'scatter', coordinateSystem: 'bmap', data: [ [118.096435, 24.485408, '信阳市'] , [118.094564, 24.457358, '信阳第一医院'] , [118.104103, 24.477761, '信阳中山医院'], [118.14748, 24.506295, '信阳中医院'], [118.254841, 24.665349, '信阳第五医院'], ] }] }); mapChart.on('click', function (params) { console.log(params.value[2]) // $("#hospitalName").html(params.value[2]); // if(params.value[2] == '信阳市'){ // $("#Data").html(100); // $("#Outpatient").html(20000); // $("#Hospitalization").html(3000); // } // if(params.value[2] == '信阳第一医院'){ // $("#Data").html(40); // $("#Outpatient").html(8000); // $("#Hospitalization").html(1200); // } // if(params.value[2] == '信阳中山医院'){ // $("#Data").html(30); // $("#Outpatient").html(6000); // $("#Hospitalization").html(900); // } // if(params.value[2] == '信阳中医院'){ // $("#Data").html(20); // $("#Outpatient").html(4000); // $("#Hospitalization").html(600); // } // if(params.value[2] == '信阳第五医院'){ // $("#Data").html(10); // $("#Outpatient").html(2000); // $("#Hospitalization").html(300); // } }); var bmap = mapChart.getModel().getComponent('bmap').getBMap() bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]})); bmap.setMapStyle({style:'midnight'}) var pieChart = echarts.init(document.getElementById('pieChart')); pieChart.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6","#FD6C88"], legend: { y : '260', x : 'center', textStyle : { color : '#ffffff', }, data : ['高血压','糖尿病','脑卒中','慢阻肺','慢性肾病'], }, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}G ({d}%)" }, calculable : false, series : [ { name:'采集数据量', type:'pie', radius : ['40%', '70%'], center : ['50%', '45%'], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '20', fontWeight : 'bold' } } } }, data:[ {value:335, name:'高血压'}, {value:310, name:'糖尿病'}, {value:234, name:'脑卒中'}, {value:135, name:'慢阻肺'}, {value:235, name:'慢性肾病'} ] } ] }); var lineChart = echarts.init(document.getElementById('lineChart')); lineChart.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6",], legend: { y : '260', x : 'center', textStyle : { color : '#ffffff', }, data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], }, calculable : false, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}条" }, yAxis: [ { type: 'value', axisLine : {onZero: false}, axisLine:{ lineStyle:{ color: '#034c6a' }, }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "k条" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } } } ], xAxis: [ { type: 'category', data : ['8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'], axisLine:{ lineStyle:{ color: '#034c6a' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } }, } ], grid:{ left: '5%', right: '5%', bottom: '20%', containLabel: true }, series : [ { name:'信阳第一医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[15, 0, 20, 45, 22.1, 25, 70, 55, 76] }, { name:'信阳中山医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[25, 10, 30, 55, 32.1, 35, 80, 65, 76] }, { name:'信阳中医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[35, 20, 40, 65, 42.1, 45, 90, 75, 96] }, { name:'信阳第五医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[45, 30, 50, 75, 52.1, 55, 100, 85, 106] } ] }); var histogramChart = echarts.init(document.getElementById('histogramChart')); histogramChart.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6",], legend: { y : '250', x : 'center', data:['信阳第一医院', '信阳中山医院','信阳中医院','信阳第五医院'], textStyle : { color : '#ffffff', } }, calculable :false, grid:{ left: '5%', right: '5%', bottom: '20%', containLabel: true }, tooltip : { trigger: 'axis', axisPointer : { type : 'shadow' } }, xAxis : [ { type : 'value', axisLabel: { show: true, textStyle: { color: '#fff' } }, splitLine:{ lineStyle:{ color:['#f2f2f2'], width:0, type:'solid' } } } ], yAxis : [ { type : 'category', data:['门诊人数(人)', '住院人次(人)','人均费用(元)'], axisLabel: { show: true, textStyle: { color: '#fff' } }, splitLine:{ lineStyle:{ width:0, type:'solid' } } } ], series : [ { name:'信阳第一医院', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[320, 302, 301] }, { name:'信阳中山医院', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[120, 132, 101] }, { name:'信阳中医院', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[220, 182, 191] }, { name:'信阳第五医院', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[150, 212, 201] } ] }); var lineChart2 = echarts.init(document.getElementById('lineChart2')); lineChart2.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6",], legend: { y : '260', x : 'center', textStyle : { color : '#ffffff', }, data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], }, calculable : false, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}条" }, yAxis: [ { type: 'value', axisLine : {onZero: false}, axisLine:{ lineStyle:{ color: '#034c6a' }, }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "条" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } } } ], xAxis: [ { type: 'category', data : ['8:00','10:00','12:00','14:00','16:00','18:00'], axisLine:{ lineStyle:{ color: '#034c6a' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, splitLine:{ lineStyle:{ width:0, type:'solid' } }, } ], grid:{ left: '5%', right: '5%', bottom: '20%', containLabel: true }, series : [ { name:'信阳第一医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[15, 0, 20, 45, 22.1, 25,].reverse() }, { name:'信阳中山医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[25, 10, 30, 55, 32.1, 35, ].reverse() }, { name:'信阳中医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[35, 20, 40, 65, 42.1, 45, ].reverse() }, { name:'信阳第五医院', type:'line', smooth:true, itemStyle: { normal: { lineStyle: { shadowColor : 'rgba(0,0,0,0.4)' } } }, data:[45, 30, 50, 75, 52.1, 55, 6].reverse() } ] }); } quota.js $(function(){ init(); }) function init(){ var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6']; //各医院门诊人次 var histogramChart1 = echarts.init(document.getElementById('histogramChart1')); histogramChart1.setOption({ grid: { top: '20%', left: '32%' }, xAxis: { show: false }, yAxis: [{ show: true, data: ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], inverse: true, axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { color: '#fff', formatter: (value, index) => { return [ `{lg|${index+1}} ` + '{title|' + value + '} ' ].join('\n') }, rich: { lg: { backgroundColor: '#339911', color: '#fff', borderRadius: 15, // padding: 5, align: 'center', width: 15, height: 15 }, } }, }, { show: true, inverse: true, data: [4000, 3000, 2000, 1000], axisLabel: { textStyle: { fontSize: 12, color: '#fff', }, }, axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, }], series: [{ name: '条', type: 'bar', yAxisIndex: 0, data: [40, 30, 20, 10], barWidth: 10, itemStyle: { normal: { barBorderRadius: 20, color: function(params) { var num = myColor.length; return myColor[params.dataIndex % num] }, } }, label: { normal: { show: true, position: 'inside', formatter: '{c}%' } }, }, { name: '框', type: 'bar', yAxisIndex: 1, barGap: '-100%', data: [100, 100, 100, 100], barWidth: 15, itemStyle: { normal: { color: 'none', borderColor: '#00c1de', borderWidth: 3, barBorderRadius: 15, } } }, ] }) //各医院住院人次 var histogramChart2 = echarts.init(document.getElementById('histogramChart2')); histogramChart2.setOption({ grid: { top: '20%', left: '32%' }, xAxis: { show: false }, yAxis: [{ show: true, data: ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], inverse: true, axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { color: '#fff', formatter: (value, index) => { return [ `{lg|${index+1}} ` + '{title|' + value + '} ' ].join('\n') }, rich: { lg: { backgroundColor: '#339911', color: '#fff', borderRadius: 15, // padding: 5, align: 'center', width: 15, height: 15 }, } }, }, { show: true, inverse: true, data: [2200, 2400, 2600, 2800], axisLabel: { textStyle: { fontSize: 12, color: '#fff', }, }, axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, }], series: [{ name: '条', type: 'bar', yAxisIndex: 0, data: [22, 24, 26, 28], barWidth: 10, itemStyle: { normal: { barBorderRadius: 20, color: function(params) { var num = myColor.length; return myColor[params.dataIndex % num] }, } }, label: { normal: { show: true, position: 'inside', formatter: '{c}%' } }, }, { name: '框', type: 'bar', yAxisIndex: 1, barGap: '-100%', data: [100, 100, 100, 100], barWidth: 15, itemStyle: { normal: { color: 'none', borderColor: '#00c1de', borderWidth: 3, barBorderRadius: 15, } } }, ] }) //手术工作量 var pieChart1 = echarts.init(document.getElementById('pieChart1')); pieChart1.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6",], tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}台" }, calculable : true, series : [ { name:'手术工作量', type:'pie', radius : [30, 110], center : ['50%', '50%'], roseType : 'area', x: '50%', max: 40, sort : 'ascending', data:[ {value:10, name:'信阳第一医院'}, {value:5, name:'信阳中山医院'}, {value:15, name:'信阳中医院'}, {value:25, name:'信阳第五医院'}, ] } ] }) //医疗费用 var lineChart1 = echarts.init(document.getElementById('lineChart1')); lineChart1.setOption( { color:["#87cefa","#ff7f50","#32cd32","#da70d6",], tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}元" }, legend: { data:['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], y: 'bottom', x:'center', textStyle:{ color:'#fff', fontSize:12 } }, grid:{ left: '5%', right: '5%', bottom: '10%', containLabel: true }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'], axisLine:{ lineStyle:{ color: '#87cefa' }, }, axisLabel : { interval:0, rotate:40, textStyle: { color: '#fff', fontSize:13 } } } ], yAxis : [ { type : 'value', axisLine:{ lineStyle:{ color: '#87cefa' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "元" }, }, } ], series : [ { name:'信阳第一医院', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[10, 12, 21, 54, 260, 830, 710] }, { name:'信阳中山医院', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[30, 182, 434, 791, 390, 30, 10] }, { name:'信阳中医院', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[1320, 1132, 601, 234, 120, 90, 20] }, { name:'信阳第五医院', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[320, 132, 61, 34, 20, 9, 2] } ] }) //体检人次 var lineChart2 = echarts.init(document.getElementById('lineChart2')); lineChart2.setOption( { color:["#87cefa","#ff7f50","#32cd32","#da70d6",], tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人" }, legend: { data:['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], y: 'bottom', x:'center', textStyle:{ color:'#fff', fontSize:12 } }, grid:{ left: '5%', right: '5%', bottom: '10%', containLabel: true }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'], axisLine:{ lineStyle:{ color: '#87cefa' }, }, axisLabel : { interval:0, rotate:40, textStyle: { color: '#fff', fontSize:13 } } } ], yAxis : [ { type : 'value', axisLine:{ lineStyle:{ color: '#87cefa' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "人" }, }, } ], series : [ { name:'信阳第一医院', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[120, 122, 221, 524, 460, 530, 610] }, { name:'信阳中山医院', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[130, 682, 534, 691, 490, 130, 110] }, { name:'信阳中医院', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[320, 132, 161, 134, 112, 190, 120] }, { name:'信阳第五医院', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[320, 132, 461, 34, 202, 93, 222] } ] }) //床位数量分布 var pieChart2 = echarts.init(document.getElementById('pieChart2')); pieChart2.setOption({ color:["#87cefa","#ff7f50","#32cd32","#da70d6",], tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}床" }, calculable : true, series : [ { name:'床位数量分布', type:'pie', radius : [30, 110], center : ['45%', '50%'], roseType : 'area', x: '50%', max: 40, sort : 'ascending', data:[ {value:700, name:'信阳第一医院'}, {value:500, name:'信阳中山医院'}, {value:105, name:'信阳中医院'}, {value:250, name:'信阳第五医院'}, ] } ] }) //药占比 var histogramChart3 = echarts.init(document.getElementById('histogramChart3')); histogramChart3.setOption( { color:['#87cefa'], grid:{ left: '5%', right: '5%', bottom: '5%', containLabel: true }, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}%" }, calculable : true, xAxis : [ { type : 'category', data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], axisLine:{ lineStyle:{ color: '#87cefa' }, }, axisLabel : { interval:0, rotate:40, textStyle: { color: '#fff', fontSize:13 } } } ], yAxis : [ { type : 'value', axisLine:{ lineStyle:{ color: '#87cefa' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "%" }, }, } ], series : [ { name:'药占比', type:'bar', barWidth:30, data:[60,80,70,50], }, ] }); //平均住院天数 var histogramChart4 = echarts.init(document.getElementById('histogramChart4')); histogramChart4.setOption( { color:['#87cefa'], grid:{ left: '5%', right: '5%', bottom: '5%', containLabel: true }, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}天" }, calculable : true, xAxis : [ { type : 'category', data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',], axisLine:{ lineStyle:{ color: '#87cefa' }, }, axisLabel : { interval:0, rotate:40, textStyle: { color: '#fff', fontSize:13 } } } ], yAxis : [ { type : 'value', axisLine:{ lineStyle:{ color: '#87cefa' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "天" }, }, } ], series : [ { name:'平均住院天数', type:'bar', barWidth:30, data:[6,8,7,5], }, ] }); } scripts.js document.addEventListener('DOMContentLoaded', function() { // 获取 Flash 消息的容器 var flashMessages = document.getElementById('flash-messages'); // 检查 Flash 消息是否存在 if (flashMessages) { // 设置一个 3 秒后执行的定时器 setTimeout(function() { // 隐藏 Flash 消息 flashMessages.style.display = 'none'; }, 3000); // 3000 毫秒 = 3 秒 } }); trend.js var symptomName = last_year_month(); $(function(){ init(); }) function init(){ var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6']; //主要传染病 var histogramChart1 = echarts.init(document.getElementById('histogramChart1')); histogramChart1.setOption({ color:['#5bc0de'], grid:{ left: '5%', right: '5%', bottom: '5%', containLabel: true }, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人" }, calculable : true, xAxis : [ { type : 'category', data : ['感染性腹泻','流行性感冒','登革热','手足口病','水痘','流行性眼腺炎','猩红热','甲型病毒性肝炎','疟疾'], axisLine:{ lineStyle:{ color: '#5bc0de' }, }, axisLabel : { interval:0, rotate:40, textStyle: { color: '#fff' } } } ], yAxis : [ { type : 'value', axisLine:{ lineStyle:{ color: '#5bc0de' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, } ], series : [ { name:'主要传染病', type:'bar', barWidth : 20, data:[2210,1085,926,669,634,452,412,312,156], }, ] }) //主要症状 var histogramChart2 = echarts.init(document.getElementById('histogramChart2')); histogramChart2.setOption({ color:['#FD6C88'], grid:{ left: '5%', right: '5%', bottom: '10%', containLabel: true }, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人" }, calculable : true, yAxis : [ { type : 'category', data : ['腹痛、腹胀、腹泻','恶心、呕吐、食欲不振','肌肉酸痛、乏力','持续高烧','头痛、眼眶痛、肌肉疼','皮疹、水泡','呼吸浅促','发热、咳嗽、流口水'], axisLine:{ lineStyle:{ color: '#FD6C88' }, }, axisLabel : { textStyle: { color: '#fff' } } } ], xAxis : [ { type : 'value', axisLine:{ lineStyle:{ color: '#FD6C88' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, } ], series : [ { name:'主要症状', type:'bar', barWidth : 20, data:[1750,1416,1136,819,704,413,251,175], }, ] }) //传染病发病趋势 var lineChart1 = echarts.init(document.getElementById('lineChart1')); lineChart1.setOption({ title: { text: '传染病趋势', textStyle:{ fontSize:16, color:'#ff7f50' }, }, color:["#ff7f50"], grid:{ left: '15%', right: '5%', bottom: '15%', }, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人" }, calculable : true, yAxis: [ { type: 'value', axisLine:{ lineStyle:{ color: '#ff7f50' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, } ], xAxis: [ { type: 'category', data : symptomName, boundaryGap : false, axisLine:{ lineStyle:{ color: '#ff7f50' }, }, splitLine: { "show": false }, axisLabel: { // interval:0, // rotate:40, textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, } ], series : [ { name:'传染病人数', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90] }, ] }) //主要疾病排行 var histogramChart3 = echarts.init(document.getElementById('histogramChart3')); histogramChart3.setOption({ grid: { top: '12%', left: '30%' }, xAxis: { show: false }, yAxis: [{ show: true, data: ['抑郁症','高血压','痔疮','肺癌','子宫肌瘤 ','乙肝','水痘','肺结核'], inverse: true, axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { color: '#fff', formatter: (value, index) => { return [ `{lg|${index+1}} ` + '{title|' + value + '} ' ].join('\n') }, rich: { lg: { backgroundColor: '#339911', color: '#fff', borderRadius: 15, // padding: 5, align: 'center', width: 15, height: 15 }, } }, }, { show: true, inverse: true, data: [2000, 1800, 1200, 1100,900,900,800,700], axisLabel: { textStyle: { fontSize: 12, color: '#fff', }, }, axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, }], series: [{ name: '条', type: 'bar', yAxisIndex: 0, data: [20,18,12,11,9,9,8,7], barWidth: 10, itemStyle: { normal: { barBorderRadius: 20, color: function(params) { var num = myColor.length; return myColor[params.dataIndex % num] }, } }, label: { normal: { show: true, position: 'inside', formatter: '{c}%' } }, }, { name: '框', type: 'bar', yAxisIndex: 1, barGap: '-100%', data: [100, 100, 100, 100,100, 100, 100, 100], barWidth: 15, itemStyle: { normal: { color: 'none', borderColor: '#00c1de', borderWidth: 1, barBorderRadius: 15, } } }, ] }) //疾病发病趋势 var lineChart2 = echarts.init(document.getElementById('lineChart2')); lineChart2.setOption({ title: { text: '疾病发病趋势', textStyle:{ fontSize:16, color:'#32cd32' }, x:"center" }, color:["#32cd32"], grid:{ left: '15%', right: '5%', bottom: '25%', }, tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人" }, calculable : true, yAxis: [ { type: 'value', axisLine:{ lineStyle:{ color: '#32cd32' }, }, splitLine: { "show": false }, axisLabel: { textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, } ], xAxis: [ { type: 'category', data : symptomName, boundaryGap : false, axisLine:{ lineStyle:{ color: '#32cd32' }, }, splitLine: { "show": false }, axisLabel: { // interval:0, // rotate:40, textStyle: { color: '#fff' }, formatter: function (value) { return value + "" }, }, } ], series : [ { name:'疾病发病人数', type:'line', smooth:true, itemStyle: {normal: {areaStyle: {type: 'default'}}}, data:[520, 232,701, 434, 190, 230, 210,120, 132, 101, 134, 890] }, ] }) //年龄分布 var pieChart1 = echarts.init(document.getElementById('pieChart1')); pieChart1.setOption({ color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"], tooltip : { trigger: 'item', formatter: "{a}<br/>{b}<br/>{c}人" }, calculable : true, series : [ { name:'发病人数', type:'pie', radius : [30, 110], center : ['50%', '50%'], roseType : 'area', x: '50%', sort : 'ascending', data:[ {value:10, name:'婴儿(1-3岁)'}, {value:5, name:'少儿(4-10岁)'}, {value:15, name:'少年(10-18岁)'}, {value:25, name:'青年(18-45岁)'}, {value:125, name:'中年(45-60岁)'}, {value:175, name:'老年(60岁以上)'}, ] } ] }) //性别分布 var labelFromatter = { normal : { label : { position : 'center', formatter : function (params){ console.log(params) if(params.name == "女性"){ return "女性"+":"+(params.percent + '%') }else{ return "男性"+":"+(params.percent + '%') } }, }, labelLine : { show : false } }, }; var pieChart2 = echarts.init(document.getElementById('pieChart2')); pieChart2.setOption({ color: ['#87cefa','#FD6C88'], tooltip : { trigger: 'item', formatter: "{b}({c})<br/>{d}%" }, series : [ { type : 'pie', center : ['50%', '50%'], radius : [55, 95], x: '0%', // for funnel itemStyle : labelFromatter, data : [ {name:'男性', value:158}, {name:'女性', value:142}, ] }, ], }) } 效果展示

注册信息会生成到对应的数据库中

完整代码连接

download.csdn.net/download/weixin_66547608/90392925 download.csdn.net/download/weixin_66547608/90392925 download.csdn.net/download/weixin_66547608/90392925

从安装软件到flask框架搭建可视化大屏（一）——创建一个flask页面，零基础也可以学会-CSDN博客 blog.csdn.net/weixin_66547608/article/details/145669546?sharetype=blogdetail&sharerId=145669546&sharerefer=PC&sharesource=weixin_66547608&spm=1011.2480.3001.8118

标签：

从安装软件到flask框架搭建可视化大屏（二）——创建一个flask页面，搭建可视化大屏，零基础也可以学会由讯客互联开源代码栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“从安装软件到flask框架搭建可视化大屏（二）——创建一个flask页面，搭建可视化大屏，零基础也可以学会”

上一篇
SMUWinter2025div13rd

下一篇
【QtQml】QML与C++交互