??效果展示??

1、首先看動態效果圖

2、豐富的主題樣式

一、確定需求方案

1、確定產品上線部署的螢屏LED解析度

2、功能模塊

3、部署方式

二、整體架構設計

三、爬蟲采集關鍵編碼實作

1、確定爬蟲目標

2、確認每個模塊的url請求及引數

3、撰寫爬蟲采集資料

四、資料可視化關鍵編碼實作

1、前端html代碼

2、前端JS代碼

3、后端python服務器代碼

五、上線運行

六、原始碼下載

七、精彩案例匯總

寫在前面，最近收到了很多小伙伴們的建議，大屏得展示資料如果采用真實資料分析計算，那就更加貼近小伙伴們的實際作業場景，可以很快在作業中應用，所以應小伙伴需求，就誕生了這篇資料可視化+爬蟲，

近年來，資料可視化大屏的出現，掀起一番又一番的浪潮，眾多企業主紛紛想要打造屬于自己的 “酷炫吊炸天” 的霸道總裁大屏駕駛艙，今天為大家分享的是【 行業搜索指數排行榜- 資料可視化大屏解決方案】，

??效果展示??

1、首先看動態效果圖

2、豐富的主題樣式

一、確定需求方案

1、確定產品上線部署的螢屏LED解析度

1280px*768px，F11全屏后占滿整屏無滾動條；其它解析度螢屏可自適應顯示，

2、功能模塊

汽車行業排行榜單

手機行業排行榜單

化妝品行業排行榜單

旅游景點行業排行

高校行業排行

房產行業排行

3、部署方式

基于免安裝可執行程式：支持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、確定爬蟲目標

本次采集目標為百度行業排行，打開網址百度指數頁面如圖所示：

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博客

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/336262.html

標籤：其他

上一篇：（程式猿專屬）1024-從我做起，關愛程式員！漫畫篇

下一篇：SpringMVC學習（四）——json

??1024，我一直都在~??資料可視化+爬蟲：基于 Echarts + Python 實作的動態實時大屏范例 - 行業搜索指數排行榜【17】

??效果展示??

1、首先看動態效果圖

2、豐富的主題樣式

一、 確定需求方案

1、確定產品上線部署的螢屏LED解析度

2、功能模塊

3、部署方式

二、整體架構設計

三、爬蟲采集關鍵編碼實作

1、確定爬蟲目標

2、確認每個模塊的url請求及引數

3、撰寫爬蟲采集資料

四、資料可視化關鍵編碼實作

1、前端html代碼

2、前端JS代碼

3、后端python服務器代碼

五、上線運行

六、原始碼下載

七、精彩案例匯總

一、確定需求方案