从安装软件到flask框架搭建可视化大屏（二）——创建一个flask页面，搭建可视化大屏，零基础也可以学会
附录：所有文件的完整代码
models.py
# models/models.py
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
class User(db.Model):
__tablename__ = 'user' # 显式指定表名为 'user'
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(150), unique=True, nullable=False)
password = db.Column(db.String(150), nullable=False)
def __repr__(self):
return f'<User {self.username}>'
forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Length, EqualTo, Regexp
class LoginForm(FlaskForm):
username = StringField('用户名', validators=[DataRequired(), Length(min=4, max=25)],
render_kw={"placeholder": "请输入用户名"})
password = PasswordField('密码', validators=[DataRequired(), Length(min=6, max=80)],
render_kw={"placeholder": "请输入密码"})
submit = SubmitField('登录')
class RegisterForm(FlaskForm):
username = StringField('用户名', validators=[DataRequired(), Length(min=4, max=25)],
render_kw={"placeholder": "请输入用户名"})
password = PasswordField('密码', validators=[
DataRequired(),
Length(min=6),
Regexp(
'^(?=.*[a-z])(?=.*[A-Z])(?=.*\W).+$',
message='密码至少包含一个大写字母，一个小写字母和一个特殊字符'
)
],
render_kw={"placeholder": "请输入密码"})
confirm = PasswordField('确认密码', validators=[EqualTo('password')],
render_kw={"placeholder": "请再次输入密码"})
submit = SubmitField('确认')views.py
# views/views.py
from flask import Blueprint, render_template, redirect, url_for, flash, request, session
from forms.forms import LoginForm, RegisterForm
from models.models import db, User
views_bp = Blueprint('views', __name__)
@views_bp.route('/login', methods=['GET', 'POST'])
def login():
form = LoginForm()
if form.validate_on_submit():
username = form.username.data
password = form.password.data
user = User.query.filter_by(username=username).first()
# TODO: Implement password hashing
if user and user.password == password:
flash('登录成功!', 'success')
# 设置用户会话
session['username'] = user.username
return redirect(url_for('views.index')) # 登录后跳转到 index.html
else:
flash('无效的用户名或密码', 'danger')
return render_template('login.html', form=form)
@views_bp.route('/register', methods=['GET', 'POST'])
def register():
form = RegisterForm()
if form.validate_on_submit():
username = form.username.data
password = form.password.data
if User.query.filter_by(username=username).first():
flash('用户名已存在', 'danger')
return redirect(url_for('views.register'))
user = User(username=username, password=password)
db.session.add(user)
try:
db.session.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.py
from flask import Flask, render_template, redirect, url_for, flash
from config import Config
from models.models import db, User
from forms.forms import LoginForm, RegisterForm
from views.views import views_bp
def create_app():
app = Flask(__name__)
app.config.from_object(Config)
db.init_app(app)
with app.app_context():
db.create_all()
# 创建默认用户（如果不存在）
if not User.query.filter_by(username='admin').first():
user = User(username='admin', password='password') # TODO: Implement password hashing
db.session.add(user)
db.session.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 app
app = create_app()
if __name__ == '__main__':
app.run(debug=True)config.py
import os
class Config:
SECRET_KEY = os.environ.get('SECRET_KEY') or 'you-will-never-guess'
SQLALCHEMY_DATABASE_URI = 'mysql+mysqlconnector://root:mysql@localhost:3306/demologin'
SQLALCHEMY_TRACK_MODIFICATIONS = False
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}可视化系统{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
{% block body %}
<div class="login-background">
<div class="login-container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
<img src="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.clientWidth
if (!clientWidth) {
return 0
}
let fontSize = clientWidth / 1920
return px * fontSize
}
common.js
function callResourceAdapter(type, url, requestContent, successCallback, failCallback) {
if (requestContent == null){
requestContent = {};
}
if (type == null){
type = 'POST';
}
function invocationSuccess(result) {
var resultJson = result;
if(resultJson.msgCode == '800'){
if (successCallback && typeof(successCallback) == "function") {
successCallback(resultJson.rows,resultJson.map,resultJson.vo,resultJson.msg);
}
}
if(resultJson.msgCode == '801'){
showToast(resultJson.msg);
}
if(resultJson.msgCode == '900'){
var message = '系统错误，请联系管理员';
if(resultJson.msg){
message = resultJson.msg;
}
showToast(message);
if (failCallback && typeof(failCallback) == "function") {
failCallback();
}
}
}
function invocationFailure(error) {
showToast('无法连接至服务器,请稍后再试');
if (failCallback && typeof(failCallback) == "function") {
failCallback();
}
}
$.ajax({
type: type,
url: serverUrl+url,
data: JSON.stringify(requestContent),
crossDomain:true,
contentType: "application/json; charset=utf-8",
// dataType: "json",
timeout:120000,
statusCode:{
404: function() {
showToast('服务器无响应,请稍后再试')
},
422: function() {
showToast('应用程序请求对象错误,请稍后再试')
},
403: function() {
showToast('无访问权限')
},
400: function() {
showToast('应用程序请求无效,请稍后再试')
},
},
success: function (data, textStatus, jqXHR) {
switch (jqXHR.status) {
case 200:
invocationSuccess(data);
break;
default:
break;
}
},
error: function (jqXHR, textStatus,errorThrown) {
invocationFailure(jqXHR);
}
})
}
function showToast(text,timeout) {
$(".yui-toast-mask").remove();
var html = [
'<div class="yui-toast-mask">',
'<div class="yui-toast">',
'<div class="yui-toast-text">'+text+'</div>',
'</div>',
'</div>',
];
var dom = $(html.join(''));
$("body").append(dom);
if(timeout&&typeof(timeout)=='number'){
setTimeout(function () {
dom.remove();
},timeout);
}
$(".yui-toast-mask").click(function () {
dom.remove();
});
}
function hideToast() {
$(".yui-toast-mask").remove();
}
function loaderShow() {
var loadPage = $('<div class="loading" style="top:30%;left:50%;position: absolute;background: transparent;text-align: center;">' +
'<img src="../images/loading.gif" />' +
'</div>');
$("#content").append(loadPage);
}
function loaderHide() {
$(".loading").remove();
}
function getLocationDom() {
var that = this;
var html = "<div id='breadcrumb'>";
$.each(LOCATION,function(index,data){
if(index==0){
html += '<a href="javascript:void(0)" class="tip-bottom"><i class="fa fa-home"></i>'+data+'</a>';
return ;
}
if(index==LOCATION.length-1){
html += '<a class="current">'+data+'</a>';
return ;
}
html += "<a href='javascript:void(0)'>"+data+"</a>";
});
html += "</div>";
$("#content-header").html(html);
}
function getNav(successCallback) {
var postNav = [];
postNav.push('<li class="submenu" data-for= "home">','<a href="javascript:void(0)"><span>首页</span></a>');
postNav.push('<li class="submenu" data-for= "analysis">','<a href="javascript:void(0)"><span>指标统计</span></a>');
postNav.push('<li class="submenu" data-for= "trend">','<a href="javascript:void(0)"><span>趋势排名</span></a>');
$("#sidebar ul").html(postNav.join(''));
if (successCallback&&typeof(successCallback) == 'function'){
successCallback();
}
}
function bindNav(navId) {
var HEIGHT = $("body").height()-100;
$("#content").height(HEIGHT);
$(".container-fluid").slimScroll({
height: HEIGHT+'px', //容器高度,默认250px
size: '5px', //滚动条宽度,默认7px
railColor: '#000000', //滚动条背景轨迹颜色,默认#333333
railOpacity: 0.3, //滚动条背景轨迹透明度,默认0.2
wheelStep: 10, //滚动条滚动值,默认20
disableFadeOut: false //是否禁用鼠标在内容处一定时间不动隐藏滚动条,当设置alwaysVisible为true时该参数无效,默认false
});
$("#"+navId).delegate("li[data-for='home']","click",function(){
window.location.href="home.html"
}).delegate("li[data-for='analysis']","click",function(){
window.location.href="analysis.html"
}).delegate("li[data-for='trend']","click",function(){
window.location.href="trend.html"
})
}
function last_year_month() {
var list = [];
var date = getFormatDate(new Date());
var year = date.split("-")[0];
var mouth = date.split("-")[1];
for (var i=0;i<12;i++){
var objM = mouth-i;
var objY = year;
if(objM<=0){
objM = objM+12;
objY = year -1;
}
if(objM<10){
objM = "0"+objM;
}
var obj = objY +"-"+objM;
list.push(obj)
}
return list;
}
function getFormatDate(date){
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
if(month<10){
month = '0'+month.toString();
}
month = month.toString();
if(day<10){
day = '0'+day.toString();
}
day = day.toString();
return year+'-'+month+'-'+day;
}
function last_month_day() {
var list = [];
var date = getFormatDate(new Date());
var year = date.split("-")[0];
var mouth = date.split("-")[1];
var day = date.split("-")[2]-1;
for (var i=0;i<30;i++){
var objM = mouth;
var objD = day-i;
if(objD<=0){
objD = objD+30;
objM = mouth -1;
objM = "0"+objM
}
var obj = year+"-"+objM +"-"+objD;
list.push(obj)
}
return list;
}
function getFormatMonth(date){
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
if(month<10){
month = '0'+month.toString();
}
month = month.toString();
if(day<10){
day = '0'+day.toString();
}
day = day.toString();
return year+'-'+month;
}
//分页
function paging(totalPage,currentPage) {
$("#pagination").pagination({
currentPage: currentPage,
totalPage: totalPage,
isShow: true,
count: 8,
homePageText: "首页",
endPageText: "尾页",
prevPageText: "上一页",
nextPageText: "下一页",
callback: function(current) {
$("#current").text(current)
}
});
}
flexible.js
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = 12 * dpr + "px";
} else {
document.addEventListener("DOMContentLoaded", setBodyFontSize);
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit() {
var rem = docEl.clientWidth / 24;
docEl.style.fontSize = rem + "px";
}
setRemUnit();
// reset rem unit on page resize
window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function(e) {
if (e.persisted) {
setRemUnit();
}
});
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement("body");
var testElement = document.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
docEl.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
docEl.classList.add("hairlines");
}
docEl.removeChild(fakeBody);
}
})(window, document);
index.js
var symptomName = last_month_day();
$(function(){
init();
init2();
$("#el-dialog").addClass("hide");
$(".close").click(function(event) {
$("#el-dialog").addClass("hide");
});
var date = new Date();
var numble = date.getDate();
var today = getFormatMonth(new Date());
$("#date1").html(today);
$("#date2").html(today);
$("#date3").html(today);
$("#date4").html(today);
lay('.demo-input').each(function(){
laydate.render({
type: 'month',
elem: this,
trigger: 'click',
theme: '#95d7fb',
calendar: true,
showBottom: true,
done: function () {
console.log( $("#startDate").val())
}
})
});
})
function init(){
//地图
var mapChart = echarts.init(document.getElementById('mapChart'));
mapChart.setOption({
bmap: {
center: [114.040,32.080],
zoom: 12,
roam: true,
},
tooltip : {
trigger: 'item',
formatter:function(params, ticket, callback){
return params.value[2]
}
},
series: [{
type: 'scatter',
coordinateSystem: 'bmap',
data: [
[114.040,32.080, '信阳市'] ,
[114.13,32.15, '信阳人民医院'] ,
[114.07,32.13, '信阳市中心医院浉河院区'],
[114.05,32.13, '信阳一五四医院'],
[114.05,32.12, '信阳市第三人民医院'],
]
}]
});
mapChart.on('click', function (params) {
$("#el-dialog").removeClass('hide');
$("#reportTitle").html(params.value[2]);
});
var bmap = mapChart.getModel().getComponent('bmap').getBMap()
bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]}));
bmap.setMapStyle({style:'midnight'})
var pieChart1 = echarts.init(document.getElementById('pieChart1'));
pieChart1.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '260',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
},
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}G ({d}%)"
},
calculable : false,
series : [
{
name:'采集数据量',
type:'pie',
radius : ['40%', '70%'],
center : ['50%', '45%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '20',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'信阳第一医院'},
{value:310, name:'信阳中山医院'},
{value:234, name:'信阳中医院'},
{value:135, name:'信阳第五医院'}
]
}
]
});
var lineChart = echarts.init(document.getElementById('lineChart'));
lineChart.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '260',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
},
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}条"
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "k条"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : ['8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'],
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'信阳第一医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[15, 0, 20, 45, 22.1, 25, 70, 55, 76]
},
{
name:'信阳中山医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[25, 10, 30, 55, 32.1, 35, 80, 65, 76]
},
{
name:'信阳中医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[35, 20, 40, 65, 42.1, 45, 90, 75, 96]
},
{
name:'信阳第五医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[45, 30, 50, 75, 52.1, 55, 100, 85, 106]
}
]
});
var histogramChart = echarts.init(document.getElementById('histogramChart'));
histogramChart.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '250',
x : 'center',
data:['信阳第一医院', '信阳中山医院','信阳中医院','信阳第五医院'],
textStyle : {
color : '#ffffff',
}
},
calculable :false,
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
xAxis : [
{
type : 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
splitLine:{
lineStyle:{
color:['#f2f2f2'],
width:0,
type:'solid'
}
}
}
],
yAxis : [
{
type : 'category',
data:['门诊人数(人)', '住院人次(人)','人均费用(元)'],
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
series : [
{
name:'信阳第一医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[320, 302, 301]
},
{
name:'信阳中山医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[120, 132, 101]
},
{
name:'信阳中医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[220, 182, 191]
},
{
name:'信阳第五医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[150, 212, 201]
}
]
});
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
lineChart2.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '260',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
},
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}条"
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "k条"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : ['8:00','10:00','12:00','14:00','16:00','18:00'],
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'信阳第一医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[15, 0, 20, 45, 22.1, 25,].reverse()
},
{
name:'信阳中山医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[25, 10, 30, 55, 32.1, 35, ].reverse()
},
{
name:'信阳中医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[35, 20, 40, 65, 42.1, 45, ].reverse()
},
{
name:'信阳第五医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[45, 30, 50, 75, 52.1, 55, 6].reverse()
}
]
});
}
function init2(){
var lineChart3 = echarts.init(document.getElementById('lineChart3'));
lineChart3.setOption({
color:["#87cefa","#ff7f50",],
legend: {
y : 'top',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['门诊人次','住院人次'],
},
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
dataZoom: {
show: true,
realtime : true,
start: 0,
end: 18,
height: 20,
backgroundColor: '#f8f8f8',
dataBackgroundColor: '#e4e4e4',
fillerColor: '#87cefa',
handleColor: '#87cefa',
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "人"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : symptomName,
boundaryGap : false,
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'门诊费用',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[1150, 180, 2100, 2415, 1212.1, 3125,1510, 810, 2100, 2415, 1122.1, 3215,1510, 801, 2001, 2245, 1232.1, 3245,1520, 830, 2200, 2145, 1223.1, 3225,150, 80, 200, 245, 122.1, 325]
},
{
name:'住院费用',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[2500, 1000, 3000, 5005, 3200.1, 3005, 2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005, 2500, 1000, 3000, 5005, 3200.1, 3005,2500, 1000, 3000, 5005, 3200.1, 3005,]
},
]
});
var lineChart4 = echarts.init(document.getElementById('lineChart4'));
lineChart4.setOption({
color:["#87cefa","#ff7f50",],
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}元"
},
dataZoom: {
show: true,
realtime : true,
start: 0,
end: 18,
height: 20,
backgroundColor: '#f8f8f8',
dataBackgroundColor: '#e4e4e4',
fillerColor: '#87cefa',
handleColor: '#87cefa',
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "元"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : symptomName,
boundaryGap : false,
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'医疗费用',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[1500, 800, 1200, 2450, 1122.1, 1325,1150, 180, 1200, 1245, 1122.1, 1325,150, 180, 1200, 2145, 1212.1, 3215,1510, 180, 2100, 2415, 122.1, 325,150, 80, 200, 245, 122.1, 325].reverse()
},
]
});
//年龄分布
var pieChart2 = echarts.init(document.getElementById('pieChart2'));
pieChart2.setOption({
color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"],
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
calculable : true,
series : [
{
name:'发病人数',
type:'pie',
radius : [30, 110],
center : ['50%', '50%'],
roseType : 'area',
x: '50%',
sort : 'ascending',
data:[
{value:10, name:'婴儿(1-3岁)'},
{value:5, name:'少儿(4-10岁)'},
{value:15, name:'少年(10-18岁)'},
{value:25, name:'青年(18-45岁)'},
{value:125, name:'中年(45-60岁)'},
{value:175, name:'老年(60岁以上)'},
]
}
]
})
//医疗费用组成
var pieChart3 = echarts.init(document.getElementById('pieChart3'));
pieChart3.setOption({
color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"],
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}元"
},
calculable : true,
series : [
{
name:'发病人数',
type:'pie',
radius : [30, 110],
center : ['50%', '50%'],
roseType : 'area',
x: '50%',
sort : 'ascending',
data:[
{value:10, name:'诊察费用'},
{value:500, name:'检查费用'},
{value:150, name:'检验费用'},
{value:250, name:'西药费用'},
{value:125, name:'中药费用'},
{value:1750, name:'手术费用'},
]
}
]
})
}myMap.js
(function () {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".map .chart"));
// 2. 指定配置和数据
// 2. 指定配置和数据
var geoCoordMap = {
台湾: [121.5135, 25.0308],
黑龙江: [127.9688, 45.368],
内蒙古: [110.3467, 41.4899],
吉林: [125.8154, 44.2584],
北京市: [116.4551, 40.2539],
辽宁: [123.1238, 42.1216],
河北: [114.4995, 38.1006],
天津: [117.4219, 39.4189],
山西: [112.3352, 37.9413],
陕西: [109.1162, 34.2004],
甘肃: [103.5901, 36.3043],
宁夏: [106.3586, 38.1775],
青海: [101.4038, 36.8207],
新疆: [87.9236, 43.5883],
西藏: [91.11, 29.97],
四川: [103.9526, 30.7617],
重庆: [108.384366, 30.439702],
山东: [117.1582, 36.8701],
河南: [113.4668, 34.6234],
江苏: [118.8062, 31.9208],
安徽: [117.29, 32.0581],
湖北: [114.3896, 30.6628],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
江西: [116.0046, 28.6633],
湖南: [113.0823, 28.2568],
贵州: [106.6992, 26.7682],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
广西: [108.479, 23.1152],
海南: [110.3893, 19.8516],
上海: [121.4648, 31.2891],
};
var MapData = [
[{ name: "北京市" }, { name: "上海", value: 35089, value1: 19084, value2: 16005 }],
[{ name: "天津" }, { name: "海南", value: 22642, value1: 11367, value2: 11275 }],
[{ name: "天津" }, { name: "上海", value: 22642, value1: 11367, value2: 11275 }],
[{ name: "河北" }, { name: "上海", value: 125526, value1: 70281, value2: 55245 }],
[{ name: "山西" }, { name: "上海", value: 118384, value1: 67058, value2: 51326 }],
[{ name: "内蒙古" }, { name: "上海", value: 47163, value1: 23820, value2: 23343 }],
[{ name: "辽宁" }, { name: "江苏", value: 122922, value1: 59869, value2: 63053 }],
[{ name: "吉林" }, { name: "上海", value: 105841, value1: 51627, value2: 54214 }],
[{ name: "黑龙江" }, { name: "上海", value: 165644, value1: 79481, value2: 86163 }],
[{ name: "江苏" }, { name: "上海", value: 1798258, value1: 1009157, value2: 789101 }],
[{ name: "浙江" }, { name: "安徽", value: 515614, value1: 264405, value2: 251209 }],
[{ name: "安徽" }, { name: "上海", value: 2426484, value1: 1337217, value2: 1089267 }],
[{ name: "福建" }, { name: "河南", value: 294823, value1: 161641, value2: 133182 }],
[{ name: "江西" }, { name: "河南", value: 502200, value1: 276599, value2: 225601 }],
[{ name: "山东" }, { name: "上海", value: 501181, value1: 293389, value2: 207792 }],
[{ name: "河南" }, { name: "山东", value: 1342950, value1: 800170, value2: 542780 }],
[{ name: "湖北" }, { name: "上海", value: 417652, value1: 220363, value2: 197289 }],
[{ name: "湖南" }, { name: "重庆", value: 237535, value1: 121332, value2: 116203 }],
[{ name: "广东" }, { name: "上海", value: 122677, value1: 67666, value2: 55011 }],
[{ name: "广西" }, { name: "广东", value: 84654, value1: 43041, value2: 41613 }],
[{ name: "海南" }, { name: "上海", value: 18140, value1: 9090, value2: 9050 }],
[{ name: "重庆" }, { name: "上海", value: 189139, value1: 101670, value2: 87469 }],
[{ name: "四川" }, { name: "新疆", value: 517464, value1: 276427, value2: 241037 }],
[{ name: "贵州" }, { name: "上海", value: 188738, value1: 104324, value2: 84414 }],
[{ name: "云南" }, { name: "上海", value: 139168, value1: 78497, value2: 60671 }],
[{ name: "西藏" }, { name: "云南", value: 2649, value1: 990, value2: 1659 }],
[{ name: "陕西" }, { name: "西藏", value: 185178, value1: 105779, value2: 79399 }],
[{ name: "甘肃" }, { name: "上海", value: 178139, value1: 99794, value2: 78345 }],
[{ name: "青海" }, { name: "甘肃", value: 12732, value1: 6473, value2: 6259 }],
[{ name: "宁夏" }, { name: "上海", value: 16861, value1: 9046, value2: 7815 }],
[{ name: "新疆" }, { name: "上海", value: 44205, value1: 19434, value2: 24771 }],
[{ name: "新疆" }, { name: "宁夏", value: 44205, value1: 19434, value2: 24771 }],
]
var planePath =
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
//var planePath = 'arrow';
var convertData = function (data) {
var fromCoord = geoCoordMap[data[0].name];
var toCoord = geoCoordMap[data[1].name];
return [
{
fromName: data[0].name,
toName: data[1].name,
coords: [fromCoord, toCoord],
value: data[1].value,
value1: data[1].value1,
value2: data[1].value2,
}
];
};
var series = [];
MapData.forEach(function (item, i) {
series.push(
{
name: item[0].name,
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: "red", //arrow箭头的颜色
symbolSize: 3
},
lineStyle: {
normal: {
color: "#fff",
width: 0,
curveness: 0.2
}
},
data: convertData(item)
},
{
name: item[0].name,
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: "#fff",
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item)
},
{
name: item[0].name,
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: 10,
itemStyle: {
normal: {
color: "#fff"
},
emphasis: {
areaColor: "#2B91B7"
}
},
data: [
{ name: item[0].name, value: geoCoordMap[item[0].name], code: item[1].value, code1: item[1].value1, code2: item[1].value2 }
]
}
);
});
var option = {
tooltip: {
trigger: "item",
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return params.data.name + "：" + params.data.code + '人' + '<br />' + '男：' + params.data.code1 + '<br />' + '女：' + params.data.code2;
} else if (params.seriesType == "lines") {
return (
params.data.fromName +
" > " +
params.data.toName +
"：" +
params.data.value + '人' + '<br />' + '男：' + params.data.value1 + '<br />' + '女：' + params.data.value2
);
} else {
return params.name;
}
}
},
geo: {
map: "china",
label: {
emphasis: {
show: true,
color: "#fff"
}
},
roam: false,
// 放大我们的地图
zoom: 1.1,
itemStyle: {
normal: {
areaColor: "rgba(43, 196, 243, 0.42)",
borderColor: "rgba(43, 196, 243, 1)",
borderWidth: 1
},
emphasis: {
areaColor: "#2B91B7"
}
}
},
series: series
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
})();
NCDindex.js
var symptomName = last_month_day();
$(function(){
init();
})
function init(){
//地图
var mapChart = echarts.init(document.getElementById('mapChart'));
mapChart.setOption({
bmap: {
center: [118.096435,24.485408],
zoom: 12,
roam: true,
},
tooltip : {
trigger: 'item',
formatter:function(params, ticket, callback){
return params.value[2]
}
},
series: [{
type: 'scatter',
coordinateSystem: 'bmap',
data: [
[118.096435, 24.485408, '信阳市'] ,
[118.094564, 24.457358, '信阳第一医院'] ,
[118.104103, 24.477761, '信阳中山医院'],
[118.14748, 24.506295, '信阳中医院'],
[118.254841, 24.665349, '信阳第五医院'],
]
}]
});
mapChart.on('click', function (params) {
console.log(params.value[2])
// $("#hospitalName").html(params.value[2]);
// if(params.value[2] == '信阳市'){
// $("#Data").html(100);
// $("#Outpatient").html(20000);
// $("#Hospitalization").html(3000);
// }
// if(params.value[2] == '信阳第一医院'){
// $("#Data").html(40);
// $("#Outpatient").html(8000);
// $("#Hospitalization").html(1200);
// }
// if(params.value[2] == '信阳中山医院'){
// $("#Data").html(30);
// $("#Outpatient").html(6000);
// $("#Hospitalization").html(900);
// }
// if(params.value[2] == '信阳中医院'){
// $("#Data").html(20);
// $("#Outpatient").html(4000);
// $("#Hospitalization").html(600);
// }
// if(params.value[2] == '信阳第五医院'){
// $("#Data").html(10);
// $("#Outpatient").html(2000);
// $("#Hospitalization").html(300);
// }
});
var bmap = mapChart.getModel().getComponent('bmap').getBMap()
bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]}));
bmap.setMapStyle({style:'midnight'})
var pieChart = echarts.init(document.getElementById('pieChart'));
pieChart.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6","#FD6C88"],
legend: {
y : '260',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['高血压','糖尿病','脑卒中','慢阻肺','慢性肾病'],
},
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}G ({d}%)"
},
calculable : false,
series : [
{
name:'采集数据量',
type:'pie',
radius : ['40%', '70%'],
center : ['50%', '45%'],
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '20',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'高血压'},
{value:310, name:'糖尿病'},
{value:234, name:'脑卒中'},
{value:135, name:'慢阻肺'},
{value:235, name:'慢性肾病'}
]
}
]
});
var lineChart = echarts.init(document.getElementById('lineChart'));
lineChart.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '260',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
},
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}条"
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "k条"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : ['8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00'],
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'信阳第一医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[15, 0, 20, 45, 22.1, 25, 70, 55, 76]
},
{
name:'信阳中山医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[25, 10, 30, 55, 32.1, 35, 80, 65, 76]
},
{
name:'信阳中医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[35, 20, 40, 65, 42.1, 45, 90, 75, 96]
},
{
name:'信阳第五医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[45, 30, 50, 75, 52.1, 55, 100, 85, 106]
}
]
});
var histogramChart = echarts.init(document.getElementById('histogramChart'));
histogramChart.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '250',
x : 'center',
data:['信阳第一医院', '信阳中山医院','信阳中医院','信阳第五医院'],
textStyle : {
color : '#ffffff',
}
},
calculable :false,
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
xAxis : [
{
type : 'value',
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
splitLine:{
lineStyle:{
color:['#f2f2f2'],
width:0,
type:'solid'
}
}
}
],
yAxis : [
{
type : 'category',
data:['门诊人数(人)', '住院人次(人)','人均费用(元)'],
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
series : [
{
name:'信阳第一医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[320, 302, 301]
},
{
name:'信阳中山医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[120, 132, 101]
},
{
name:'信阳中医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[220, 182, 191]
},
{
name:'信阳第五医院',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[150, 212, 201]
}
]
});
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
lineChart2.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
legend: {
y : '260',
x : 'center',
textStyle : {
color : '#ffffff',
},
data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
},
calculable : false,
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}条"
},
yAxis: [
{
type: 'value',
axisLine : {onZero: false},
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "条"
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
}
}
],
xAxis: [
{
type: 'category',
data : ['8:00','10:00','12:00','14:00','16:00','18:00'],
axisLine:{
lineStyle:{
color: '#034c6a'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
splitLine:{
lineStyle:{
width:0,
type:'solid'
}
},
}
],
grid:{
left: '5%',
right: '5%',
bottom: '20%',
containLabel: true
},
series : [
{
name:'信阳第一医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[15, 0, 20, 45, 22.1, 25,].reverse()
},
{
name:'信阳中山医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[25, 10, 30, 55, 32.1, 35, ].reverse()
},
{
name:'信阳中医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[35, 20, 40, 65, 42.1, 45, ].reverse()
},
{
name:'信阳第五医院',
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:[45, 30, 50, 75, 52.1, 55, 6].reverse()
}
]
});
}
quota.js
$(function(){
init();
})
function init(){
var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
//各医院门诊人次
var histogramChart1 = echarts.init(document.getElementById('histogramChart1'));
histogramChart1.setOption({
grid: {
top: '20%',
left: '32%'
},
xAxis: {
show: false
},
yAxis: [{
show: true,
data: ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#fff',
formatter: (value, index) => {
return [
`{lg|${index+1}} ` + '{title|' + value + '} '
].join('\n')
},
rich: {
lg: {
backgroundColor: '#339911',
color: '#fff',
borderRadius: 15,
// padding: 5,
align: 'center',
width: 15,
height: 15
},
}
},
}, {
show: true,
inverse: true,
data: [4000, 3000, 2000, 1000],
axisLabel: {
textStyle: {
fontSize: 12,
color: '#fff',
},
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}],
series: [{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: [40, 30, 20, 10],
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 20,
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}%'
}
},
}, {
name: '框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [100, 100, 100, 100],
barWidth: 15,
itemStyle: {
normal: {
color: 'none',
borderColor: '#00c1de',
borderWidth: 3,
barBorderRadius: 15,
}
}
}, ]
})
//各医院住院人次
var histogramChart2 = echarts.init(document.getElementById('histogramChart2'));
histogramChart2.setOption({
grid: {
top: '20%',
left: '32%'
},
xAxis: {
show: false
},
yAxis: [{
show: true,
data: ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#fff',
formatter: (value, index) => {
return [
`{lg|${index+1}} ` + '{title|' + value + '} '
].join('\n')
},
rich: {
lg: {
backgroundColor: '#339911',
color: '#fff',
borderRadius: 15,
// padding: 5,
align: 'center',
width: 15,
height: 15
},
}
},
}, {
show: true,
inverse: true,
data: [2200, 2400, 2600, 2800],
axisLabel: {
textStyle: {
fontSize: 12,
color: '#fff',
},
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}],
series: [{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: [22, 24, 26, 28],
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 20,
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}%'
}
},
}, {
name: '框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [100, 100, 100, 100],
barWidth: 15,
itemStyle: {
normal: {
color: 'none',
borderColor: '#00c1de',
borderWidth: 3,
barBorderRadius: 15,
}
}
}, ]
})
//手术工作量
var pieChart1 = echarts.init(document.getElementById('pieChart1'));
pieChart1.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}台"
},
calculable : true,
series : [
{
name:'手术工作量',
type:'pie',
radius : [30, 110],
center : ['50%', '50%'],
roseType : 'area',
x: '50%',
max: 40,
sort : 'ascending',
data:[
{value:10, name:'信阳第一医院'},
{value:5, name:'信阳中山医院'},
{value:15, name:'信阳中医院'},
{value:25, name:'信阳第五医院'},
]
}
]
})
//医疗费用
var lineChart1 = echarts.init(document.getElementById('lineChart1'));
lineChart1.setOption( {
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}元"
},
legend: {
data:['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
y: 'bottom',
x:'center',
textStyle:{
color:'#fff',
fontSize:12
}
},
grid:{
left: '5%',
right: '5%',
bottom: '10%',
containLabel: true
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日'],
axisLine:{
lineStyle:{
color: '#87cefa'
},
},
axisLabel : {
interval:0,
rotate:40,
textStyle: {
color: '#fff',
fontSize:13
}
}
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle:{
color: '#87cefa'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "元"
},
},
}
],
series : [
{
name:'信阳第一医院',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[10, 12, 21, 54, 260, 830, 710]
},
{
name:'信阳中山医院',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[30, 182, 434, 791, 390, 30, 10]
},
{
name:'信阳中医院',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[1320, 1132, 601, 234, 120, 90, 20]
},
{
name:'信阳第五医院',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[320, 132, 61, 34, 20, 9, 2]
}
]
})
//体检人次
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
lineChart2.setOption( {
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
legend: {
data:['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
y: 'bottom',
x:'center',
textStyle:{
color:'#fff',
fontSize:12
}
},
grid:{
left: '5%',
right: '5%',
bottom: '10%',
containLabel: true
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日'],
axisLine:{
lineStyle:{
color: '#87cefa'
},
},
axisLabel : {
interval:0,
rotate:40,
textStyle: {
color: '#fff',
fontSize:13
}
}
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle:{
color: '#87cefa'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "人"
},
},
}
],
series : [
{
name:'信阳第一医院',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[120, 122, 221, 524, 460, 530, 610]
},
{
name:'信阳中山医院',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[130, 682, 534, 691, 490, 130, 110]
},
{
name:'信阳中医院',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[320, 132, 161, 134, 112, 190, 120]
},
{
name:'信阳第五医院',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[320, 132, 461, 34, 202, 93, 222]
}
]
})
//床位数量分布
var pieChart2 = echarts.init(document.getElementById('pieChart2'));
pieChart2.setOption({
color:["#87cefa","#ff7f50","#32cd32","#da70d6",],
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}床"
},
calculable : true,
series : [
{
name:'床位数量分布',
type:'pie',
radius : [30, 110],
center : ['45%', '50%'],
roseType : 'area',
x: '50%',
max: 40,
sort : 'ascending',
data:[
{value:700, name:'信阳第一医院'},
{value:500, name:'信阳中山医院'},
{value:105, name:'信阳中医院'},
{value:250, name:'信阳第五医院'},
]
}
]
})
//药占比
var histogramChart3 = echarts.init(document.getElementById('histogramChart3'));
histogramChart3.setOption( {
color:['#87cefa'],
grid:{
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true
},
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}%"
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
axisLine:{
lineStyle:{
color: '#87cefa'
},
},
axisLabel : {
interval:0,
rotate:40,
textStyle: {
color: '#fff',
fontSize:13
}
}
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle:{
color: '#87cefa'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "%"
},
},
}
],
series : [
{
name:'药占比',
type:'bar',
barWidth:30,
data:[60,80,70,50],
},
]
});
//平均住院天数
var histogramChart4 = echarts.init(document.getElementById('histogramChart4'));
histogramChart4.setOption( {
color:['#87cefa'],
grid:{
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true
},
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}天"
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['信阳第一医院','信阳中山医院','信阳中医院','信阳第五医院',],
axisLine:{
lineStyle:{
color: '#87cefa'
},
},
axisLabel : {
interval:0,
rotate:40,
textStyle: {
color: '#fff',
fontSize:13
}
}
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle:{
color: '#87cefa'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + "天"
},
},
}
],
series : [
{
name:'平均住院天数',
type:'bar',
barWidth:30,
data:[6,8,7,5],
},
]
});
}
scripts.js
document.addEventListener('DOMContentLoaded', function() {
// 获取 Flash 消息的容器
var flashMessages = document.getElementById('flash-messages');
// 检查 Flash 消息是否存在
if (flashMessages) {
// 设置一个 3 秒后执行的定时器
setTimeout(function() {
// 隐藏 Flash 消息
flashMessages.style.display = 'none';
}, 3000); // 3000 毫秒 = 3 秒
}
});trend.js
var symptomName = last_year_month();
$(function(){
init();
})
function init(){
var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
//主要传染病
var histogramChart1 = echarts.init(document.getElementById('histogramChart1'));
histogramChart1.setOption({
color:['#5bc0de'],
grid:{
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true
},
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['感染性腹泻','流行性感冒','登革热','手足口病','水痘','流行性眼腺炎','猩红热','甲型病毒性肝炎','疟疾'],
axisLine:{
lineStyle:{
color: '#5bc0de'
},
},
axisLabel : {
interval:0,
rotate:40,
textStyle: {
color: '#fff'
}
}
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle:{
color: '#5bc0de'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
}
],
series : [
{
name:'主要传染病',
type:'bar',
barWidth : 20,
data:[2210,1085,926,669,634,452,412,312,156],
},
]
})
//主要症状
var histogramChart2 = echarts.init(document.getElementById('histogramChart2'));
histogramChart2.setOption({
color:['#FD6C88'],
grid:{
left: '5%',
right: '5%',
bottom: '10%',
containLabel: true
},
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
calculable : true,
yAxis : [
{
type : 'category',
data : ['腹痛、腹胀、腹泻','恶心、呕吐、食欲不振','肌肉酸痛、乏力','持续高烧','头痛、眼眶痛、肌肉疼','皮疹、水泡','呼吸浅促','发热、咳嗽、流口水'],
axisLine:{
lineStyle:{
color: '#FD6C88'
},
},
axisLabel : {
textStyle: {
color: '#fff'
}
}
}
],
xAxis : [
{
type : 'value',
axisLine:{
lineStyle:{
color: '#FD6C88'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
}
],
series : [
{
name:'主要症状',
type:'bar',
barWidth : 20,
data:[1750,1416,1136,819,704,413,251,175],
},
]
})
//传染病发病趋势
var lineChart1 = echarts.init(document.getElementById('lineChart1'));
lineChart1.setOption({
title: {
text: '传染病趋势',
textStyle:{
fontSize:16,
color:'#ff7f50'
},
},
color:["#ff7f50"],
grid:{
left: '15%',
right: '5%',
bottom: '15%',
},
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
calculable : true,
yAxis: [
{
type: 'value',
axisLine:{
lineStyle:{
color: '#ff7f50'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
}
],
xAxis: [
{
type: 'category',
data : symptomName,
boundaryGap : false,
axisLine:{
lineStyle:{
color: '#ff7f50'
},
},
splitLine: {
"show": false
},
axisLabel: {
// interval:0,
// rotate:40,
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
}
],
series : [
{
name:'传染病人数',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90]
},
]
})
//主要疾病排行
var histogramChart3 = echarts.init(document.getElementById('histogramChart3'));
histogramChart3.setOption({
grid: {
top: '12%',
left: '30%'
},
xAxis: {
show: false
},
yAxis: [{
show: true,
data: ['抑郁症','高血压','痔疮','肺癌','子宫肌瘤 ','乙肝','水痘','肺结核'],
inverse: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#fff',
formatter: (value, index) => {
return [
`{lg|${index+1}} ` + '{title|' + value + '} '
].join('\n')
},
rich: {
lg: {
backgroundColor: '#339911',
color: '#fff',
borderRadius: 15,
// padding: 5,
align: 'center',
width: 15,
height: 15
},
}
},
}, {
show: true,
inverse: true,
data: [2000, 1800, 1200, 1100,900,900,800,700],
axisLabel: {
textStyle: {
fontSize: 12,
color: '#fff',
},
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
}],
series: [{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: [20,18,12,11,9,9,8,7],
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 20,
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}%'
}
},
}, {
name: '框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [100, 100, 100, 100,100, 100, 100, 100],
barWidth: 15,
itemStyle: {
normal: {
color: 'none',
borderColor: '#00c1de',
borderWidth: 1,
barBorderRadius: 15,
}
}
}, ]
})
//疾病发病趋势
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
lineChart2.setOption({
title: {
text: '疾病发病趋势',
textStyle:{
fontSize:16,
color:'#32cd32'
},
x:"center"
},
color:["#32cd32"],
grid:{
left: '15%',
right: '5%',
bottom: '25%',
},
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
calculable : true,
yAxis: [
{
type: 'value',
axisLine:{
lineStyle:{
color: '#32cd32'
},
},
splitLine: {
"show": false
},
axisLabel: {
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
}
],
xAxis: [
{
type: 'category',
data : symptomName,
boundaryGap : false,
axisLine:{
lineStyle:{
color: '#32cd32'
},
},
splitLine: {
"show": false
},
axisLabel: {
// interval:0,
// rotate:40,
textStyle: {
color: '#fff'
},
formatter: function (value) {
return value + ""
},
},
}
],
series : [
{
name:'疾病发病人数',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[520, 232,701, 434, 190, 230, 210,120, 132, 101, 134, 890]
},
]
})
//年龄分布
var pieChart1 = echarts.init(document.getElementById('pieChart1'));
pieChart1.setOption({
color:["#32cd32","#ff7f50","#87cefa","#FD6C88","#4b5cc4","#faff72"],
tooltip : {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}人"
},
calculable : true,
series : [
{
name:'发病人数',
type:'pie',
radius : [30, 110],
center : ['50%', '50%'],
roseType : 'area',
x: '50%',
sort : 'ascending',
data:[
{value:10, name:'婴儿(1-3岁)'},
{value:5, name:'少儿(4-10岁)'},
{value:15, name:'少年(10-18岁)'},
{value:25, name:'青年(18-45岁)'},
{value:125, name:'中年(45-60岁)'},
{value:175, name:'老年(60岁以上)'},
]
}
]
})
//性别分布
var labelFromatter = {
normal : {
label : {
position : 'center',
formatter : function (params){
console.log(params)
if(params.name == "女性"){
return "女性"+":"+(params.percent + '%')
}else{
return "男性"+":"+(params.percent + '%')
}
},
},
labelLine : {
show : false
}
},
};
var pieChart2 = echarts.init(document.getElementById('pieChart2'));
pieChart2.setOption({
color: ['#87cefa','#FD6C88'],
tooltip : {
trigger: 'item',
formatter: "{b}({c})<br/>{d}%"
},
series : [
{
type : 'pie',
center : ['50%', '50%'],
radius : [55, 95],
x: '0%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'男性', value:158},
{name:'女性', value:142},
]
},
],
})
}
效果展示
注册信息会生成到对应的数据库中
完整代码连接
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