关于flask入门教程-ajax+echarts实现大屏展示

陆陆续续写了一个系列的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代码都写在一起了。

<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官网

//饼状图
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);
}

最后，谢谢关注，谢谢支持！

关于flask入门教程-ajax+echarts实现大屏展示相关推荐

关于flask入门教程-ajax+echarts实现地图GDP展示
地图可视化就是将地理数据转换成可视化形态,通过将具有地域特征的数据或者数据分析结果形象地表现在地图上,使得用户可以更加容易理解数据规律和趋势.通俗地讲,地图可视化可以将地理数据更清晰直白地展现出来. ...
关于flask入门教程-ajax+echarts简单实现一
ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. 本文通过echarts官网上的一个标准样例开始flask+ajax+echart ...
关于flask入门教程-ajax+echarts实现关系图
关系图,从字面上可以看出,为关系的图形,既然为关系,那么就需要有点以及关系,用来表示点与点之间的联系.所以我们可以得出:关系图需要两个必要的元素,节点,关系,其中关系需要包含有联系的节点以及节点联系说 ...
关于flask入门教程-ajax+echarts实现矩形树图
矩形树图将层次结构的数据显示为一组嵌套矩形.树的每个分支都有一个矩形,然后用代表子分支的较小矩形平铺. 叶子节点的矩形面积与数据占比成比例.通常,叶节点会用不同的颜色来显示数据的关联维度. 矩形图要比 ...
关于flask入门教程-ajax+echarts实现热力图
热力图 (Heatmap) 通过色彩变化来显示数据,热力图适合用来交叉检查多变量的数据.显示是否有彼此相似的变量:以及检测彼此之间是否存在任何相关性.也可以展现随着时间的变化指标的发展. 热力图依赖颜 ...
关于flask入门教程-ajax+echarts实现地图热力图
热力图是通过密度函数进行可视化用于表示地图中点的密度的热图.它使人们能够独立于缩放因子感知点的密度. 以上是传统的热力图定义,现今热力图在网页分析.业务数据分析等其他领域也有较为广泛的应用. 1.热力 ...
关于flask入门教程-ajax+百度地图实现热力图
热力图是通过密度函数进行可视化用于表示地图中点的密度的热图.它使人们能够独立于缩放因子感知点的密度. 前文也讲了关于max.pointsize.blursize这几个值一直也没找到最合适的处理办法.所 ...
前端使用echarts实现数据可视化大屏展示
1.vue中如何使用echarts完成大屏展示:移步到这里 2.原生js项目中如何使用echarts完成大屏展示:移步到这里
基于 Echarts 实现可视化数据大屏展示(150套)
基于 Echarts 实现可视化数据大屏展示(150套) 基于 Echarts 实现可视化数据大屏响应式展示效果的源码, 代码质量高,可以在此基础上重新开发. 作品介绍 1.网页作品简介方面 :本项目 ...

关于flask入门教程-ajax+echarts实现大屏展示

关于flask入门教程-ajax+echarts实现大屏展示相关推荐

最新文章

热门文章