【定制项目】【M13】【数据监控 + 数据分析 + 可视化大屏】- 关键技术 python flask + pandas + echarts + excel

目录

一、项目需求

二、项目架构

三、项目源码分析

1、http服务器：Python Flask 框架；

http 代码

接口解析

2、文件监控：Python win32con 模块；

监控代码

代码解析

3、数据分析：Python Pandas 库；

Pandas Series代码

文件示例

4、数据可视化：Echarts + BootStrap 库；

BootStrap布局

Echarts图形代码

四、更多案例

---

一、项目需求

项目名称：【某智能工厂生产不良率分析大屏系统】。

项目需求：监测磁盘指定目录（含子目录）生产日志文件 变化，分析文件（Excel格式）统计数据，并展示到可视化大屏。

项目工期：5个工作日。

二、项目架构

• 运行环境支持Windows，Linux类系统。
• B/S架构，支持Chrome，IE，QQ等主流浏览器。
• http服务器：Python Flask 框架；
• 文件监控：Python win32con 模块；
• 数据分析：Python Pandas 库；
• 数据可视化：Echarts + BootStrap 库；

三、项目源码分析

1、http服务器：Python Flask 框架；

http 代码

from flask import Flask

#此处省略其他代码
#...

@app.route('/datas/', methods=['GET', 'POST'])
def datas(flag):
    data = get_monitor(flag).get_result()
    return {
        "id": flag,
        "msg": "success",
        "data": data
    }

if __name__ == '__main__':
    # 开启 flask 服务
    app.run(host='0.0.0.0', port=8080, debug=True)

接口解析

前端调用接口： datas

参数flag：监测的目录路径

数据请求方式：GET或POST

数据响应：JSON

2、文件监控：Python win32con 模块；

监控代码

hDir = win32file.CreateFile(
            self.path_to_watch,
            FILE_LIST_DIRECTORY,
            win32con.FILE_SHARE_READ | win32con.FILE_SHARE_WRITE,
            None,
            win32con.OPEN_EXISTING,
            win32con.FILE_FLAG_BACKUP_SEMANTICS,
            None
        )
while 1:
    results = win32file.ReadDirectoryChangesW(
                hDir,
                1024,
                True,
                win32con.FILE_NOTIFY_CHANGE_FILE_NAME |
                win32con.FILE_NOTIFY_CHANGE_DIR_NAME |
                win32con.FILE_NOTIFY_CHANGE_ATTRIBUTES |
                win32con.FILE_NOTIFY_CHANGE_SIZE |
                win32con.FILE_NOTIFY_CHANGE_LAST_WRITE |
                win32con.FILE_NOTIFY_CHANGE_SECURITY,
                None,
                None)
    for action, filename in results:
        full_filename = os.path.join(self.path_to_watch, filename)
        # 响应事件处理，开始分析统计
        # 。。。
            
          

代码解析

win32file.CreateFile 监控目录 path_to_watch。

win32file.ReadDirectoryChangesW 响应 目录及子目录 文件变化通知。

3、数据分析：Python Pandas 库；

Pandas Series代码

# 统计关键字出现次数总和

df = pd.read_csv(file, encoding="gb2312")
return df['测量项目名称'].value_counts()

# 合并数据
series_total = series_total + series_config

# 删除nan
series_total = series_total.dropna()

文件示例

4、数据可视化：Echarts + BootStrap 库；

BootStrap布局

Echarts图形代码

var idContainer_4_5 = "container_4_5";
function initEchart_4_5() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(idContainer_4_5), gTheme);
  option = {
    title: {
      text: "年龄分布",
      top: "10%",
      left: "center",
      textStyle: {
        color: "#17c0ff",
        fontSize: "12",
      },
    },
 
    tooltip: {
      trigger: "item",
      formatter: "{a} 
{b}: {c} ({d}%)",
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10];
      },
    },
 
    grid: {
      left: "0",
      right: "10",
      bottom: "25%",
      top: "20%",
      containLabel: true,
    },
 
    xAxis: {
      type: "category",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          fontSize: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    yAxis: {
      type: "value",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          fontSize: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    series: [
      {
        name: "年龄分布",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
      },
    ],
  };
 
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
 
function getKeys(dataList) {
  var keys = [];
  var len = dataList.length;
  for (var i = 0; i < len; i++) keys.push(dataList[i].name);
  return keys;
}
 
function asyncData_4_5() {
  $.getJSON("myjson/bar_age.json").done(function (data) {
    var myChart = echarts.init(document.getElementById(idContainer_4_5));
    myChart.setOption({
      xAxis: { data: getKeys(data) },
      series: [{ data: data }],
    });
  }); //end $.getJSON
}
 
initEchart_4_5();

四、更多案例

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客❤️数据可视化❤️：基于 Echarts + Vue 实现的大屏范例【14】_小魔怪的博客-CSDN博客_echarts数据可视化❤️数据可视化❤️：基于 Echarts + Python 实现的大屏范例【13】国庆黄金周旅游监测㙍㙍㙍来了~_小魔怪的博客-CSDN博客❤️数据可视化❤️：基于 Echarts + Python 实现的大屏范例【12】（你想要的酷炫世界地图在这里了！）_小魔怪的博客-CSDN博客数据可视化：基于 Echarts + Python 实现的动态实时大屏范例【十一】https://yydatav.blog.csdn.net/article/details/120705616本次分享结束，欢迎多多交流，商务合作请私聊。