数据可视化：基于 Echarts + Python 实现的动态实时大屏范例六

近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【互联网大数据统计展示大屏】。

话不多说，开始分享干货，欢迎讨论！微信号： QQ6550523

首先看动态效果图：

再看实时分片数据图：

一、确定需求方案

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()