精彩案例汇总

效果展示

1、首先看动态效果图

2、再看实时分片数据图

一、确定需求方案

1、确定产品上线部署的屏幕LED分辨率

2、功能模块

3、部署方式

二、整体架构设计

三、编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码

2、前端JS代码

3、后端python代码

四、上线运行

五、源码下载

精彩案例汇总

近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是【厦门市某医院大数据展示案例】。

之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echarts - 0基础入门课程》Echarts-0基础入门--其他视频教程-编程语言-CSDN程序员研修院，希望小伙伴们多多支持。

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

话不多说，开始分享干货，欢迎讨论！微信号： 6550523

效果展示

1、首先看动态效果图

2、再看实时分片数据图

一、确定需求方案

1、确定产品上线部署的屏幕LED分辨率

1280px*768px，F11全屏后占满整屏且无滚动条；其它分辨率屏幕均可自适应显示。

2、功能模块

总采集数据量
当月采集数据量
总门诊数
当月门诊数
总住院数
当月住院数
各医院采集数据量
各医院门诊住院费用
厦门市地图
数据采集条数(当日)
就诊人数(当日)

3、部署方式

基于免安装可执行程序：支持Windows、Linux、Mac等各种主流操作系统；将可执行程序exe复制到服务器上即可，无需其它环境依赖；

观看方式：既可在服务器上直接观看程序界面，也可远程使用浏览器打开播放，支持Chrome浏览器、360浏览器等主流浏览器。

二、整体架构设计

前端基于Echarts开源库设计，使用WebStorm编辑器；
后端基于Python Web实现，使用Pycharm编辑器；
数据传输格式：JSON；
数据源类型：目前已支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，还可以定制HTTP API接口方式或其它类型数据库。
数据更新方式：摒弃了前端页面定时拉取的方式（这种方式带来严重的资源浪费），采用后端数据实时更新，实时推送到前端展示；

三、编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

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=AgasQmKK2z6YZjy4w5dFPY93c6uPw7RI"></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 id="t0">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 id="t1">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 id="t2" 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 id="t3" 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 id="t4"  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 id="t5" 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>
<script>function async_data() {async_map_data();// async_chart_1();// async_chart_2();// async_chart_3();// async_chart_4();// async_chart_5();// async_chart_6();}async_data() ;
</script>
</body>
</html>

2、前端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: [118.104103,24.477761],zoom: 15,roam: true,},tooltip : {trigger: 'item',formatter:function(params, ticket, callback){console.log(params)return params.value[2] + ":<br>" + params.value[3]}},series: [{type: 'scatter',coordinateSystem: 'bmap',symbolSize: 20,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) {$("#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:'手术费用'},]}]})
}var chartMapElementId = 'mapChart';
// var chartMapElement = document.getElementById(chartMapElementId); 这种有问题，不显示图
//相对路径，页面的当前目录
// var jsonFileName = 'json/map.json';//绝对路径，根目录
var jsonFileName = '/json/map.json';
var jsonFileNamechart_1 = '/json/chart_1.json';
var jsonFileNamechart_2 = '/json/chart_2.json';function get_legend(data) {var listLegend = new Array();for (i=0; i<data.length; i++) {n = data[i]["name"];listLegend.push(n);}console.log("get_legend", listLegend);return listLegend
}function get_value(data) {var listLegend = new Array();var listValue = new Array();for (i=0; i<data.length; i++) {n = data[i][2];v = data[i][3];tmp = {"name": n, "value": v};listLegend.push(n);listValue.push(tmp);}console.log("get_value", listLegend, listValue);return [listLegend, listValue]
}function get_value2(data) {var listLegend = new Array();var listValue = new Array();for (i=0; i<data.length; i++) {n = data[i][2];v = [data[i][3], data[i][4], data[i][5]];tmp = {"name": n, "data": v};listLegend.push(n);listValue.push(tmp);}console.log("get_value2", listLegend, listValue);return [listLegend, listValue]
}function get_value3(data) {var listLegend = new Array();var listValue = new Array();for (i=0; i<data.length; i++) {n = data[i][2];v = [data[i][3], data[i][4], data[i][5], data[i][3], data[i][4], data[i][5], data[i][3], data[i][4], data[i][5]];tmp = {"name": n, "data": v};listLegend.push(n);listValue.push(tmp);}console.log("get_value3", listLegend, listValue);return [listLegend, listValue]
}function async_map_data() {// 异步加载数据$.getJSON(jsonFileName).done(function (data) {// 1var chartMapElement = document.getElementById(chartMapElementId);console.log(chartMapElementId, "async_data")var myChart = echarts.init(chartMapElement);console.log(data)myChart.setOption({series: [{data: data}]});// 2var pieChart1Element = document.getElementById("pieChart1");var pieChart1 = echarts.init(pieChart1Element);rs = get_value(data);console.log(rs);pieChart1.setOption({legend: {data: rs[0]},series: [{data: rs[1]}]})//3var histogramChartElement = document.getElementById('histogramChart');var histogramChart = echarts.init(histogramChartElement);rs = get_value2(data);console.log(rs);histogramChart.setOption({legend: {data: rs[0]},series: rs[1]})// 4var lineChart = echarts.init(document.getElementById('lineChart'));rs = get_value3(data);lineChart.setOption({legend: {data: rs[0]},series: rs[1]})// end});//end $.getJSON// 异步加载数据$.getJSON(jsonFileNamechart_1).done(function (data) {console.log(data);var lineChart2 = echarts.init(document.getElementById('lineChart2'));lineChart2.setOption({legend: {data: get_legend(data)},series: data})});//end $.getJSON$.getJSON(jsonFileNamechart_2).done(function (data) {t0 = document.getElementById('t0');t0.innerText = data[0];t1 = document.getElementById('t1');t1.innerText = data[1];t2 = document.getElementById('t2');t2.innerText = data[2];t3 = document.getElementById('t3');t3.innerText = data[3];t4 = document.getElementById('t4');t4.innerText = data[4];t5 = document.getElementById('t5');t5.innerText = data[5];});//end $.getJSON}

3、后端python代码

# -*- coding:utf-8 -*-import io
import os
import shutil
import sys
import urllib
import json
from http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServerip = "localhost"   # 监听IP，配置项
port = 8811       # 监听端口，配置项
index_url = "http://%s:%d/views/index.html" %(ip, port)  # 监听主页url，配置项# C:\Users\zll\AppData\Local\python  缓存目录，shitclass MyRequestHandler(SimpleHTTPRequestHandler):protocol_version = "HTTP/1.0"server_version = "PSHS/0.1"sys_version = "Python/3.7.x"target = "./"  # 监听目录，配置项def do_GET(self):if self.path.find("/json/") > 0:print(self.path)req = {"success": "true"}self.send_response(200)self.send_header("Content-type", "json")self.end_headers()with open(self.path, 'r', encoding="utf-8") as f:data = json.load(f)rspstr = json.dumps(data)self.wfile.write(rspstr.encode("utf-8"))else:SimpleHTTPRequestHandler.do_GET(self);def do_POST(self):if self.path == "/signin":print("postmsg recv, path right")else:print("postmsg recv, path error")data = self.rfile.read(int(self.headers["content-length"]))data = json.loads(data)self.send_response(200)self.send_header("Content-type", "text/html")self.end_headers()rspstr = "recv ok, data = "rspstr += json.dumps(data, ensure_ascii=False)self.wfile.write(rspstr.encode("utf-8"))def del_dir(filepath):"""删除某一目录下的所有文件或文件夹:param filepath: 路径:return:"""del_list = os.listdir(filepath)for f in del_list:file_path = os.path.join(filepath, f)if os.path.isfile(file_path):os.remove(file_path)elif os.path.isdir(file_path):shutil.rmtree(file_path)def HttpServer():try:cache = "C:/Users/zll/AppData/Local/python/cache"del_dir(cache)server = HTTPServer((ip, port), MyRequestHandler)print("服务器监听地址： ", index_url)server.serve_forever()except KeyboardInterrupt:server.socket.close()

四、上线运行

五、源码下载

【源码】数据可视化：基于Echarts+Python实现的动态实时大屏范例4-医院大屏.zip_python做大屏数据可视化-管理软件文档类资源-CSDN下载

注：源码包括python的webserver + json数据源码 + echarts

启动命令：打开cmd命令行，切换到案例根目录，运行 python httpserver.py

感谢：本项目引用了互联网大牛的前端代码，然后定制开发实现了后端服务器，最终实现了可视化大屏的完整方案。

精彩案例汇总

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

本次分享结束，欢迎讨论！QQ微信同号： 6550523

【4】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 厦门市某医院相关推荐

【2】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 物流大数据
目录精彩案例汇总效果展示一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1 ...
【1】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 互联网企业数据
目录精彩案例汇总效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基 ...
【25】数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传
目录效果展示多主题样式一. 确定需求方案 1.确定产品上线部署的屏幕分辨率 2.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1.前端html代码 - ...
【19】数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - bilibili排行榜
目录 ❤️效果展示❤️ 1.首先看动态效果图 2.丰富的主题样式一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.部署方式二.整体架构设计三.爬虫采集关键编码实现 1.确定爬虫目标 ...
数据可视化UI设计素材资源文件psd大屏可视化数据展示Photoshop设计文件
大数据时代,基于大量数据进行有效的分析和挖掘,建立可视化大屏展示,提供震撼的效果让用户读懂数据,了解数据背后的价值.近几年该类应用场景越来越广泛,软件开发和设计中可视化展示放在越来越重要的位置,在此分 ...
数据可视化UI设计素材资源文件sketch大屏可视化数据展示
数据是企业的上帝之眼,数据可视化就发挥了很大的作用.很多从事B端产品设计的小伙伴在日常工作中遇到数据可视化的场景比较多,也得益于PSD素材较多,所以用的设计工具大多是Photoshop,但Photos ...
12【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 供应链
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...
2【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物流大数据
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前小伙伴们建议我出一些视频课程来学习Echarts,这样可以更快上 ...
27【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏范例 - 监控指挥中心
目录效果展示 1. 效果动图 2. 多种主题效果一. 确定需求方案 1. 屏幕分辨率 2. 部署方式二. 整体架构设计三. 编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1. 前端 ...

【4】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 厦门市某医院

精彩案例汇总

效果展示

1、首先看动态效果图

2、再看实时分片数据图

一、确定需求方案

1、确定产品上线部署的屏幕LED分辨率

2、功能模块

3、部署方式

二、整体架构设计

三、编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码

2、前端JS代码

3、后端python代码

四、上线运行

五、源码下载

精彩案例汇总

【4】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 厦门市某医院相关推荐

最新文章

热门文章

【4】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 厦门市某医院

精彩案例汇总

效果展示

1、首先看动态效果图

2、再看实时分片数据图

一、 确定需求方案

1、确定产品上线部署的屏幕LED分辨率

2、功能模块

3、部署方式

二、整体架构设计

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码

2、前端JS代码

3、后端python代码

四、上线运行

五、源码下载

精彩案例汇总

【4】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 厦门市某医院相关推荐

最新文章

热门文章

一、确定需求方案

三、编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）