基于Echarts实现可视化数据大屏医院大数据统计可视化页面HTML模板

news/2025/1/10 22:46:18/

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【1000套 毕设项目精品实战案例】

❤ 【 20套 VUE+Echarts 大数据可视化源码】

❤ 【150套 HTML+ Echarts大数据可视化源码 】

文章目录

  • 前言
  • 一、Echart是什么
  • 二、ECharts入门教程
  • 三、作品演示
  • 四、代码实现
    • 1.HTML
    • 2.CSS
    • 3.JavaScript
  • 五、更多干货

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

在这里插入图片描述

四、代码实现

1.HTML


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>数据可视化demo</title><link href="styles/common.css" rel="stylesheet"><script src="scripts/Plugin/jquery-3.3.1.min.js"></script><script src="scripts/Plugin/echarts.min.js"></script><script src="scripts/Plugin/bmap.min.js"></script><script src="http://api.map.baidu.com/api?v=2.0&ak=LelFSt6BfykGf8m3PB5zr8LaXAG2cMg6"></script><script src="scripts/common.js"></script><script src="scripts/index.js"></script><script src="scripts/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="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><li><i class="nav_4"></i><a href="chronic.html">慢病病人列表</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="images/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="images/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="images/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="images/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="images/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="images/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="images/title_1.png">各医院采集数据量</div><p id="pieChart1" class="p_chart"></p></div><div class="div_any_child"><div class="div_any_title"><img src="images/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="images/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="images/title_3.png">数据采集条数(当日)</div><p id="lineChart" class="p_chart"></p></div><div class="div_any_child"><div class="div_any_title"><img src="images/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="images/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="images/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="images/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="images/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="images/title_20.png">医疗费用组成</div><p id="pieChart3" class="p_chart"></p></div></div></div></div></div></div></div>
</body></html>

2.CSS


/*URL: */body::-webkit-scrollbar {display: none;
}.BMap_cpyCtrl {display: none;
}.anchorBL {display: none;
}.yui-toast-mask {position: fixed;width: 100%;height: 100%;background: rgba(0, 0, 0, 0);top: 0;left: 0;z-index: 1000;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;
}.yui-toast-mask .yui-toast {background: rgba(0, 0, 0, 0.5);min-height: 3rem;min-width: 3rem;border-radius: .5rem;margin: 0 auto;overflow: hidden;color: #FFFFFF;font-size: 14px;padding: 10px;max-height: 90%;max-width: 90%;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;
}* {margin: 0;padding: 0;list-style: none;text-decoration: none;
}

3.JavaScript

function callResourceAdapter(f, g, d, e, a) {if (d == null) {d = {}}if (f == null) {f = "POST"}function c(i) {var j = i;if (j.msgCode == "800") {if (e && typeof(e) == "function") {e(j.rows, j.map, j.vo, j.msg)}}if (j.msgCode == "801") {showToast(j.msg)}if (j.msgCode == "900") {var h = "系统错误，请联系管理员";if (j.msg) {h = j.msg}showToast(h);if (a && typeof(a) == "function") {a()}}}function b(h) {showToast("无法连接至服务器,请稍后再试");if (a && typeof(a) == "function") {a()}}

五、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥


http://www.ppmy.cn/news/666664.html

相关文章

有关在Vue中JS如何在H5移动端如何调起第三方地图软件(高德、腾讯、百度)

有关在Vue中JS如何在H5移动端如何调起第三方地图软件(高德、腾讯、百度)

一、 首先封装区分当前环境是ios端还是android端的方法 RunningPlatform() {let ua navigator.userAgent.toLowerCase()console.log(内核, ua);// iosif(ua.indexOf(like mac os x) > -1) {this.OS IOS}// androidif(ua.indexOf(android) > -1) {this.OS Android}cons…
阅读更多...
腾讯地图,百度地图兴趣点(POI)分类关键词表

腾讯地图,百度地图兴趣点(POI)分类关键词表

1.腾讯地图兴趣点(POI)分类关键词表 腾讯地图POI分类关键词表 序号一级名称二级分类三级分类完整名称1美食美食2中餐厅美食:中餐厅3北京菜美食:中餐厅:北京菜4安徽菜美食:中餐厅:安徽菜5山西菜美食:中餐厅:山西菜6福建菜美食:中餐厅:福建菜7河南菜美食:中餐厅:河南菜8鲁菜美食…
阅读更多...
【项目日志】仿去哪网移动端--部分实现细节及问题

【项目日志】仿去哪网移动端--部分实现细节及问题

目录 1.项目地址2.项目介绍3.部分功能实现细节&#xff08;推荐结合源码看&#xff09;3.1 city-alphabet--城市选择页字母表部分3.1.1 实现点击字母跳转到相应列表&#xff08;兄弟组件传值&#xff09;3.1.2 实现滑动列表可以对应显示相应字母3.1.3 可以优化的点 3.2 city-se…
阅读更多...
【项目志】基于vue2的仿去哪网移动端

【项目志】基于vue2的仿去哪网移动端

仿去哪网移动端 环境搭建和项目架构技术栈功能模块首页城市选择页景点详情 源代码地址 环境搭建和项目架构 vue-cli脚手架搭建 技术栈 vue2 vuex axios 插件&#xff1a;better-scroll、view-awasome-swiper 功能模块 首页 home-Header 头部搜索框HomeHeader----包含一…
阅读更多...
Poi读取大数据量Excel文件

Poi读取大数据量Excel文件

前言 最近生产环境有个老项目一直内存报警&#xff0c;不时的还出现内存泄漏&#xff0c;导致需要重启服务器&#xff0c;已经严重影响正常服务了。 分析 1.dump内存文件 liunx使用如下命令&#xff1a; ? 1 ./jmap -dump:formatb,fileheap.hprof pid 2.使用Eclipse M…
阅读更多...
移动BI的5大功能介绍为你展现移动端的数据可视化！

移动BI的5大功能介绍为你展现移动端的数据可视化！

吃早餐时&#xff0c;老板查看移动BI上的日报&#xff0c;昨日运营情况便一目了然&#xff1b; 机场候机室里&#xff0c;区域经理手机接收到销售异常预警&#xff0c;从而为快速组织应对争取了时间&#xff1b; 会议间隙&#xff0c;众人商讨制定下一周期计划&#xff0c;手…
阅读更多...
【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】

【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】

前言&#xff1a; 由于最近需要做移动端的项目 有个pc端的后台系统里面需要移一部分页面过来 而里面就有很多的表格&#xff0c;我就开始惯例网上先找前人栽的树&#xff0c;我好乘凉 然后找了一圈发现&#xff0c;不管是主流的移动端ui库或者网上自己写的帖子&#xff0c;或者…
阅读更多...
【Apache POI】Excel操作（四）：Excel大数据量的写入

【Apache POI】Excel操作（四）：Excel大数据量的写入

迷茫代表着你身边还有选择&#xff0c;焦虑意味着你手上还有时间。 有目录&#xff0c;不迷路 前言超量数据速率比较原因剖析超级版本大救星 往期回顾 前言 之前在下面这期Excel操作&#xff1a; 【Apache POI】Excel操作&#xff08;一&#xff09;&#xff1a;Excel本地写入…
阅读更多...
最新文章

Copyright @ 2022~2023