??效果展示??

1、首先看動態效果圖

2、豐富的主題樣式

一、確定需求方案

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

2、部署方式

二、整體架構設計

三、資料爬蟲 - 關鍵編碼實作

1、先分析目標網址首頁 - 福布斯中國 | Forbes China

2、爬蟲關鍵代碼

四、資料分析

1、關鍵代碼 - PictorialBar

2、關鍵代碼 - WordCloud

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

1、前端html代碼

2、前端JS代碼

3、后端python服務器代碼

六、上線運行

七、原始碼下載

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

話不多說，開始分享干貨，歡迎討論！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、先分析目標網址首頁 - 福布斯中國 | Forbes China

打開網頁，按下F12調出除錯工具，選中Network欄目查看我們需要呼叫的url，具體操作看下面gif小影片，

經過分析找到本次爬蟲要使用的url為 https://www.forbeschina.com/lists/1757

通過Response標簽欄可以看出回應為table表格資料，那么我們可以對采集結果使用正則運算式決議，

2、爬蟲關鍵代碼


def scrapy(url='https://www.forbeschina.com/lists/1757'):
    # 獲取tr的正則運算式
    pattern_tr = re.compile('<tr><td>.*?</tr>')
    # 獲取td的正則運算式
    pattern_td = re.compile('<td>.*?</td>')
    # 發起http請求，獲取 response 頁面內容
    response = requests.get(url)
    # 決議出tr串列
    trList = pattern_tr.findall(response.text)
    # 決議td值
    for tr in trList:
        nodeList = []

        tdList = pattern_td.findall(tr)
        tdLen = 0
        if tdLen == 0:
            tdLen = len(tdList)

        i = 0
        for td in tdList:
            # 處理掉 <td> 和 </td>
            value = td[4: len(td)-5]
            # 處理掉 財富（億元）的, 符號
            if i == 3:
                value = int(value.replace(',', ''))
            nodeList.append(value)
            i = i + 1

        # 生成陣列
        gDataList.append(nodeList)
    return gDataList

四、資料分析

現在我們要把采集到的資料渲染到Echarts，這就需要做一些統計分析計算，我這里使用了一款非常有名的資料分析利器Pandas，

1、關鍵代碼 - PictorialBar

這里以象形圖PictorialBar為例，后端采集到的資料包括：

# 排名    姓名（英文） 姓名（中文） 財富（億美元）    財富來源   國家和地區  年齡

echarts需要的資料如下：

姓名（中文）財富（億美元）

資料型別如下：

[['nameChinese', 'assets']]

所以，使用pandas對資料進行過濾，代碼如下：

def getPictorialBar():
    # 將串列生成 DataFrame
    df = pd.DataFrame(gDataList[:100], columns=['seq', 'nameEnglish', 'nameChinese','assets', 'industry', 'location', 'age'])
    return df[['nameChinese', 'assets']].to_json(orient='values')

2、關鍵代碼 - WordCloud

echarts需要的資料如下：

['name', 'value']

所以，使用pandas對年齡資料進行count計數，代碼如下：


def getWordCloudAge():
    # 將串列生成 DataFrame
    df = pd.DataFrame(gDataList, columns=['seq', 'nameEnglish', 'nameChinese', 'value', 'industry', 'location', 'name'])
    dfCount = df[['name', 'value']].groupby(by='name', sort=True).count()
    data = dfCount['value'].to_json(orient="table")
    data2 = eval(data)
    return data

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

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-7 style="height:22%;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-7>

                        <dv-border-box-7 style="height:22%;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-7>

                        <dv-border-box-7 style="height:22%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_3"></div>
                        </dv-border-box-7>

                        <dv-border-box-7 style="height:22%;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-7>
                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-6">
                        <div style="height:66%;" id="container_5" class="col-xs-12 col-md-12"></div>
                        <div style="height:22%;" id="container_10" class="col-xs-12 col-md-12"></div>
            
                        <div class="div-title-1">
                              <p class="p-titile">
                                    <img src="myimg/1.png" style="height: 40%; ">富豪榜金牌
                              </p>
                              <p id="container_dom_1" class="p-value">
                              </p>
                        </div>
                        <div class="div-title-2">
                              <p class="p-titile">
                                    <img src="myimg/2.png" style="height: 40%; ">富豪榜銀牌
                              </p>
                              <p id="container_dom_2" class="p-value">
                              </p>
                        </div>
                        <div class="div-title-3">
                              <p class="p-titile">
                                    <img src="myimg/3.png" style="height: 40%; ">富豪榜銅牌
                              </p>
                              <p id="container_dom_3" class="p-value">
                              </p>
                        </div>
                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-3">
                        <dv-border-box-7 style="height:22%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_6"></div>
                        </dv-border-box-7>

                        <dv-border-box-7 style="height:22%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_7"></div>
                        </dv-border-box-7>

                        <dv-border-box-7 style="height:22%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_8"></div>
                        </dv-border-box-7>

                        <dv-border-box-7 style="height:22%;padding:0 0" class="col-xs-12 col-md-12">
                              <div style="height:100%;padding:5% 5% 5% 5%;" id="container_9"> 
                                    <dv-scroll-board :config="config" />
                              </div>
                        </dv-border-box-7>
                  </div>

            </div>
      </div>

2、前端JS代碼

    
var idContainer_10 = "container_10";

var chartDom = document.getElementById(idContainer_10);
var myChart = echarts.init(chartDom, window.gTheme);
var option;
option = {
  title: {
    text: "個人財富值排行榜",
    textStyle: {
      fontSize: 14,
      fontWeight: "bold",
      color: "hsl(200, 86%, 48%)",
    },
    left: "center",
  },
  grid: {
    left: "1%",
    right: "1%",
    bottom: "15%",
    top: "1%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "none",
    },
    formatter: function (params) {
      return params[0].value + " 億美元";
    },
  },
  dataZoom: [
    {
      type: "slider",
      xAxisIndex: 0,
      start: 0,
      end: 20,
      bottom: "0",
    },
  ],
 dataset:{
    source:[]
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    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 },
  },

  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,
        },
      },
      z: 10,
    },
  ],
};

function asyncData_10() {
  $.getJSON("/json/pictorial_bar.json").done(function (data) {

    var myChart = echarts.init(document.getElementById(idContainer_10));
    myChart.setOption({'dataset':{'source':data}});

    //金銀銅前三名富豪
    topData = [data[0][0], data[1][0], data[2][0]];
    asyncData_dom(topData);
  }); //end $.getJSON
}

window.addEventListener("resize", function () {
  myChart.resize();
});

myChart.setOption(option);

3、后端python服務器代碼

     # -*- coding:utf-8 -*-
from http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServer
import json
import scrapyForbes as scrapyForbes

ip = "localhost"   # 監聽IP，配置項
port = 8820       # 監聽埠，配置項

class MyRequestHandler(SimpleHTTPRequestHandler):
    protocol_version = "HTTP/1.0"
    server_version = "PSHS/0.1"
    sys_version = "Python/3.7.x"
    target = "./"  # 監聽目錄，配置項

    # 生成一個爬蟲實體
    scrapyForbes = scrapyForbes.scrapy()

    def do_GET(self):
        url = ""
        data = []
        # 處理客戶端的爬蟲資料請求
        if self.path.find("/json/pictorial_bar.json") >= 0:
            data = scrapyForbes.getPictorialBar()
        elif self.path.find("/json/bar_industry.json") >= 0:
            data = scrapyForbes.getIndustry()
        elif self.path.find("/json/bar_location.json") >= 0:
            data = scrapyForbes.getGeoMapWorld()
        elif self.path.find("/json/wordcloud_age.json") >= 0:
            data = scrapyForbes.getWordCloudAge()
        elif self.path.find("/json/bar_assets.json") >= 0:
            data = scrapyForbes.getAssets()
        elif self.path.find("/json/table.json") >= 0:
            data = scrapyForbes.getTable()
        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(data.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()

六、上線運行

啟動命令參考Readme.md檔案，

七、原始碼下載

本次分享結束，歡迎討論！QQ微信同號： 6550523

八、更多精彩案例

YYDatav的資料可視化《精彩案例匯總》_YYDataV的博客-CSDN博客

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

標籤：其他

上一篇：教你從零開始畫echarts地圖

下一篇：親手擼一個Echarts資料可視化

【20】資料可視化+爬蟲+分析：基于 Echarts + Python + Pandas 實作的動態實時大屏范例 - Forbes全球富豪榜

??效果展示??

1、首先看動態效果圖

2、豐富的主題樣式

一、 確定需求方案

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

2、部署方式

二、整體架構設計

三、資料爬蟲 - 關鍵編碼實作

1、先分析目標網址 首頁 - 福布斯中國 | Forbes China

2、爬蟲關鍵代碼

四、資料分析

1、關鍵代碼 - PictorialBar

2、關鍵代碼 - WordCloud

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

1、前端html代碼

2、前端JS代碼

3、后端python服務器代碼

六、上線運行

七、原始碼下載

一、確定需求方案

1、先分析目標網址首頁 - 福布斯中國 | Forbes China