目錄
??效果展示??
1、首先看動態效果圖
2、自動切換主題 ?
一、 確定需求方案
1、確定產品上線部署的螢屏LED解析度
2、部署方式
二、整體架構設計
三、爬蟲采集關鍵編碼實作
1、確認爬蟲目標
2、確定爬取方式
3、爬取關鍵代碼
四、資料可視化關鍵編碼實作
1、前端html代碼
2、前端JS代碼
3、后端python服務器代碼
五、上線運行
六、原始碼下載
七、精彩案例匯總
寫在前面，最近收到了很多小伙伴們的建議，大屏得展示資料如果采用真實資料分析計算，那就更加貼近小伙伴們的實際作業場景，可以很快在作業中應用，所以應小伙伴需求，就誕生了這篇資料可視化+爬蟲的【微博實時熱點 - 資料可視化大屏解決方案】，
話不多說，開始分享干貨，歡迎討論！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、確認爬蟲目標
本次采集的目標是微博實時熱點，url地址為：Sina Visitor System
F12查看資料傳輸協議，發現是以html方式（區分于上一篇的http+json方式）， 如下圖：
2、確定爬取方式
所以本次采集需要用到 google chrome 瀏覽器及chromedriver.exe工具及selenium，
3、爬取關鍵代碼
try:
# 發起瀏覽器請求
self.browser.get(self.url)
# 先等待元素加載完成，否則find_elements的執行結果為空
WebDriverWait(self.browser, 8, 0.5).until(lambda x: x.find_element(By.ID, "pl_unlogin_home_feed").is_displayed())
except Exception as e:
print(e)
return
nodes = self.browser.find_elements(By.CLASS_NAME, 'list_des')
if len(nodes) == 0:
print("parse 未找到節點 list_des ------------------")
return
for node in nodes:
try:
# 標題 單個節點
title = node.find_element(By.CLASS_NAME,'S_txt1').text
title_list.append(title)
except Exception as e:
print('title_list', e)
try:
# 轉發 點贊 評論 的串列節點
zhuan_dian_ping_list = node.find_elements(By.TAG_NAME, 'em')
dianzan_list.append(zhuan_dian_ping_list[1].text)
pinglun_list.append(zhuan_dian_ping_list[3].text)
zhuanfa_list.append(zhuan_dian_ping_list[5].text)
except Exception as e:
print('zhuan_dian_ping_list', e)四、資料可視化關鍵編碼實作
1、前端html代碼
<div class="container_fluid">
<div class="row_fluid" id="vue_app">
<div style="padding:0 0" class="col-xs-12 col-md-12">
<dv-decoration-1 style="height:4%;">
</dv-decoration-1>
<h3 id="container_h"></h3>
</div>
<div style="padding:0 0" class="col-xs-12 col-md-3">
<dv-border-box-8 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
<div style="height:100%;padding:5% 5% 5% 5%;" id="container_0"></div>
</dv-border-box-8>
<div style="padding:0 0" class="col-xs-12 col-md-12">
<dv-border-box-8 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
<div style="height:100%;padding:5% 5% 5% 5%;" id="container_1"></div>
</dv-border-box-8>
</div>
<div style="padding:0 0" class="col-xs-12 col-md-12">
<dv-border-box-8 style="height:29%;padding:0 0" class="col-xs-12 col-md-12">
<div style="height:100%;padding:5% 5% 5% 5%;" id="container_2"></div>
</dv-border-box-8>
</div>
</div>
<div style="padding:0 0" class="col-xs-12 col-md-5">
<dv-border-box-8 style="height:87%;padding:0 0" class="col-xs-12 col-md-12">
<div style="height:100%;padding: 2% 2% 2% 2%" id="container_3"></div>
</dv-border-box-8>
<div
style="position: absolute; z-index: 2; left:25%; top:10%; right: 25%; bottom: 20%; height:20%; width: 50%; ">
<h3 id="container_3_top_title"> title </h3>
<h1 id="container_3_top">content</h1>
</div>
</div>
<div style="padding:0 0" class="col-xs-12 col-md-4">
<dv-border-box-8 style="height:87%;padding:0 0" class="col-xs-12 col-md-12">
<div style="height:100%;padding:5% 5% 5% 5%;" id="container_4"></div>
</dv-border-box-8>
</div>
</div>
</div>
2、前端JS代碼
var idContainer_4 = "container_4";
var chartDom = document.getElementById(idContainer_4);
function initEchart_4() {
var myChart = echarts.init(chartDom, window.gTheme);
var option = {
title: {
text: "微博實時熱點（爬蟲采集）",
left: "center",
textStyle: {
color: "#00ffff",
fontSize: "12",
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ",
position: function (p) {
//其中p為當前滑鼠的位置
return [p[0] + 10, p[1] - 10];
},
},
legend: {
data: ["legend1", "legend2", "legend3"],
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: "10",
},
top: "5%",
},
grid: {
left: "12%",
right: "15%",
bottom: "3%",
// 距離頂部邊框的相對距離，太近壓到了legend
top: "15%",
containLabel: true,
},
dataZoom: [
{
type: "slider",
yAxisIndex: 0,
left: "0%",
start: 60,
end: 40,
},
],
xAxis: [
{
name: "xAxisName1",
type: "value",
min: 0,
max: 5000,
nameLocation:'start',
nameTextStyle: {
color: "#3690be",
fontSize: 10,
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
{
name: "xAxisName2",
type: "value",
min: 0,
max: 100,
nameLocation:'start',
nameTextStyle: {
color: "#3690be",
fontSize: 10,
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
],
yAxis: {
name:'yAxisName',
type: "category",
data: [],
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
series: [
{
name: "name1",
type: "bar",
xAxisIndex: 0,
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [],
},
{
name: "name2",
type: "bar",
xAxisIndex: 1,
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [],
},
{
name: "name3",
type: "bar",
xAxisIndex: 1,
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [],
},
],
};
// 使用剛指定的配置項和資料顯示圖表，
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function asyncData_4() {
$.getJSON("weibo.json").done(function (data) {
var myChart = echarts.init(document.getElementById(idContainer_4), window.gTheme);
myChart.setOption(data);
// myChart.setOption({
// yAxis: { data: data["yAxis"]["data"] },
// series: [{ data: data["series"][0]["data"] }, { data: data["series"][1]["data"] }],
// });
}); //end $.getJSON}
}
initEchart_4();
asyncData_4();
3、后端python服務器代碼
class MyRequestHandler(SimpleHTTPRequestHandler):
protocol_version = "HTTP/1.0"
server_version = "PSHS/0.1"
sys_version = "Python/3.7.x"
target = "./" # 監聽目錄，配置項
# 生成一個爬蟲實體
scrapyWB = scrapyWeibo.Parse()
def do_GET(self):
# 回應微博爬蟲資料
if self.path.find("/weibo.json") >= 0:
self.send_response(200)
self.send_header("Content-type", "json")
self.end_headers()
data = self.scrapyWB.get_echarts_option()
rspstr = json.dumps(data)
self.wfile.write(rspstr.encode("utf-8"))
else:
# 回應其他的json檔案
SimpleHTTPRequestHandler.do_GET(self)
return
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()
五、上線運行
六、原始碼下載
18【原始碼】資料可視化：基于Echarts+Python動態實時大屏范例（含爬蟲代碼）-微博實時熱點大屏.zip-企業管理檔案類資源-CSDN下載
本次分享結束，歡迎討論！QQ微信同號： 6550523
七、精彩案例匯總
請抬起你可愛的小手戳戳戳：??資料可視化《精彩案例匯總》??_小魔怪的博客-CSDN博客
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/340767.html
標籤：python