❤️效果展示❤️

1、首先看动态效果图

2、丰富的主题样式

一、确定需求方案

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

2、部署方式

二、整体架构设计

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

1、确定爬虫目标网址

2、爬取关键代码

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

1、前端html代码

2、前端JS代码

3、后端python服务器代码

五、上线运行

六、源码下载

七、精彩案例汇总

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

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

话不多说，开始分享干货，欢迎讨论！QQ微信同号： 6550523

❤️效果展示❤️

1、首先看动态效果图

2、丰富的主题样式

一、确定需求方案

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

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

2、部署方式

基于免安装可执行程序：支持Windows、Linux、Mac等各种主流操作系统；将可执行程序exe复制到服务器上即可，无需其它环境依赖；

观看方式：既可在服务器上直接观看程序界面，也可远程使用浏览器打开播放，支持Chrome浏览器、360浏览器等主流浏览器。

二、整体架构设计

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

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

1、确定爬虫目标网址

本次采集的目标是bilibili实时热点数据，url地址为：哔哩哔哩排行榜bilibili是国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。大家可以在这里找到许多欢乐。https://www.bilibili.com/v/popular/rank/ent调用的api地址为：https://api.bilibili.com/x/web-interface/ranking/v2?type=all

2、爬取关键代码

def scrapy(url):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['code']:return result_obj["data"]["list"]else:result_obj['code'] = 'error'return result_obj

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

1、前端html代码

   <div class="container_fluid"><div class="row_fluid" id="vue_app"><div style="padding:0px; height:10%; " class="col-xs-12 col-md-12"><dv-decoration-4 :reverse="true" style="height:20%;"></dv-decoration-4><h3 style="color:#cba871;text-align:center;height:80%;" id="container_h">container_h</h3></div><div style="padding: 0px;" class="col-xs-12 col-md-4"><div style="padding: 0px; height:60%;" class="col-xs-12 col-md-12"><dv-border-box-2 style="padding: 12px;  " :color="['#cba871', '#25201f']"><h6 style=" color:#cba871; text-align: center; "> - bilibli视频播放（iframe方式） - </h6><div style="padding:5%; height:90%; " id="container_2"><iframesrc="//player.bilibili.com/player.html?aid=891284092&bvid=BV1eP4y1b7Pt&cid=432844457&page=1"scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"width="100%" height="100%"> </iframe></div></dv-border-box-2></div></div><div style="padding:0px;" class="col-xs-12 col-md-4"><div style="padding:0px; height:60%;" class="col-xs-12 col-md-12"><dv-border-box-2 style="padding: 12px;  " :color="['#cba871', '#25201f']"><h6 style=" color:#cba871; text-align: center;"> - 地区分布 - </h6><div style="padding:5%; height:90%;" id="container_3">container_3</div></dv-border-box-2></div></div><div style="padding: 0px;" class="col-xs-12 col-md-4"><div style="padding: 0px; height:30%;" class="col-xs-12 col-md-12"><dv-border-box-2 style="padding: 12px; " :color="['#cba871', '#25201f']"><h6 style=" color:#cba871; text-align: center; height:3%;"> - 用户年龄&性别分布 - </h6><div style="padding: 0px; " class="col-xs-12 col-md-6"><div style="padding:5%; height:90%;" id="container_4_1">container_4_1</div></div><div style="padding: 0px; " class="col-xs-12 col-md-1"><div style="width: 0.3px; align:center; height: 80%; background: #cba871;"></div></div><div style="padding: 0px; " class="col-xs-12 col-md-5"><div style="padding:5%; height:90%;" id="container_4_2">container_4_2</div></div></dv-border-box-2></div><div style="padding: 0px; height:30%;" class="col-xs-12 col-md-12"><dv-border-box-2 style="padding: 12px; " :color="['#cba871', '#25201f']"><h6 style=" color:#cba871; text-align: center;height:3%;"> - 访问来源&会员等级 - </h6><div style="padding: 0px; " class="col-xs-12 col-md-6"><div style="padding:5%; height:90%;" id="container_5_1">container_5_1</div></div><div style="padding: 0px; " class="col-xs-12 col-md-1"><div style="width: 0.3px; align: center; height: 80%; background: #cba871;"></div></div><div style="padding: 0px; " class="col-xs-12 col-md-5"><div style="padding:5%; height:90%;" id="container_5_2">container_5_2</div></div></dv-border-box-2></div></div><div style="padding:0px;" class="col-xs-12 col-md-12"><div style="padding:0px; height:30%;" class="col-xs-12 col-md-12"><dv-border-box-2 style="padding: 12px; " :color="['#cba871', '#25201f']"><h6 style="color:#cba871; text-align: center; "> - 全站热榜排行(python爬取bilibli) - </h6><div style=" padding:1%; height:90%; " id="container_6">container_6</div></dv-border-box-2></div></div></div></div>

2、前端JS代码

    var idContainer_6 = "container_6";var chartDom = document.getElementById(idContainer_6);
var myChart = echarts.init(chartDom, window.gTheme);
var option;option = {grid: {left: "1%",right: "1%",bottom: "15%",top: "1%",containLabel: true,},tooltip: {trigger: "axis",axisPointer: {type: "none",},formatter: function (params) {return params[0].name + ": " + params[0].value;},},dataZoom: [{type: "slider",xAxisIndex: 0,start: 0,end: 20,bottom: "-5%"},],xAxis: {data: [],axisTick: { show: false },axisLine: { show: false },axisLabel: {color: "rgba(255,255,255,.8)",},},yAxis: {splitLine: { show: false },axisTick: { show: false },axisLine: { show: false },axisLabel: { show: false },},// color: ["#cba871"],series: [{type: "pictorialBar",barCategoryGap: "-100%",label: {normal: {show: true,position: "top",textStyle: {color: ["#cba871"],},},},symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",itemStyle: {opacity: 1,},emphasis: {itemStyle: {opacity: 1,},},data: [],z: 10,},],
};function asyncData_6() {$.getJSON("json/6.json").done(function (data) {var myChart = echarts.init(document.getElementById(idContainer_6));myChart.setOption(data);}); //end $.getJSON
}window.addEventListener("resize", function () {myChart.resize();
});myChart.setOption(option);asyncData_6();

3、后端python服务器代码

     # -*- coding:utf-8 -*-
import json
import scrapyBilibili as scrapyBilibili
from http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServerip = "localhost"   # 监听IP，配置项
port = 8819       # 监听端口，配置项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 = []# 处理客户端的动态请求if self.path.find("/json/6.json") >= 0:data = scrapyBilibili.filter(scrapyBilibili.scrapy("https://api.bilibili.com/x/web-interface/ranking/v2?type=all"))else:SimpleHTTPRequestHandler.do_GET(self)return# 响应http headerself.send_response(200)self.send_header("Content-type", "json")self.end_headers()# 响应http responserspstr = json.dumps(data)self.wfile.write(rspstr.encode("utf-8"))# def do_GET(self):#     if self.path.find("/json/") > 0:#         print(self.path)#         req = {"success": "true"}#         self.send_response(200)#         self.send_header("Content-type", "json")#         self.end_headers()#         with open(self.path, 'r', encoding="utf-8") as f:#             data = json.load(f)#             rspstr = json.dumps(data)#             self.wfile.write(rspstr.encode("utf-8"))#     else:#         SimpleHTTPRequestHandler.do_GET(self);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 Exception as e:print("Exception", e)server.socket.close()if __name__ == "__main__":HttpServer()

五、上线运行

六、源码下载

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

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

七、精彩案例汇总

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

【19】数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - bilibili排行榜相关推荐

【25】数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传
目录效果展示多主题样式一. 确定需求方案 1.确定产品上线部署的屏幕分辨率 2.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1.前端html代码 - ...
【2】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 物流大数据
目录精彩案例汇总效果展示一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1 ...
【1】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 互联网企业数据
目录精彩案例汇总效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基 ...
【4】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 厦门市某医院
目录精彩案例汇总效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基 ...
33【源码】数据可视化：基于 Echarts + Python Flask 动态实时大屏 - 制造业生产管理看板
效果展示 1.动态实时更新数据效果图 2.鼠标右键切换主题一.确定需求方案 1. 屏幕分辨率这个案例的分辨率是16:9,最常用的的宽屏比. 根据电脑分辨率屏幕自适应显示,F11全屏查看: 2. 部 ...
34【源码】数据可视化：基于 Echarts + Python 动态实时大屏 - 视频平台
效果图展示 1.动态实时更新数据效果图说明: 其中今日抓拍,抓拍总数,预警信息统计,监控点位统计图表做了动态实时更新处理. 2.静态切片效果图一.确定需求方案 1.确定产品上线部署的屏幕L ...
12【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 供应链
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...
2【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物流大数据
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前小伙伴们建议我出一些视频课程来学习Echarts,这样可以更快上 ...
3【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-物联网
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...

【19】数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - bilibili排行榜

❤️效果展示❤️

1、首先看动态效果图

2、丰富的主题样式

一、确定需求方案

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

2、部署方式

二、整体架构设计

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

1、确定爬虫目标网址

2、爬取关键代码

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

1、前端html代码

2、前端JS代码

3、后端python服务器代码

五、上线运行

六、源码下载

七、精彩案例汇总

【19】数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - bilibili排行榜相关推荐

最新文章

热门文章

【19】数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - bilibili排行榜

❤️效果展示❤️

1、首先看动态效果图

2、丰富的主题样式

一、 确定需求方案

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

2、部署方式

二、整体架构设计

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

1、确定爬虫目标网址

2、爬取关键代码

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

1、前端html代码

2、前端JS代码

3、后端python服务器代码

五、上线运行

六、源码下载

七、精彩案例汇总

【19】数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - bilibili排行榜相关推荐

最新文章

热门文章

一、确定需求方案