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

【17】数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - 行业搜索指数排行榜_python可视化驾驶舱

作者：Monodyee | 2024-04-10 16:18:00

赞

踩

python可视化驾驶舱

目录

❤️效果展示❤️

1、首先看动态效果图 

2、丰富的主题样式

一、 确定需求方案

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

2、功能模块

3、部署方式 

二、整体架构设计

三、爬虫采集关键编码实现

1、确定爬虫目标

2、确认每个模块的url请求及参数

 3、编写爬虫采集数据

四、数据可视化关键编码实现 

1、前端html代码 

2、前端JS代码

3、后端python服务器代码

五、上线运行

六、源码下载

七、精彩案例汇总

写在前面，最近收到了很多小伙伴们的建议，大屏得展示数据如果采用真实数据分析计算，那就更加贴近小伙伴们的实际工作场景，可以很快在工作中应用，所以应小伙伴需求，就诞生了这篇数据可视化+爬虫。

近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【 行业搜索指数排行榜- 数据可视化大屏解决方案】。

之前小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了《Echart-0基础入门》系列课程（共14节课） ，希望小伙伴们多多支持。

❤️效果展示❤️

1、首先看动态效果图 

2、丰富的主题样式

  

一、 确定需求方案

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

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

2、功能模块

  • 汽车行业排行榜单

  • 手机行业排行榜单

  • 化妆品行业排行榜单

  • 旅游景点行业排行

  • 高校行业排行

  • 房产行业排行

3、部署方式 

  • 基于免安装可执行程序：支持Windows、Linux、Mac等各种主流操作系统；将可执行程序exe复制到服务器上即可，无需其它环境依赖；
  • 观看方式：既可在服务器上直接观看程序界面，也可远程使用浏览器打开播放，支持Chrome浏览器、360浏览器等主流浏览器。

二、整体架构设计

  1. 前端基于Echarts开源库设计，使用WebStorm编辑器；
  2. 后端基于Python Web实现，使用Pycharm编辑器；
  3. 数据传输格式：JSON；
  4. 数据源类型：本案例采用python request 采集实时数据方式。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
  5. 数据更新方式：本案例为了展示数据，采用定时拉取方式。实际开发需求中，采用后端数据实时更新，实时推送到前端展示；

三、爬虫采集关键编码实现

1、确定爬虫目标

本次采集目标为百度行业排行。打开网址 百度指数 页面如图所示：

2、确认每个模块的url请求及参数

F12打开浏览器调试，定位url

接下来确认请求参数： 

 3、编写爬虫采集数据

  1.  
  2. def scrapy(url, cookie):
  3.     headers = {
  4.         "Content-Type": 'application/json;charset=utf-8',
  5.         "cookie": cookie,
  6.         "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36"
  7.     }
  8.     result_obj = {}
  9.     try:
  10.         response = requests.get(url=url, headers=headers, verify=False)
  11.         result_obj = json.loads(response.text)
  12.     except Exception as e:
  13.         print(e)
  14.  
  15.     if 0 == result_obj['status']:
  16.         return result_obj["data"]["results"]["current"]
  17.     else:
  18.         result_obj['status'] = 'error'
  19.         return result_obj

 这里需要cookie，只是一次性测试那么简单的操作从浏览器中取出来。如果是规模性的功能开发，那么要采取自动登录，自动获取cookie的方式。本篇采用第一种方式测试。

由于这里的网址是https，是不安全的链接访问，所以request.get的verify参数需要设置为False，否则请求失败。

至此，爬虫部分基本完成。

四、数据可视化关键编码实现 

1、前端html代码 

  1.    
  2. <body style="background-color:#000">
  3.     <div class="container_fluid">
  4.         <div class="row_fluid" id="vue_app">
  5.             <div class="col-xs-12 col-md-12" style="padding:0 0;">
  6.                 <h3 style="color:hsl(200, 86%, 48%); text-align: center" id="container_0">
  7.                     <strong></strong>
  8.                 </h3>
  9.                 <dv-decoration-5 style="width:100%;height:4%;color:hsl(200, 86%, 48%);">
  10.                 </dv-decoration-5>
  11.             </div>
  12.  
  13.             <div class="col-xs-12 col-md-2" style="padding:0 0;">
  14.  
  15.                 <div style="height:15%; padding:0%;">
  16.                     <dv-border-box-7>
  17.                         <p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
  18.                             汽车行业最高指数
  19.                             <img src="myimg/1.png" style="height: 25%; ">
  20.                         </p>
  21.  
  22.                         <p id="container_1_6"
  23.                             style='padding:0%; color:rgba(255, 255, 255, 0.9); font-size: 28; font-weight: bolder; text-align: center;'>
  24.                             112222</p>
  25.                     </dv-border-box-7>
  26.                 </div>
  27.             </div>
  28.  
  29.             <div class="col-xs-12 col-md-2" style="padding:0 0;">
  30.  
  31.                 <div style="height:15%; padding:1%;">
  32.                     <dv-border-box-7>
  33.                         <p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
  34.                             化妆品行业最高指数
  35.                             <img src="myimg/2.png" style="height: 25%; ">
  36.                         </p>
  37.                         <p id="container_1_7"
  38.                             style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
  39.                             112222</p>
  40.                     </dv-border-box-7>
  41.                 </div>
  42.             </div>
  43.  
  44.             <div class="col-xs-12 col-md-2" style="padding:0 0;">
  45.  
  46.                 <div style="height:15%; padding:1%;">
  47.                     <dv-border-box-7>
  48.                         <p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
  49.                             旅游行业最高指数
  50.                             <img src="myimg/3.png" style="height: 25%; ">
  51.                         </p>
  52.                         <p id="container_1_8"
  53.                             style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
  54.                             112222</p>
  55.  
  56.                     </dv-border-box-7>
  57.                 </div>
  58.             </div>
  59.  
  60.             <div class="col-xs-12 col-md-2" style="padding:0 0;">
  61.  
  62.                 <div style="height:15%; padding:1%;">
  63.                     <dv-border-box-7>
  64.                         <p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
  65.                             手机行业最高指数
  66.                             <img src="myimg/4.png" style="height: 25%; ">
  67.                         </p>
  68.                         <p id="container_1_9"
  69.                             style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
  70.                             112222</p>
  71.                     </dv-border-box-7>
  72.                 </div>
  73.             </div>
  74.  
  75.             
  76.             <div class="col-xs-12 col-md-2" style="padding:0 0;">
  77.  
  78.                 <div style="height:15%; padding:1%;">
  79.                     <dv-border-box-7>
  80.                         <p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
  81.                             高校行业最高指数
  82.                             <img src="myimg/4.png" style="height: 25%; ">
  83.                         </p>
  84.                         <p id="container_1_10"
  85.                             style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
  86.                             112222</p>
  87.                     </dv-border-box-7>
  88.                 </div>
  89.             </div>
  90.  
  91.             
  92.             <div class="col-xs-12 col-md-2" style="padding:0 0;">
  93.  
  94.                 <div style="height:15%; padding:1%;">
  95.                     <dv-border-box-7>
  96.                         <p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
  97.                             房产行业最高指数
  98.                             <img src="myimg/4.png" style="height: 25%; ">
  99.                         </p>
  100.                         <p id="container_1_11"
  101.                             style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
  102.                             112222</p>
  103.                     </dv-border-box-7>
  104.                 </div>
  105.             </div>
  106.  
  107.             <div class="col-xs-12 col-md-5" style="padding:0 0; height:75%;">
  108.                 <dv-border-box-1>
  109.                     <div style="padding:3%; height:100%;" id="container_5"></div>
  110.                 </dv-border-box-1>
  111.             </div>
  112.  
  113.             <div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
  114.                 <dv-border-box-1>
  115.                     <div style="padding:3%; height:100%" id="container_6">
  116.                     </div>
  117.                 </dv-border-box-1>
  118.             </div>
  119.  
  120.             <div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
  121.                 <dv-border-box-1>
  122.                     <div style="padding:3%; height:100%" id="container_7">
  123.                     </div>
  124.                 </dv-border-box-1>
  125.             </div>
  126.  
  127.             <div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
  128.                 <dv-border-box-1>
  129.                     <div style="padding:3%; height:100%" id="container_8">
  130.                     </div>
  131.                 </dv-border-box-1>
  132.             </div>
  133.  
  134.             <div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
  135.                 <dv-border-box-1>
  136.                     <div style="padding:3%; height:100%" id="container_9">
  137.  
  138.                     </div>
  139.                 </dv-border-box-1>
  140.             </div>
  141.  
  142.             <div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
  143.                 <dv-border-box-1>
  144.                     <div style="padding:3%; height:100%" id="container_10">
  145.  
  146.                     </div>
  147.                 </dv-border-box-1>
  148.             </div>
  149.  
  150.             <div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
  151.                 <dv-border-box-1>
  152.                     <div style="padding:3%; height:100%" id="container_11">
  153.  
  154.                     </div>
  155.                 </dv-border-box-1>
  156.             </div>
  157.  
  158.         </div>
  159.     </div>

2、前端JS代码

  1.     var idContainer_5 = "container_5";
  2. var chartDom = document.getElementById(idContainer_5);
  3. var myChart = echarts.init(chartDom, window.gTheme);
  4. var option;
  5.  
  6. option = {
  7.   title: {
  8.     text: "全行业排行榜单",
  9.     left: "left",
  10.     textStyle: {
  11.       color: "hsl(200, 86%, 48%)",
  12.       fontSize: "10",
  13.     },
  14.   },
  15.   tooltip: {
  16.     trigger: 'item',
  17.     formatter: '{a} <br/>{b} : {c} '
  18.   },
  19.   legend: {
  20.     top: "10%",
  21.     itemWidth: 20,
  22.     itemHeight: 10,
  23.     orient: 'vertical',
  24.     left: 'right',
  25.     textStyle: {
  26.       color: "rgba(255,255,255,.5)",
  27.       fontSize: "10",
  28.     },
  29.   },
  30.   series: [
  31.     {
  32.       name:'热点指数',
  33.       data: [],
  34.       type: 'wordCloud',
  35. 			// shape: 'circle', //circle cardioid diamond triangle-forward triangle
  36.       sizeRange: [20, 62], //word的字体大小区间，单位像素
  37.       // rotationRange: [-90, 90], //word的可旋转角度区间
  38.       showBackground: true,
  39.       backgroundStyle: {
  40.         color: "rgba(180, 180, 180, 0.1)",
  41.       },
  42.       label: { show: false }
  43.     },
  44.   ],
  45. };
  46.  
  47. option && myChart.setOption(option);
  48.  
  49. myChart.setOption(option);
  50. window.addEventListener("resize", function () {
  51.   myChart.resize();
  52. });
  53.  
  54. function asyncData_5() {
  55.   $.getJSON("json/5.json").done(function (data) {
  56.     console.log(data);
  57.     var myChart = echarts.init(document.getElementById(idContainer_5));
  58.     myChart.setOption({
  59.       series: [{data: data}],
  60.     });
  61.   });
  62. }
  63.  
  64. asyncData_5();

3、后端python服务器代码

  1.      
  2. class MyRequestHandler(SimpleHTTPRequestHandler):
  3.     protocol_version = "HTTP/1.0"
  4.     server_version = "PSHS/0.1"
  5.     sys_version = "Python/3.7.x"
  6.     target = "./"  # 监听目录，配置项
  7.  
  8.     def do_GET(self):
  9.         url = ""
  10.         data = []
  11.         randomDateType = ['&dateType=20210711~20210717', '&dateType=20210811~20210817', '&dateType=20210911~20210917', '&dateType=20211011~20211017']
  12.         dateType = randomDateType[random.randint(0,3)]
  13.         if self.path.find("/json/5.json") >= 0:
  14.             for k in baidu_data:
  15.                 data.extend(scrapyBaidu.filter_pie_data(baidu_data[k]))
  16.         // 其他链接同上       
  17.         else:
  18.             SimpleHTTPRequestHandler.do_GET(self);
  19.             return
  20.  
  21.         self.send_response(200)
  22.         self.send_header("Content-type", "json")
  23.         self.end_headers()
  24.         rspstr = json.dumps(data)
  25.         self.wfile.write(rspstr.encode("utf-8"))
  26.  
  27.     def do_POST(self):
  28.         data = self.rfile.read(int(self.headers["content-length"]))
  29.         data = json.loads(data)
  30.         self.send_response(200)
  31.         self.send_header("Content-type", "text/html")
  32.         self.end_headers()
  33.         rspstr = json.dumps(data, ensure_ascii=False)
  34.         self.wfile.write(rspstr.encode("utf-8"))
  35.  
  36. def HttpServer():
  37.     try:
  38.         server = HTTPServer((ip, port), MyRequestHandler)
  39.         listen = "http://%s:%d" %(ip, port)
  40.         print("服务器监听地址： ", listen)
  41.         server.serve_forever()
  42.     except ValueError as e:
  43.         print("Exception", e)
  44.         server.socket.close()
  45.  
  46. if __name__ == "__main__":
  47.     HttpServer()

五、上线运行

六、源码下载

17【源码】数据可视化：基于Echarts+Python实现的动态实时大屏范例（含爬虫代码）.zip-企业管理文档类资源-CSDN下载

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

七、精彩案例汇总

请抬起你可爱的小手戳戳戳：❤️数据可视化《精彩案例汇总》❤️_小魔怪的博客-CSDN博客

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

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号