【4】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 厦门市某医院
最新推荐文章于 2023-06-23 01:07:27 发布
73 篇文章
227 订阅
目录
《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) {
// 1
var chartMapElement = document.getElementById(chartMapElementId);
console.log(chartMapElementId, "async_data")
var myChart = echarts.init(chartMapElement);
console.log(data)
myChart.setOption({
series: [{
data: data
}]
});
// 2
var 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]
}]
})
//3
var 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]
})
// 4
var 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, ThreadingHTTPServer
ip = "localhost" # 监听IP，配置项
port = 8811 # 监听端口，配置项
index_url = "http://%s:%d/views/index.html" %(ip, port) # 监听主页url，配置项
# C:\Users\zll\AppData\Local\python 缓存目录，shit
class 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
10-16
714
714
数据可视化领域新星创作者
到【灌水乐园】发言
