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

話不多說，開始分享干貨，歡迎討論！微信號： 6550523

效果展示

1、動態效果圖

2、實時分片資料圖

3、豐富的主題樣式

為了滿足不同用戶的審美需求，本案例實作了多個主題樣式：

chalk

macarons

roma

westeros

walden

一、確定需求方案

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

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

2、功能模塊

根據市場上同類產品資料分析的關鍵指標，本案例實作的功能模塊如下：

年齡分布
性別占比
地域分布
終端系統分布
機型價格分布
訪問來源分布
產品印象

3、部署方式：

B/S版：可以流暢的運行在 PC （Windows系統，Linux及各衍生系統）和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）；
C/S版：整個專案僅一個可執行檔案，超簡單的方式，沒有之一，

二、整體架構設計

前端基于Echarts開源庫設計，使用WebStorm編輯器；
后端基于Python Web實作，使用Pycharm編輯器；
資料傳輸格式：JSON；
資料源型別：支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，還可以定制HTTP API介面方式或其它型別資料庫，
資料更新方式：摒棄了前端頁面定時拉取的方式（這種方式帶來嚴重的資源浪費），采用后端資料實時更新，實時推送到前端展示；

三、編碼實作（基于篇幅及可讀性考慮，此處展示部分關鍵代碼）

1、前端html代碼

<html>

<head>
      <title>資料可視化大屏解決方案</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <style type="text/css">

      </style>
</head>
<link rel="icon" type="image.png" href="/static/images/favicon.ico">
<link rel="stylesheet" href="/static/js/fun.css">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/echart/opt/vue.js"></script>
<script src="/static/echart/opt/dv.js"></script>
<script src="/static/js/jquery-2.2.3.min.js"></script>


<body style="background-color: #050e27">

      <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-1 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-1>

                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-1 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-1>
                        </div>

                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-1 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-1>
                        </div>
                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-6">

                        <dv-border-box-1 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-1>
                  </div>

                  <div style="padding:0 0" class="col-xs-12 col-md-3">
                        <dv-border-box-1 style="height:29%;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-1>

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

                        <div style="padding:0 0" class="col-xs-12 col-md-12">
                              <dv-border-box-1 style="height:29%;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-1>
                        </div>
                  </div>

            </div>
      </div>
</body>

</html>

2、前端JS代碼

var idContainer_0 = "container_0";
function initEchart_0() {
  // 基于準備好的dom，初始化echarts實體
  var myChart = echarts.init(document.getElementById(idContainer_0), gTheme);
  option = {
    title: [
      {
        text: "年齡分布",
        left: "left",
        textStyle: {
          color: "#3690be",
          fontSize: "10",
        },
      },
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      position: function (p) {
        //其中p為當前滑鼠的位置
        return [p[0] + 10, p[1] - 10];
      },
    },
    legend: {
      top: "80%",
      itemWidth: 10,
      itemHeight: 10,
      // data: [],
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "10",
      },
    },
    series: [
      {
        name: "年齡分布",
        type: "pie",
        center: ["50%", "42%"],
        radius: ["40%", "60%"],
        // color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],

        // 環形圖的組成部分不顯示文字
        label: { show: false },
        // labelLine: { show: false },
        // data: [
        //     { value: 1, name: '0歲以下' },
        //     { value: 4, name: '20-29歲' },
        //     { value: 2, name: '30-39歲' },
        //     { value: 2, name: '40-49歲' },
        //     { value: 1, name: '50歲以上' },
        // ]
      },
    ],
  };

  // 使用剛指定的配置項和資料顯示圖表，
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

function asyncData_0() {
  $.getJSON("json/echart_0.json").done(function (data) {
    var myChart = echarts.init(document.getElementById(idContainer_0));
    myChart.setOption({
      series: [{ data: data }],
    });
  }); //end $.getJSON
}

initEchart_0();
asyncData_0();

3、后端python代碼

# -*- coding:utf-8 -*-

import io
import os
import sys
import urllib
import json
from http.server import HTTPServer, SimpleHTTPRequestHandler, ThreadingHTTPServer

ip = "localhost"   # 監聽IP，配置項
port = 8815       # 監聽埠，配置項
index_url = "http://%s:%d/index.html" %(ip, port)  # 監聽主頁url，配置項

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

    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):
        if self.path == "/signin":
            print("postmsg recv, path right")
        else:
            print("postmsg recv, path error")
            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 = "recv ok, data = "
            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()

四、上線運行

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

感謝：本專案參考了互聯網大牛smartchart代碼，然后定制開發實作了后端服務器，最終實作了可視化大屏的完整方案，

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

標籤：python

上一篇：七夕都要到了，你還沒有女朋友？教你用 Python 的 tkinter 做一個表白神器！為了幸福！

下一篇：Linux 怎么修改最大檔案打開數量？

資料可視化：基于 Echarts + Python 實作的動態實時大屏范例七