近年來，數據可視化大屏的出現，掀起一番又一番的浪潮，衆多企業主紛紛想要打造屬於自己的 “酷炫吊炸天” 的霸道總裁大屏駕駛艙。今天爲大家分享的是 【互聯網大數據統計展示大屏】。

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

首先看動態效果圖：

再看實時分片數據圖：

一、確定需求方案

1、確定產品上線部署的屏幕LED分辨率

1280px*768px，F11全屏後佔滿整屏且無滾動條；其它分辨率屏幕均可自適應顯示。

2、功能模塊

1 近7天日活增長數
2 年度環比日活
3 在線活躍設備
4 國內外設備分佈佔比
5 設備增長率：海量大數據處理
6 最新消息

3、部署方式

基於免安裝可執行程序：支持Windows、Linux、Mac等各種主流操作系統；將可執行程序exe複製到服務器上即可，無需其它環境依賴；

觀看方式：既可在服務器上直接觀看程序界面，也可遠程使用瀏覽器打開播放，支持Chrome瀏覽器、360瀏覽器等主流瀏覽器。

二、整體架構設計

前端基於Echarts開源庫設計，使用WebStorm編輯器；
後端基於Python Web實現，使用Pycharm編輯器；
數據傳輸格式：JSON；
數據源類型：目前已支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等，還可以定製HTTP API接口方式或其它類型數據庫。
數據更新方式：摒棄了前端頁面定時拉取的方式（這種方式帶來嚴重的資源浪費），採用後端數據實時更新，實時推送到前端展示；

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

前端html代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>互聯網大數據統計展示大屏</title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
		<script src="js/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.min.js"></script>
		<link href="css/index.css" rel="stylesheet" />
	</head>
	<body>
		<header>互聯網大數據統計展示大屏</header>
		<div class="container m-20">
			<div class="row">
				<div class="col-lg-3">
					<div class="box1">
						<div class="title">近7天日活增長數</div>
						<div class="box1_con" id="box1"></div>
					</div>
					<div class="box2 m-20">
						<div class="title">年度環比日活</div>
						<div class="box2_con" id="box2"></div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="box3">
						<div class="title">在線活躍設備</div>
						<div class="box3_con">
							<div class="box3_con_left" id="box3_left"></div>
							<div class="box3_con_right">
								<div class="box3_con_right_top">
									<div class="row">
										<div class="col-lg-4 data_bg"><p id="total">12569臺</p><small>設備總數</small></div>
										<div class="col-lg-4 data_bg"><p id="total_online" > 12375臺</p><small>運行設備</small></div>
										<div class="col-lg-4 data_bg"><p id="total_repair">178臺</p><small>月修設備</small></div>
									</div>
								</div>
								<div class="box3_con_right_bot" id="box3_right"></div>
							</div>
						</div>
					</div>
					<div class="box4 m-20">
						<div class="title">國內外設備分佈佔比</div>
						<div class="box4_con" id="box4"></div>
					</div>
				</div>
				<div class="col-lg-3 box5">
					<div class="title">設備增長率</div>
					<div class="box5_con">
						<div class="box5_con_top" id="box5"></div>
						<div class="title m-20">最新消息</div>
						<div class="box5_con_bot">
							<ul>
								<li>1、列表類信息標題測試列表類信息標題測試列表類信息標題測試</li>
								<li>2、列表類信息標題測試列表類信息標題測試列表聞標題測試</li>
								<li>3、列表類信息標題測試列表類信息標題測試信息標題測試</li>
								<li>4、列表類信息標題測試標題測試列表類信息標題測試</li>
								<li>5、列表類信息標題測試列表類信息標題測列表類信息標題測試</li>
								<li>6、列表類信息標題測試列表類信息標題測試列表測試</li>
								<li>7、列表類信息標題測試列表類信息標題測試列表類信息標題測試</li>
								<li>8、列表類信息標題測試列表類信息標題測試列表類標題測試</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/box1.js"></script>
		<script type="text/javascript" src="js/box2.js"></script>
		<script type="text/javascript" src="js/box3_left.js"></script>
		<script type="text/javascript" src="js/box3_right.js"></script>
		<script type="text/javascript" src="js/box4.js"></script>
		<script type="text/javascript" src="js/box5.js"></script>
		<script type="text/javascript" >
			function async_data(){
				async_chart_box1();
				async_chart_box2();
				async_chart_box3_left();
				async_chart_box3_right();
				async_chart_common();
				async_chart_box4();
				async_chart_box5();
			}
			async_data();
		</script>
	</body>
</html>

前端JS代碼

var dom = document.getElementById("box1");
var myChart = echarts.init(dom);
var app = {};
option = null;
var labelRight = {
    normal: {
        position: 'right'
    }
};
option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 座標軸指示器，座標軸觸發有效
            type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
        }
    },
    grid: {
    	left:10,
        top: 20,
        bottom: 30
    },
    xAxis: {
        type : 'value',
        position: 'top',
        splitLine: {lineStyle:{type:'dashed'}},
    },
    textStyle:{//圖例文字的樣式
                color:'#fff',
                fontSize:12
            },
    yAxis: {
        type : 'category',
        axisLine: {show: false},
        axisLabel: {show: false},
        axisTick: {show: false},
        splitLine: {show: false},
        data : ['seven', 'six', 'five', 'four', 'three', 'two', 'one']
    },
    series : [
        {
            name:'增長率',
            type:'bar',
            stack: '總量',
            label: {
                normal: {
                    show: true,
                    formatter: '{b}'
                }
            },
            data:[
                {value: -0.07, label: labelRight},
                {value: -0.23, label: labelRight},
                0.08,
                {value: -0.17, label: labelRight},
                0.47,
                {value: -0.36, label: labelRight},
                0.18
            ]
        }
    ]
};


if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
console.log(JSON.stringify(option.yAxis.data));
console.log(JSON.stringify(option.series[0].data));


function async_chart_box1() {
    var box1Id = "box1"
    var box1JsonFileName = "json/" + box1Id + ".json"

    // 異步加載數據
    $.getJSON(box1JsonFileName).done(function (data) {
        var element = document.getElementById(box1Id);
        var myChart = echarts.init(element);
        console.log(data)
        myChart.setOption({
            series: [{
                data: data
            }]
        });
    });//end $.getJSON
}

後端python代碼

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

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

ip = "localhost"   # 監聽IP，配置項
port = 8814        # 監聽端口，配置項
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 del_dir():
    """
    刪除某一目錄下的所有文件或文件夾
    :param filepath: 路徑
    :return:
    """
    try:
        filepath = tempfile.gettempdir()
        print(filepath)
        # filepath = "C:/Users/zll/AppData/Local/python/cache"
        del_list = os.listdir(filepath)
        for f in del_list:
            file_path = os.path.join(filepath, f)
            if os.path.isfile(file_path):
                os.remove(file_path)
            elif os.path.isdir(file_path):
                shutil.rmtree(file_path)
    except Exception as e:
        print(e)

def HttpServer():
    try:
        del_dir()
        server = HTTPServer((ip, port), MyRequestHandler)
        print("服務器監聽地址： ", index_url)
        server.serve_forever()
    except KeyboardInterrupt:
        server.socket.close()

四、上線運行

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

感謝：本項目引用了互聯網大牛的前端代碼，然後定製開發實現了後端服務器，最終實現了可視化大屏的完整方案。

數據可視化：基於 Echarts + Python 實現的動態實時大屏範例六

首先看動態效果圖：

再看實時分片數據圖：

一、確定需求方案

1、確定產品上線部署的屏幕LED分辨率

2、功能模塊

3、部署方式

二、整體架構設計

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

前端html代碼

前端JS代碼

後端python代碼

四、上線運行

10分鐘搞定Mysql主從部署配置

如何使用 JS 判斷用戶是否處於活躍狀態

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

lightdb數據庫超時相關控制參數

lightdb秒級增加列和刪除列（not null帶默認值）

Java ThreadPoolShutdown

ECharts - 19. echarts-liquidfill 水球圖

數據採集 - 獲取【一品威客】最新發布需求，並實時通知用戶案例四

數據採集 - 獲取【oschina】最新發布需求，並實時通知用戶案例三

數據可視化：基於 Echarts + Python 實現的動態實時大屏範例五

數據可視化：基於 Echarts + Python 實現的動態實時大屏範例六

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

數據可視化：基於 Echarts + Python 實現的動態實時大屏範例六

首先看動態效果圖 ：

再看實時分片數據圖：

一、 確定需求方案

1、確定產品上線部署的屏幕LED分辨率

2、功能模塊

3、部署方式

二、整體架構設計

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

前端html代碼

前端JS代碼

後端python代碼

四、上線運行

首先看動態效果圖：

一、確定需求方案

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