devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

解读GitHub上的一个使用flask+echarts数据大屏项目_flask echarts大屏

作者：你好赵伟 | 2024-04-17 19:03:07

赞

踩

flask echarts大屏

目录

1. 项目说明

2. 项目文件布局

3. 四大模块核心代码分析

3.1 数据准备模块

3.2 flask网页服务模块

3.3 网页视图模块

a. 网页大标题

b. 左右两栏的图表

c. 中间一栏的图表

d. 图表echarts属性设置

3.4 static静态元素分析

a. 显示时间的函数

b. 页面淡入和视图自适应的函数

4. 总结

1. 项目说明

由于最近《数据可视化》的期末作业（基于flask+echarts制作数据大屏）的到来，我目前还是毫无头绪，因此我在百度上查阅了很多资料，最终发现了一个符合心意的项目（由于已经下载到本机电脑，下载地址就不写上来了，主要懒得再去找项目地址了）。在网页上输入如下url地址就可以看到效果，如下图

经过自己的研究分析，发现网页最底下一层是一个蓝色的背景，带有一个跟随鼠标的粒子动态特效，接着在这个上面叠加了一个table。

table的布局如下所示，首先是一个标题，标题的右侧是天气和时间。接着是分为三列，左侧三列显示3个图表，中间一列显示两个类似数字时钟的数据和文字说明，右边一列显示3个图表。其中左下角的图表由3个小的图表组合而成。

2. 项目文件布局

项目主要由4个部分组成，data部分是数据准备，app部分是flask服务，templates部分控制网页的显示，这三者正好对应MVC的设计模式。最后的static里面主要保存一些网页元素，例如字体格式、图片等等，以及必要的一些js函数库。下面就这四个部分做一个简要的注释。

3. 四大模块核心代码分析

3.1 数据准备模块

这里有3个数据，以data_corp.py为例，文件中，定义了一个数据类，它的数据并没有从外部获取，而是定义了静态的数据，方便了其他人下载这个项目下来就可以直接运行，初始化的时候产生详细的数据，然后定了一个函数返回格式化的数据。

图表的数据用json格式保存，在返回给pyecharts的时候用get函数组装成数组的形式。

 

 

 

3.2 flask网页服务模块
 

准备好了数据之后，就可以把数据放到html中调用pyecharts进行渲染，这里使用flask服务，将URL根目录和index.html绑定。后续启动app后访问http://127.0.0.1:5000/corp即可查看。
 

 

3.3 网页视图模块
 

首先是jquery和css文件的加载，jquery是js的一个函数库，css决定了整个网页的字体字号颜色等风格。
 

然后是一个加载动画，这个加载动画使得网页加载具有淡入的效果，并且确保了网页在拉伸的时候能自适应调整布局，关于这个函数后面再详细解释。
 

最后是echarts的函数库和中国地图的函数库。
 

  1. <head>
  2.     <meta charset="utf-8">
  3.     <title>黄科钦的大屏幕</title>
  4.     <script type="text/javascript" src="../static/js/jquery.js"></script>
  5.     <link rel="stylesheet" href="../static/css/comon0.css">
  6. </head>
  7. <script type="text/javascript" src="../static/js/loading.js"></script>
  8. <script type="text/javascript" src="../static/js/echarts.min.js"></script>
  9. <script type="text/javascript" src="../static/js/china.js"></script>
 

接下来加载网页的背景，是一个有动态粒子的效果，粒子效果如图所示
 

  1. <!--这是一个动态的粒子效果图，设置了透明度为0.2-->
  2. <div class="canvas" style="opacity: 0.9">
  3.     <iframe frameborder="0" src="../static/js/index.html" style="width: 100%; height: 100%"></iframe>
  4. </div>
 

 

 

在正式页面加载进来之前，还有一个小的loading动画，配合一个gif文件和说明文字实现
 

 

  1. <!--这是一个在正式页面加载进来之前显示的加载小动画，文字可以修改-->
  2. <div class="loading">
  3.     <div class="loadbox"><img src="../static/picture/loading.gif"> 我正在加载中...</div>
  4. </div>
 

 

接下来就是整个网页的布局了，网页整体上是如下的一个table布局，首先是一个标题，标题的右侧是天气和时间。接着是分为三列，左侧三列显示3个图表，中间一列显示两个类似数字时钟的数据和文字说明，右边一列显示3个图表。其中左下角的图表由3个小的图表组合而成。
 

 

 

a. 网页大标题
 

网页大标题放在h1格式里面，然后是天气和时间显示。
 

天气直接加载一张图片完成，时间用一个js函数实现，每秒刷新。
 

  1. <div class="head">
  2.     <h1>{{title}}</h1>
  3.     <div class="weather">
  4.         <img src="../static/picture/weather.png"><span>我是天气</span>
  5.         <span id="showTime"></span>
  6.     </div>
  7.     <script type="text/javascript" src="../static/js/showtime.js"></script>
  8. </div>
 

效果如图。
 

 

 

b. 左右两栏的图表
 

左右两侧的布局相似，左侧的第3个图表较为特殊，是3个小的环状图的组合图表。
 

每一列用
 

  1. <li>
  2.     <div class="boxall" style="height: 3.2rem">
  3.         <div class="alltitle">{{form.echart1.title}}</div>
  4.         <div class="allnav" id="echart1"></div>
  5.         <div class="boxfoot"></div>
  6.     </div>
  7.     <div class="boxall" style="height: 3.2rem">
  8.         <div class="alltitle">{{form.echart2.title}}</div>
  9.         <div class="allnav" id="echart2"></div>
  10.         <div class="boxfoot"></div>
  11.     </div>
  12.     <div class="boxall" style="height: 3.2rem">
  13.         <div style="height:100%; width: 100%;">
  14.             <div class="sy" id="fb1"></div>
  15.             <div class="sy" id="fb2"></div>
  16.             <div class="sy" id="fb3"></div>
  17.         </div>
  18.         <div class="boxfoot">
  19.         </div>
  20.     </div>
  21. </li>
 

分割
 

 

c. 中间一栏的图表
 

中间一栏有3个部分组成，第一部分是显示数据，第二部分是显示文字，第三部分是显示一个地图。
 

 

地图包含4个图层，分别是用小地球本体，一个像魔方一样的网，一个光环，和一个中国地图。
 

  1. <li>
  2.     <div class="bar">
  3.         <div class="barbox">
  4.             <ul class="clearfix">
  5.                 <li class="pulll_left counter">{{form.counter.value}}</li>
  6.                 <li class="pulll_left counter">{{form.counter2.value}}</li>
  7.             </ul>
  8.         </div>
  9.         <div class="barbox2">
  10.             <ul class="clearfix">
  11.                 <li class="pulll_left">{{form.counter.name}}</li>
  12.                 <li class="pulll_left">{{form.counter2.name}}</li>
  13.             </ul>
  14.         </div>
  15.     </div>
  16.     <div class="map">
  17.         <div class="map1"><img src="../static/picture/lbx.png"></div>
  18.         <div class="map2"><img src="../static/picture/jt.png"></div>
  19.         <div class="map3"><img src="../static/picture/map.png"></div>
  20.         <div class="map4" id="map_1"></div>
  21.     </div>
  22. </li>
 

 

d. 图表echarts属性设置
 

为了便于理解，这里省略了很多格式，做成类pythonic的结构。
 

首先是设置option，包含背景颜色、图表大小间距、坐标轴、图表类型等等，然后用option参数来配置图表样式。
 

  1. <script>
  2. $(function echarts_1() {
  3.     // 基于准备好的dom，初始化echarts实例
  4.     var myChart = echarts.init(document.getElementById('echart1'));
  5.     option = {
  6.         backgroundColor: '#00265f',     	// 设置背景颜色这个背景颜色是不透明的
  7.         tooltip: 							// 设置鼠标悬浮图表
  8.             trigger: 'axis',
  9.             axisPointer: {type: 'shadow'}},
  10.         grid:       						// 设置图表显示范围
  11.             left: '0%',
  12.             top: '0%',
  13.             right: '0%',
  14.             bottom: '4%',
  15.             containLabel: true   // 表示坐标轴label标签也是grid图表的一部分
  16.         xAxis: 								// 对x轴系列选项进行设置
  17.             type: 'category',
  18.             data: {{form.echart1.xAxis|safe}},
  19.             axisLine: ...
  20.             axisTick: { show: false,},
  21.             axisLabel:  {
  22.                     interval: 0,
  23.                     rotate:50,		// 坐标轴文字旋转角度
  24.                     show: true,
  25.                     splitNumber: 15,
  26.                     textStyle: {
  27.                         color: "rgba(255,255,255,.6)",
  28.                         fontSize: '12',
  29.                     ...
  30.         yAxis: 								// 对y轴系列选项进行设置
  31.             ...
  32.         series: 							// 对具体的图表类型进行设置
  33.             	type: 'bar',
  34.             data: {{form.echart1.series|safe}},
  35.             barWidth:'35%', //柱子宽度
  36.             itemStyle: 
  37.                 normal: 
  38.                     color:'#2f89cf',
  39.                     opacity: 1,
  40.                     barBorderRadius: 5,
  41.         };
  42.  
  43.     // 使用刚指定的配置项和数据显示图表。
  44.     myChart.setOption(option);
  45.     window.addEventListener("resize",function(){myChart.resize()});
  46. </script>
 

  • 化 
    使用上述配置得到的图表如下，有背景颜色的区域就是grid区域
     
     
     
    3.4 static静态元素分析
     
    static中的大部分为静态元素，例如一些图片，字体，文字样式等等。
     
    这里的index.html和template下的index.html文件不一样，这里的文件其实是一个动态粒子的html页面，被当做半透明背景引入到正式的index文件中。这里的index.html可以单独打开，通过内嵌的js函数可以实现下图的这种效果。
     
  •  
     
       
    另外包含一些函数。其中有3个函数为外部应用函数，类似于python中import的类库，分别是echarts函数库，jquery函数库和中国地图china函数库。剩下的为自定义函数，一个是控制显示时间的函数，另一个是页面淡入显示和窗口自适应的函数。
     
    a. 显示时间的函数
     
    设定一个定时器，每1000ms获取一次时间，然后把时间格式化成年月日时分秒的格式。
     
    1. var t = null;
    2. t = setTimeout(time,1000);//開始运行，每1000ms运行一次time函数？
    3. function time()
    4. {
    5.     clearTimeout(t);//清除定时器
    6.     dt = new Date();
    7.     var y   = dt.getFullYear();
    8.     var mt  = dt.getMonth()+1;
    9.     var day = dt.getDate();
    10.     var h   = dt.getHours();//获取时
    11.     var m   = dt.getMinutes();//获取分
    12.     var s   = dt.getSeconds();//获取秒
    13.     document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"日"+"-"+h+"时"+m+"分"+s+"秒";
    14.     t = setTimeout(time,1000); //设定定时器，循环运行
    15. }
       
    b. 页面淡入和视图自适应的函数
     
    1. //如果把这段注释掉，会一直停留在加载的页面上
    2. $(window).load(function(){
    3.          $(".loading").fadeOut()
    4.         })
    5.  
    6. //这个是自适应调整窗口大小的函数，如果没有，整个页面布局会很混乱
    7. $(document).ready(
    8. function()
    9.     {
    10.         var whei=$(window).width()
    11.         $("html").css({fontSize:whei/20})
    12.         $(window).resize(
    13.             function()
    14.                 {
    15.                 var whei=$(window).width()
    16.                 $("html").css({fontSize:whei/20})
    17.                 }
    18.         );
    19.    }
    20. );
       
    4. 总结
     
    花了很长时间才看懂这个项目，一开始看的一头雾水，仔细分析一下，其实用的都是蛮简单的技术，主要用了这三个技术
     
 

  • 后端：flask
  • 可视化：echarts
  • 前端：HTML+JavaScript+css
 

在后续的数据大屏作业中，我将参考这个项目的代码进行，将整体的主题更改，图形更换，使用上MySQL数据库连接进行数据的获取，打造一个更完整的项目

                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/441783
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号