陆陆续续写了一个系列的flask入门教程了，最后以一个半成品大屏做个了结，也算是一段时间的成果吧，毕竟不是专业码农，只是爱好而已，还有很多其他的事情等待探索。
大屏用到的技术主要包括标准的HTML、CSS、Javascript，再往细分包括了jquery、bootstrap、flex，ajax，echarts，加上之前的flask，json。至于大屏展示这块，本人实在谈不上什么审美可研，总之要有主次，表达要有体系，不能为了动画而动画，为了呈现而呈现。
下面是一系列关于flask入门教程的列表。
1 | 关于flask入门教程-ajax echarts实现关系图 |
|---|---|
2 | 关于flask入门教程-ajax 百度地图实现热力图 |
3 | 关于flask入门教程-ajax echarts实现地图热力图 |
4 | 关于flask入门教程-ajax echarts实现地图散点图 |
5 | 关于flask入门教程-ajax echarts实现地图GDP展示 |
6 | 关于flask入门教程-ajax echarts实现热力图 |
7 | 关于flask入门教程-ajax echarts实现矩形树图 |
8 | 关于flask入门教程-ajax echarts实现河流图 |
9 | 关于flask入门教程-ajax echarts实现数量未知的折线图 |
10 | 关于flask入门教程-ajax echarts简单实现一 |
11 | 关于flask入门教程-记录集转jsonify |
12 | 关于flask入门教程-bootstrap-fileinput实现文件上传 |
13 | 关于flask入门教程-前端代码 |
14 | 关于flask入门教程-app代码 |
15 | 关于flask入门教程-整体框架 |
16 | 关于flask入门教程-关于日期控件DateTimePicker |
17 | 关于flask入门教程-通过ajax删除数据 |
18 | 关于flask入门教程-自定义弹出框 |
19 | 关于flask入门教程-自定义弹出框 |
20 | 关于flask入门教程-分页的几种方式 |
21 | 关于flask入门教程-图书借阅系统-分页显示数据 |
22 | 关于flask入门教程-图书借阅系统-flask_SQLAlchemy高级用法 |
23 | 关于flask入门教程-图书借阅系统-原型设计 |
24 | 关于flask入门教程-图书借阅系统-数据库设计和ORM映射 |
25 | 关于flask入门教程-图书借阅系统-一 |
这是一个大屏的框架
为了便于调试，所有的css、javascript、html代码都写在一起了。
代码语言：javascript复制<html>
<head>
<meta chartset="utf-8">
<title>可视化echartcontainers图表</title>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script src="../static/js/jquery.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/echarts.min.js"></script>
<script src="static/js/bmap.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/china.js" type="text/javascript" charset="utf-8"></script>
<style>
.contains{height:100%;width:100%;background:url('static/images/bg.png');background-repeat:no-repeat;background-position:center;}
.header{height:80px;width:100%;background-size: cover;}
.header .title{display:flex;justify-content:center;color:#fff;font-weight:bold;font-size:2.8rem;align-items: center;height: 100%;}
.time{margin-right: 10px;font-size: 1.8rem;margin-top: -4rem;color: #fff;float: right;}
.time .label{font-weight:300}
.container{height:calc(100vh - 120px);width:100%;}
.toolbar{height:40px;width:100%;background-size: cover;background-position:center;bottom: 0;position: fixed;}
.toolbar .title{display:flex;justify-content:center;color:#fff;font-weight:bold;font-size:1.8rem;align-items: center;height: 100%;}
.item_left,.item_center,.item_right{height:100%; padding-right: 10px;padding-left: 10px;display: flex;}
.left,.middle,.right{display: flex;flex-direction: column;align-content: stretch;justify-content: stretch;width: 100%;}
.echartcontainer{flex:1;margin: 10px 0px;}
.infodiv{flex: 2;margin: 10px 0px;}
.mapdiv{flex:4;margin: 10px 0px;}
.item {margin-top: 0.85rem;}
.KPI {width: 100%;height: 100%;position: relative; margin: auto;}
.KPI ul{ margin-left:-.5rem;margin-right:-.5rem; padding: .16rem 0;}
.KPI li{ float: left; width: 33.33%; text-align: center; position: relative}
.KPI li:before{ position:relative; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
.KPI li:last-child:before{ width: 0;}
.KPI li h2{ font-size:2rem; color: #c5ccff;font-family:"SimHei";}
.KPI li span{ font-size:1.2rem; color: #fff; opacity: .5;font-family:"Microsoft YaHei";}
.border .chart_title{position:relative;height:35px;margin:5px 0;}
.border .chart_title span{color:#fff;font-size:18px;line-height:35px;}
.border .pie-chart{height:calc(100% - 50px);}
.border .radar-chart{height:calc(100% - 50px);}
.border .stack-chart{height:calc(100% - 50px);}
.border .histogram-chart{height:calc(100% - 50px);}
.border .rose-chart{height:calc(100% - 50px);}
.border .gdpmap{height:calc(100% - 35px);}
.border .board-chart{height:100%;}
.border{
border: 2px solid #02a6b5;
width: 100%;
height: 100%;
position: relative;
margin: auto;
}
.border:before{
content: '';
position: absolute;
width: 88%;
bottom: -2px;
top: -2px;
left: 6%;
border-bottom: 2px solid #0b3146;
border-top: 2px solid #0b3146;
}
.border:after{
content: '';
position: absolute;
height: 76%;
left: -2px;
right: -2px;
top: 12%;
border-left: 2px solid #0b3146;
border-right: 2px solid #0b3146;
}
</style>
</head>
<body class="contains">
<div class="header">
<div class = "title" >数据可视化大屏</div>
<div class = "time" >当前时间：<label>2020-05-27 08:36:58</label></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 item_left">
<div class="left">
<div class="echartcontainer">
<div class="border">
<div class="KPI">
<ul >
<li><h2>1824</h2><span>本月问题数量</span></li>
<li><h2>1920</h2><span>上月问题数量</span></li>
<li><h2>5%</h2><span>环比增长</span></li>
</ul>
<div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
<ul>
<li><h2>824</h2><span>本月治理数量</span></li>
<li><h2>710</h2><span>上月治理数量</span></li>
<li><h2>14%</h2><span>环比增长</span></li>
</ul>
</div>
</div>
</div>
<div class="echartcontainer" >
<div class="border">
<div class="chart_title">
<span>饼状图</span>
</div>
<div class="pie-chart" id="pie-chart"></div>
</div>
</div>
<div class="echartcontainer">
<div class="border">
<div class="chart_title">
<span>雷达图</span>
</div>
<div class="radar-chart" id="radar-chart"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 item_center">
<div class="middle">
<div class="infodiv">
<div class="border">
<div class="board-chart" id="board-chart"></div>
</div>
</div>
<div class="mapdiv">
<div class="border">
<div class="chart_title">
<span>地图热力图</span>
</div>
<div class="gdpmap" id="gdpmap"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 item_right">
<div class="right">
<div class="echartcontainer">
<div class="border">
<div class="chart_title">
<span>堆积图</span>
</div>
<div class="stack-chart" id="stack-chart"></div>
</div>
</div>
<div class="echartcontainer">
<div class="border">
<div class="chart_title">
<span>柱状图</span>
</div>
<div class="histogram-chart" id="histogram-chart"></div>
</div>
</div>
<div class="echartcontainer">
<div class="border">
<div class="chart_title">
<span>旭日图</span>
</div>
<div class="rose-chart" id="rose-chart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="toolbar">
<div class = "title" >数据可视化状态栏 ©1999-2022不胜人生一场醉</div>
</div>
<script type="text/javascript">
$(function(){
pieChar();
mapChar();
radarChar();
stackChar();
boardChar();
histogramChar();
roseChar();
});
window.onresize = function(){
pieChart.resize();
mapChart.resize();
radarChart.resize();
stackChart.resize();
boardChart.resize();
histogramChart.resize();
roseChart.resize();
}
//饼状图
var pieChart="";
function pieChar(){
pieChart= echarts.init(document.getElementById("pie-chart"));
option = {}
pieChart.setOption(option);
}
</script>
</body>
</html>下面是加了echarts之后 的效果图，只是为了效果而效果，满足自己的愿望而已。
下面是具体的两个echarts的js代码，来自echarts官网
代码语言：javascript复制//饼状图
var pieChart="";
function pieChar(){
pieChart= echarts.init(document.getElementById("pie-chart"));
option = {
color:["#4f8bf9","#fea31e","#959595"],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
grid: {
x:'10%',
y:'10%',
x2:'10%',
y2:'10%',
containLabel: true
},
series: [ {
name:'访问来源',
type:'pie',
selectedMode: 'single',
radius: [0, '60%'],
center:["50%","42%"],
label: {
normal: {
position: 'outside',
formatter: "{b}:{d}%"
}
},
data:[
{value:556, name:'正常'},
{value:100, name:'告警',selected:true},
{value:30, name:'离线'}
]
}]
};
pieChart.setOption(option);
}
var mapChart="";
function mapChar(){
mapChart = echarts.init(document.getElementById('gdpmap'));
option = {
title: {
text: '中国GDP地图',
subtext: 'data from china.js',
sublink: '测试',
left: 'center'
},
grid: {
x:'10%',
y:'10%',
x2:'10%',
y2:'10%',
containLabel: true
},
geo:{
map:'china'
},
tooltip : {
trigger: 'item'
},
};
// 使用刚指定的配置项和数据显示图表。
mapChart.setOption(option);
// 使用刚指定的配置项和数据显示图表。
mapChart.hideLoading();
result=[{'name': '北京', 'value': 14113.6}, {'name': '天津', 'value': 9224.46}, {'name': '河北', 'value': 20394.26}, {'name': '山西', 'value': 9200.86}, {'name': '内蒙古', 'value': 11672.0}, {'name': '辽宁', 'value': 18457.3}, {'name': '吉林', 'value': 8667.58}, {'name': '黑龙江', 'value': 10368.6}, {'name': '上海', 'value': 17165.98}, {'name': '江苏', 'value': 41425.48}, {'name': '浙江', 'value': 27722.31}, {'name': '安徽', 'value': 12359.33}, {'name': '福建', 'value': 14737.12}, {'name': '江西', 'value': 9451.26}, {'name': '山东', 'value': 39169.92}, {'name': '河南', 'value': 23092.36}, {'name': '湖北', 'value': 15967.61}, {'name': '湖南', 'value': 16037.96}, {'name': '广东', 'value': 46013.06}, {'name': '广西', 'value': 9569.8539}, {'name': '海南', 'value': 2064.5}, {'name': '重庆', 'value': 7925.58}, {'name': '四川', 'value': 17185.48}, {'name': '贵州', 'value': 4602.16}, {'name': '云南', 'value': 7224.18}, {'name': '西藏', 'value': 507.46}, {'name': '陕西', 'value': 10123.48}, {'name': '甘肃', 'value': 4120.75}, {'name': '青海', 'value': 1350.43}, {'name': '宁夏', 'value': 1689.65}, {'name': '新疆', 'value': 5437.47}];
option={
//backgroundColor: '#FFFFFF',
title: {
text: '地域分布',
top: 14,
left: 14,
textStyle: {
borderColor: '#333333',
fontWeight: 400,
fontFamily: 'PingFangSC-Regular, PingFang SC',
color: '#666666',
fontSize: 14
}
},
tooltip: {
trigger: 'item',
show: true,
formatter: function(params) {
//return params.data['region'] '：' params.data['GDP'] '%'
return params.name '：' params.data['value']
}
},
// 左侧小导航图标
visualMap: {
show: false,
x: 'left',
y: 'center',
min: 0,
max: 50000,
color: ['#3644BF', '#B7C8FF']
},
// 配置属性
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: false // 省份名称
},
emphasis: {
show: false
}
},
itemStyle: {
normal: { // 未选中状态
// areaColor: 'red', // 南沙诸岛背景颜色
borderColor: 'transparent',
label: {
show: true// 显示名称
}
},
emphasis: { // 也是选中样式
areaColor: '#49FFE9',
shadowColor: 'rgba(0,0,0,0.2)',
shadowOffsetX: 0, // 阴影水平方向上的偏移距离
shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
shadowBlur: 8, // 图形阴影的模糊大小。
label: {
show: true,
textStyle: {
color: '#fff'
}
}
}
},
data:result
}]
};
mapChart.setOption(option);
}
