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

附录：所有文件的完整代码

models.py

# models/models.py
from flask_sqlalchemy import SQLAlchemydb = 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, Regexpclass 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.pyfrom flask import Blueprint, render_template, redirect, url_for, flash, request, session
from forms.forms import LoginForm, RegisterForm
from models.models import db, Userviews_bp = Blueprint('views', __name__)@views_bp.route('/login', methods=['GET', 'POST'])
def login():form = LoginForm()if form.validate_on_submit():username = form.username.datapassword = form.password.datauser = User.query.filter_by(username=username).first()# TODO: Implement password hashingif user and user.password == password:flash('登录成功!', 'success')# 设置用户会话session['username'] = user.usernamereturn redirect(url_for('views.index'))  # 登录后跳转到 index.htmlelse: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.datapassword = form.password.dataif 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.commit()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.pyfrom 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_bpdef 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 hashingdb.session.add(user)db.session.commit()# 注册蓝图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 appapp = create_app()if __name__ == '__main__':app.run(debug=True)

config.py

import osclass 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="https://sso.xyafu.edu.cn/sso/img/text.png" alt="标语" class="slogan"><img src="https://www.xyafu.edu.cn/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="https://www.jq22.com/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.com/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="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script><script src="../static/js/Plugin/bmap.min.js"></script><script src="http://api.map.baidu.com/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="https://www.jq22.com/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><!-- res.html --><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="https://www.jq22.com/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.clientWidthif (!clientWidth) {return 0}let fontSize = clientWidth / 1920return 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', //容器高度,默认250pxsize: '5px', //滚动条宽度,默认7pxrailColor: '#000000', //滚动条背景轨迹颜色,默认#333333railOpacity: 0.3, //滚动条背景轨迹透明度,默认0.2wheelStep: 10, //滚动条滚动值,默认20disableFadeOut: 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 sizefunction setBodyFontSize() {if (document.body) {document.body.style.fontSize = 12 * dpr + "px";} else {document.addEventListener("DOMContentLoaded", setBodyFontSize);}}setBodyFontSize();// set 1rem = viewWidth / 10function setRemUnit() {var rem = docEl.clientWidth / 24;docEl.style.fontSize = rem + "px";}setRemUnit();// reset rem unit on page resizewindow.addEventListener("resize", setRemUnit);window.addEventListener("pageshow", function(e) {if (e.persisted) {setRemUnit();}});// detect 0.5px supportsif (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 funnelitemStyle : labelFromatter,data : [{name:'男性', value:158},{name:'女性', value:142},]},],})}

效果展示

 

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

 

 

 完整代码连接

https://download.csdn.net/download/weixin_66547608/90392925https://download.csdn.net/download/weixin_66547608/90392925https://download.csdn.net/download/weixin_66547608/90392925

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