心得技巧
❤�，我一直都在~❤️数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - 行业搜索指数排行榜【17】
发布时间：2022-07-02 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了❤�，我一直都在~❤️数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - 行业搜索指数排行榜【17】，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
目录
❤️效果展示❤️
1、首先看动态效果图
2、丰富的主题样式
一、 确定需求方案
1、确定产品上线部署的屏幕LED分辨率
2、功能模块
3、部署方式
二、整体架构设计
三、爬虫采集关键编码实现
1、确定爬虫目标
2、确认每个模块的url请求及参数
3、编写爬虫采集数据
四、数据可视化关键编码实现
1、前端htML代码
2、前端JS代码
五、上线运行
六、源码下载
七、精彩案例汇总
写在前面，最近收到了很多小伙伴们的建议，大屏得展示数据如果采用真实数据分析计算，那就更加贴近小伙伴们的实际工作场景，可以很快在工作中应用，所以应小伙伴需求，就诞生了这篇数据可视化+爬虫。
近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【 行业搜索指数排行榜- 数据可视化大屏解决方案】。
❤️效果展示❤️
1、首先看动态效果图
2、丰富的主题样式
一、 确定需求方案
1、确定产品上线部署的屏幕LED分辨率
1280px*768px，F11全屏后占满整屏无滚动条；其它分辨率屏幕可自适应显示。
2、功能模块
3、部署方式
- 基于免安装可执行程序：支持Windows、Linux、Mac等各种主流操作系统；将可执行程序exe复制到服务器上即可，无需其它环境依赖；
二、整体架构设计
- 前端基于Echarts开源库设计，使用WebStorm编辑器；
- 后端基于Python Web实现，使用Pycharm编辑器；
- 数据传输格式：JSON；
- 数据源类型：本案例采用python request 采集实时数据方式。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、oracle、Microsoft SQL Server、SQLITe、Excel表格等。
- 数据更新方式：本案例为了展示数据，采用定时拉取方式。实际开发需求中，采用后端数据实时更新，实时推送到前端展示；
三、爬虫采集关键编码实现
1、确定爬虫目标
本次采集目标为百度行业排行。打开网址 百度指数 页面如图所示：
2、确认每个模块的url请求及参数
F12打开浏览器调试，定位url
接下来确认请求参数：
3、编写爬虫采集数据
def scrapy(url, cookie):
headers = {
"Content-tyPE": 'application/json;charset=utf-8',
"cookie": cookie,
"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"
}
result_obj = {}
try:
response = requests.get(url=url, headers=headers, verify=False)
result_obj = json.loads(response.text)
except Exception as e:
PRint(e)
if 0 == result_obj['status']:
return result_obj["data"]["results"]["current"]
else:
result_obj['status'] = 'error'
return result_obj这里需要cookie，只是一次性测试那么简单的操作从浏览器中取出来。如果是规模性的功能开发，那么要采取自动登录，自动获取cookie的方式。本篇采用第一种方式测试。
由于这里的网址是https，是不安全的链接访问，所以request.get的verify参数需要设置为False，否则请求失败。
至此，爬虫部分基本完成。
四、数据可视化关键编码实现
1、前端html代码
<body style="background-color:#000">
<div class="container_fluid">
<div class="row_fluid" id="vue_app">
<div class="col-xs-12 col-md-12" style="padding:0 0;">
<h3 style="color:hsl(200, 86%, 48%); text-align: center" id="container_0">
<strong></strong>
</h3>
<dv-decoration-5 style="width:100%;height:4%;color:hsl(200, 86%, 48%);">
</dv-decoration-5>
</div>
<div class="col-xs-12 col-md-2" style="padding:0 0;">
<div style="height:15%; padding:0%;">
<dv-border-box-7>
<p style='padding:2%; color:hsl(200, 86%, 48%); font-Size: 12; font-weight: bolder;'>
汽车行业最高指数
<img src="myimg/1.png" style="height: 25%; ">
</p>
<p id="container_1_6"
style='padding:0%; color:rgba(255, 255, 255, 0.9); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-2" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
化妆品行业最高指数
<img src="myimg/2.png" style="height: 25%; ">
</p>
<p id="container_1_7"
style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-2" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
旅游行业最高指数
<img src="myimg/3.png" style="height: 25%; ">
</p>
<p id="container_1_8"
style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-2" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
手机行业最高指数
<img src="myimg/4.png" style="height: 25%; ">
</p>
<p id="container_1_9"
style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-2" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
高校行业最高指数
<img src="myimg/4.png" style="height: 25%; ">
</p>
<p id="container_1_10"
style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-2" style="padding:0 0;">
<div style="height:15%; padding:1%;">
<dv-border-box-7>
<p style='padding:2%; color:hsl(200, 86%, 48%); font-size: 12; font-weight: bolder;'>
房产行业最高指数
<img src="myimg/4.png" style="height: 25%; ">
</p>
<p id="container_1_11"
style='padding:0%; color:rgba(255,255,255,.9); font-size: 28; font-weight: bolder; text-align: center;'>
112222</p>
</dv-border-box-7>
</div>
</div>
<div class="col-xs-12 col-md-5" style="padding:0 0; height:75%;">
<dv-border-box-1>
<div style="padding:3%; height:100%;" id="container_5"></div>
</dv-border-box-1>
</div>
<div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
<dv-border-box-1>
<div style="padding:3%; height:100%" id="container_6">
</div>
</dv-border-box-1>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
<dv-border-box-1>
<div style="padding:3%; height:100%" id="container_7">
</div>
</dv-border-box-1>
</div>
<div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
<dv-border-box-1>
<div style="padding:3%; height:100%" id="container_8">
</div>
</dv-border-box-1>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
<dv-border-box-1>
<div style="padding:3%; height:100%" id="container_9">
</div>
</dv-border-box-1>
</div>
<div class="col-xs-12 col-md-4" style="padding:0 0.3%;height:25%;">
<dv-border-box-1>
<div style="padding:3%; height:100%" id="container_10">
</div>
</dv-border-box-1>
</div>
<div class="col-xs-12 col-md-3" style="padding:0 0.3%;height:25%;">
<dv-border-box-1>
<div style="padding:3%; height:100%" id="container_11">
</div>
</dv-border-box-1>
</div>
</div>
</div>2、前端JS代码
VAR IDContainer_5 = "container_5";
var chartDom = document.getElementById(idContainer_5);
var myChart = echarts.init(chartDom, window.gTheme);
var option;
option = {
title: {
text: "全行业排行榜单",
left: "left",
textStyle: {
color: "hsl(200, 86%, 48%)",
fontSize: "10",
},
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} '
},
legend: {
top: "10%",
itemWidth: 20,
itemHeight: 10,
orient: 'vertical',
left: 'right',
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "10",
},
},
series: [
{
name:'热点指数',
data: [],
type: 'wordCloud',
// Shape: 'circle', //circle cardioid diamond triangle-forward triangle
sizeRange: [20, 62], //word的字体大小区间，单位像素
// rotationRange: [-90, 90], //word的可旋转角度区间
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.1)",
},
label: { show: false }
},
],
};
option && myChart.setOption(option);
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
function asyncData_5() {
$.getJSON("json/5.json").done(function (data) {
console.LOG(data);
var myChart = echarts.init(document.getElementById(idContainer_5));
myChart.setOption({
series: [{data: data}],
});
});
}
asyncData_5();
3、后端python服务器代码
class MyRequestHandler(SimpleHTTPRequestHandler):
protocol_version = "HTTP/1.0"
server_version = "PSHS/0.1"
Sys_version = "Python/3.7.x"
target = "./" # 监听目录，配置项
def do_GET(self):
url = ""
data = []
randomDateType = ['&dateType=20210711~20210717', '&dateType=20210811~20210817', '&dateType=20210911~20210917', '&dateType=20211011~20211017']
dateType = randomDateType[random.randint(0,3)]
if self.path.find("/json/5.json") >= 0:
for k in baidu_data:
data.extend(scrapyBaidu.filter_pie_data(baidu_data[k]))
// 其他链接同上
else:
SimpleHTTPRequestHandler.do_GET(self);
return
self.send_response(200)
self.send_header("Content-type", "json")
self.end_headers()
rspstr = json.dumps(data)
self.wfile.write(rspstr.encode("utf-8"))
def do_POST(self):
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 = json.dumps(data, ensure_ascii=False)
self.wfile.write(rspstr.encode("utf-8"))
def HttpServer():
try:
server = HTTPServer((ip, port), MyRequestHandler)
listen = "http://%s:%d" %(ip, port)
print("服务器监听地址： ", listen)
server.serve_forever()
except ValueError as e:
print("Exception", e)
server.socket.close()
if __name__ == "__main__":
HttpServer()五、上线运行
六、源码下载
17【源码】数据可视化：基于Echarts+Python实现的动态实时大屏范例（含爬虫代码）.zip-企业管理文档类资源-CSDN下载
本次分享结束，欢迎讨论！QQ微信同号： 6550523
七、精彩案例汇总
请抬起你可爱的小手戳戳戳：❤️数据可视化《精彩案例汇总》❤️_小魔怪的博客-CSDN博客
脚本宝典总结
以上是脚本宝典为你收集整理的❤�，我一直都在~❤️数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - 行业搜索指数排行榜【17】全部内容，希望文章能够帮你解决❤�，我一直都在~❤️数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - 行业搜索指数排行榜【17】所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的心得技巧相关文章
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程