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

最新推荐文章于 2023-06-16 15:45:59 发布

YYDataV数据可视化

最新推荐文章于 2023-06-16 15:45:59 发布

阅读量6.8k

点赞数 30

分类专栏：【可视化大屏案例Python/Echarts】文章标签：爬虫 echarts python 数据可视化大屏

版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/lildkdkdkjf/article/details/121070590

版权

【可视化大屏案例Python/Echarts】专栏收录该内容

73 篇文章 215 订阅

订阅专栏

目录

❤️效果展示❤️

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"><iframe
                                src="//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, ThreadingHTTPServer

ip = "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 header
        self.send_response(200)
        self.send_header("Content-type", "json")
        self.end_headers()

        # 响应http response
        rspstr = 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博客

YYDataV数据可视化

关注

30
点赞
踩
278

收藏

觉得还不错? 一键收藏
打赏
12
评论
【19】数据可视化+爬虫：基于 Echarts + Python 实现的动态实时大屏范例 - bilibili排行榜

目录❤️效果展示❤️1、首先看动态效果图2、丰富的主题样式一、确定需求方案1、确定产品上线部署的屏幕LED分辨率2、部署方式二、整体架构设计三、爬虫采集关键编码实现1、确定爬虫目标网址2、爬取关键代码四、数据可视化关键编码实现1、前端html代码2、前端JS代码3、后端python服务器代码五、上线运行六、源码下载七、精彩案例汇总写在前面，最近收到了很多小伙伴们的建议，大屏得展示数据如果采用真实数据分析计算，那就更加贴近小伙...
复制链接

扫一扫

专栏目录

评论 12

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

YYDataV数据可视化 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。