从安装软件到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 = Falsebase.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/90392925
https://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
相关文章：
从安装软件到flask框架搭建可视化大屏（二）——创建一个flask页面，搭建可视化大屏，零基础也可以学会
附录：所有文件的完整代码 models.py # models/models.py from flask_sqlalchemy import SQLAlchemydb SQLAlchemy()class User(db.Model):__tablename__ user # 显式指定表名为 userid db.Column(db.Integer, primary_keyTrue)username db.Column(db.String(…...
【mybatis】基本操作：详解Spring通过注解和XML的方式来操作mybatis
mybatis 的常用配置 配置数据库连接 #驱动类名称 spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver #数据库连接的url spring.datasource.urljdbc:mysql://127.0.0.1:3306/mybatis_test characterEncodingutf8&useSSLfalse #连接数据库的名 spring.datasourc…...
[JVM篇]垃圾回收器
垃圾回收器 Serial Seral Old PartNew CMS(Concurrent Mark Sweep) Parallel Scavenge Parallel Old G1 ZGC...
DeepSeek专题：DeepSeek-V1核心知识点速览
AIGCmagic社区知识星球是国内首个以AIGC全栈技术与商业变现为主线的学习交流平台，涉及AI绘画、AI视频、大模型、AI多模态、数字人以及全行业AIGC赋能等100应用方向。星球内部包含海量学习资源、专业问答、前沿资讯、内推招聘、AI课程、AIGC模型、AIGC数据集和源码等…...
Ubuntu24.04更新国内源
24.04 源文件地址 已经更换为 /etc/apt/sources.list.d/ubuntu.sources sudo vim /etc/apt/sources.list.d/ubuntu.sources把内容替换为 # 阿里云 Types: deb URIs: http://mirrors.aliyun.com/ubuntu/ Suites: noble noble-updates noble-security Components: main restric…...
是时候说再见了
说再见 2018 to 2025 2018：学习 2018年开始读研。师兄师姐们说可以写写CSDN博客，对找工作也有帮助。于是在12月4日，发布了自己的第一篇文章[翻译] 神经网络与深度学习 首页 - Index。当时还在学习各种基础知识，看到了这个英文文…...
SpringBoot+shardingsphere实现按月分表功能
SpringBootshardingsphere实现按月分表功能 文章目录 前言 ShardingSphere 是一套开源的分布式数据库中间件解决方案，旨在简化数据库分片、读写分离、分布式事务等复杂场景的管理。它由 Apache 软件基金会支持，广泛应用于需要处理大规模数据的系统中 一…...
表情识别任务的复现 for 毕设
前言 为了带师弟做毕设，我们复现了表情识别任务。该文章仅用于记录 首先，感谢复现过程中所参考的分享： 【Bilibili】基于卷积神经网络实现的面部表情识别（pytorch）【Github】 facial-expression-recognition【Blog】…...
教程 | 从零部署到业务融合：DeepSeek R1 私有化部署实战指南
文章目录 1. 什么是 DeepSeek R1？a. 主要介绍a. 版本区别 2. 部署资源要求a. 硬件资源要求 3. 本地安装DeepSeek-R1a. 为什么选择本地部署？b. 部署工具对比c. 演示环境配置d. Ollama安装流程 4. 可视化工具a. 工具对比b. Open-WebUI部署 5. AI API应用a.…...
分布式 NewSQL 数据库（TiDB）
TiDB 是一个分布式 NewSQL 数据库。它支持水平弹性扩展、ACID 事务、标准 SQL、MySQL 语法和 MySQL 协议，具有数据强一致的高可用特性，是一个不仅适合 OLTP 场景还适合 OLAP 场景的混合数据库。 TiDB是 PingCAP公司自主设计、研发的开源分布式关系型数据…...
密码管理 - 使用BitWarden/VaultWarden自托管密码服务 - 折腾记录
密码管理 - 使用Bitwarden/Vaultwarden自托管密码服务 - 折腾记录 前言 某天(大约两周前了至少 一直没找到机会记录)逛Github发现了开源的密码管理服务Bitwarden，能自托管、能加密、多端适配。 这，，不是让人如获至宝吗。于是就开始折腾了。…...
C语言-章节 1：变量与数据类型 ——「未初始化的诅咒」
在那神秘且广袤无垠的「比特大陆」上，阳光奋力地穿过「内存森林」中错综复杂的代码枝叶缝隙，洒下一片片斑驳陆离、如梦似幻的光影。林间的空气里，弥漫着一股浓郁的十六进制锈蚀味，仿佛在诉说着这片森林中隐藏的古老秘密。 一位零基…...
机器视觉--Halcon If语句
引言 在机器视觉领域，Halcon 是一款功能强大且广泛应用的软件。在使用 Halcon 进行编程时，条件判断是不可或缺的一部分，而IF语句就是实现条件判断的核心工具之一。通过IF语句，我们能够根据不同的条件执行不同的代码块，…...
Linux基础之文件权限的八进制表示法
1. Linux 文件权限概述 在 Linux 中，每个文件或目录都有三种基本权限，分别是： 读权限 - r：允许查看文件内容。写权限 - w：允许修改文件内容。执行权限 - x：允许执行文件或进入目录。 每个文件或目录的权…...
HTML的入门
一、HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。 超文本：就是超越了文本；HTML不仅仅可以用来显示文本(字符串、数字之类)，还可以显示视频、音频等…...
Vue2/Vue3生命周期对比
Vue2的生命周期钩子 beforeCreate 在实例初始化之后，数据观测（data）和事件配置之前调用。此时无法访问 data、methods 等。 created 在实例创建完成后调用。此时可以访问 data、methods，但 DOM 还未生成。 beforeMount 在挂载…...
闭源大语言模型的怎么增强:提示工程 检索增强生成 智能体
闭源大语言模型的怎么增强 提示工程 检索增强生成 智能体 核心原理 提示工程：通过设计和优化提示词，引导大语言模型进行上下文学习和分解式思考，激发模型自身的思维和推理能力，使模型更好地理解和生成文本，增强其泛用性和解决问题的能力。检索增强生成：结合检索的准确…...
【图像加密解密】空间混沌序列的图像加密解密算法复现（含相关性检验）【Matlab完整源码 2期】
1、说明 本文给出详细完整代码、完整的实验报告和PPT。 环境：MATLAB2019a 复现文献：[1]孙福艳,吕宗旺.Digital image encryption with chaotic map lattices[J].Chinese Physics B,2011,20(04):136-142. 2、部分报告内容 3 部分源码与运行步骤 3.1 部…...
QxOrm生成json
下载Qxorm-1.5版本 使用vs打开项目，直接生成即可： lib目录中会生成dll和lib文件 新建Qt项目使用Qxorm: 将QxOrm中上面三个目录拷贝到新建的Qt项目中 pro文件添加使用QxOrm第三方库 INCLUDEPATH $$PWD/include/ LIBS -L"$$PWD/lib" LIBS…...
ASP.NET Core Web应用(.NET9.0)读取数据库表记录并显示到页面
1.创建ASP.NET Core Web应用 选择.NET9.0框架 安装SqlClient依赖包 2.实现数据库记录读取: 引用数据库操作类命名空间 创建查询记录结构类 查询数据并返回数据集合 3.前端遍历数据并动态生成表格显示 生成结果:...
uniapp商城之首页模块
文章目录 前言一、自定义导航栏1.静态结构2.修改页面配置3.组件安全区适配二、通用轮播组件1. 静态结构组件2.自动导入全局组件3.首页轮播图数据获取三、首页分类1.静态结构2.首页获取分类数据并渲染四、热门推荐1.静态结构2.首页获取推荐数据并渲染3.首页跳转详细推荐页五、猜…...
以若依移动端版为基础，实现uniapp的flowable流程管理
1.前言 此代码是若依移动端版为基础，实现flowable流程管理，支持H5、APP和微信小程序三端。其中，APP是在安卓在雷电模拟器环境下完成的，其他环境未测试，此文章中所提及的APP均指上述环境。移动端是需要配合若依前后端分…...
C++：高度平衡二叉搜索树(AVLTree) [数据结构]
目录 一、AVL树 二、AVL树的理解 1.AVL树节点的定义 2.AVL树的插入 2.1更新平衡因子 3.AVL树的旋转 三、AVL的检查 四、完整代码实现 一、AVL树 AVL树是什么？我们对 map / multimap / set / multiset 进行了简单的介绍，可以发现，这几…...
2D 游戏艺术、动画和光照
原文：https://unity.com/resources/2d-game-art-animation-lighting-for-artists-ebook 笔记 用Tilemap瓷砖大小为1单元，人物大小在0.5~2单元 PPU ：单位像素 pixels per unit 2160 4K分辨率/ 正交相机size*2 完整屏幕显示像素点 有骨骼动…...
学习笔记-人脸识别相关编程基础
通过编程实现人脸识别功能，需要掌握一定的技术基础，包括编程语言、图像处理、机器学习以及相关的库和框架： 1. 编程语言 Python：Python 是实现人脸识别最常用的语言之一，因为它有大量的库和框架支持，如 Op…...
4、C#基于.net framework的应用开发实战编程 - 测试（四、二） - 编程手把手系列文章...
四、 测试； 四．二、实际运行； 在应用调试完毕，Bug基本解决的时候就需要对应用进行实际运行来进行查看使用体验及分发的准备工作。 1、 运行设置； 在启动项目上右键属性，点击生成，将顶部的配置改…...
栈与队列（C语言版）
文章目录 栈与队列1. 栈基本操作实现(基于链表)代码运行结果 应用场景 2. 队列基本操作实现代码运行结果 应用场景 栈与队列 1. 栈 栈是一种操作受限的线性结构。操作受限体现在，栈只能在一端添加和删除元素，符合后进先出 ( LIFO ) 的特性，…...
【算法专场】哈希表
目录 前言 哈希表 1. 两数之和 - 力扣（LeetCode） 算法分析 算法代码 面试题 01.02. 判定是否互为字符重排 编辑算法分析 算法代码 217. 存在重复元素 算法分析 算法代码 219. 存在重复元素 II 算法分析 算法代码 解法二 算法代码 算法…...
【设计模式】【行为型模式】迭代器模式（Iterator）
👋hi，我不是一名外包公司的员工，也不会偷吃茶水间的零食，我的梦想是能写高端CRUD 🔥 2025本人正在沉淀中… 博客更新速度 👍 欢迎点赞、收藏、关注，跟上我的更新节奏 🎵 当你的天空突…...
二次封装axios解决异步通信痛点
为了方便扩展，和增加配置的灵活性，这里将通过封装一个类来实现axios的二次封装,要实现的功能包括： 为请求传入自定义的配置，控制单次请求的不同行为在响应拦截器中对业务逻辑进行处理，根据业务约定的成功数据结构，返回业务数据对响应错误进行处理，配置显示对话框或消息形…...