31【源码】数据可视化:基于 Echarts + Python Flask 动态实时【拖放】大屏 - 数据分析看板

我是 YYDataV数据可视化 

专注于 数据可视化大屏,工厂扫码装箱系统 

我的微信 6550523,多多交流 ~

目录

效果展示

1.动态实时更新数据效果图

2. 拖放后自动保存页面布局

3.鼠标右键切换主题 

 一. 确定需求方案 

1. 屏幕分辨率

2. 部署方式 

二. 整体架构设计

三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码)

1. 前端html代码

2. 拖放之ondragover

3. 拖放之ondragstart

4. 拖放之ondrop 

5. 前端JS - 数据定时更新控制

6.后端 flask 服务器

四. 启动命令

五. 运行效果

六. 源码下载 

更多可视化案例


前言:本案例在28基础上增加了 【拖放功能 28【源码】数据可视化:基于 Echarts + Python Flask 动态实时大屏范例 - 数据分析看板_YYDataV数据可视化的博客-CSDN博客_数据可视化源代码

效果展示

1.动态实时更新数据效果图

2. 拖放后自动保存页面布局

31【源码】数据可视化:基于 Echarts + Python Flask 动态实时【拖放】大屏 - 数据分析看板_第1张图片

31【源码】数据可视化:基于 Echarts + Python Flask 动态实时【拖放】大屏 - 数据分析看板_第2张图片

31【源码】数据可视化:基于 Echarts + Python Flask 动态实时【拖放】大屏 - 数据分析看板_第3张图片

3.鼠标右键切换主题 

代码中预置了12个主题风格,实际开发中可根据实际情况二次增加。

31【源码】数据可视化:基于 Echarts + Python Flask 动态实时【拖放】大屏 - 数据分析看板_第4张图片

 一. 确定需求方案 

1. 屏幕分辨率

这个案例的分辨率是16:9,最常用的的宽屏比。

根据电脑分辨率屏幕自适应显示,F11全屏查看;

2. 部署方式 

B/S方式:支持Windows、Linux、Mac等各种主流操作系统;支持主流浏览器Chrome,Microsoft Edge,360等;服务器采用python语言编写,配置好python环境即可。

二. 整体架构设计

  1. 前端Echarts开源库:使用 WebStorm 编辑器;
  2. 后端 http服务器:基于 Python 实现,使用 Pycharm 或 VSCode 编辑器;
  3. 数据传输格式:JSON;
  4. 数据源类型:JSON文件。实际开发需求中,支持定制HTTP API接口方式或其它各种类型数据库,如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
  5. 数据更新方式:采用http get 轮询方式 。在实际应用中,也可以视情况选择j监测后端数据实时更新,实时推送到前端的方式;

三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码)

1. 前端html代码

使用bootstrap container-fluid, row, col等实现。

2. 拖放之ondragover

// 释放目标时触发的事件:
// ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
function allowDrop(ev) {
  // 判断目标元素是否允许放入被拖动元素
  if (ev.target.ondrop) {
    ev.preventDefault();
  }
}

3. 拖放之ondragstart

// 在拖动目标上触发事件(源元素);
// ondragstart 用户开始拖动元素时触发;
function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

4. 拖放之ondrop 

// 释放目标时触发的事件:
// ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
function drop(ev) {
  ev.preventDefault();

  var target = ev.target;
  var target_child = target.firstChild;

  var data = ev.dataTransfer.getData("Text");
  var node = document.getElementById(data);
  var src_parent = node.parentNode;

  // 交换子节点
  target.appendChild(node);
  src_parent.appendChild(target_child);
  echart_resize(target_child.id);
  echart_resize(node.id);

  save_layout(gen_layout());
}

5. 前端JS - 数据定时更新控制

支持在每个echarts图表中独立控制定时更新的间隔。

 // 定时1s执行数据更新函数
  setInterval(function () {
    async_echart_bar_horizontal(
      container,
      path_bar_horizontal + "bar_horizontal.json"
    );
  }, 1000);

6.后端 flask 服务器

from flask import Flask
app = Flask(__name__, static_folder="static", template_folder="template")


# 主程序在这里
if __name__ == "__main__":

    # 开启线程,触发动态数据
    a = threading.Thread(target=asyncJson.loop)
    a.start()

    # 开启 flask 服务
    app.run(host='0.0.0.0', port=88, debug=True)

四. 启动命令


python main.py 


http://localhost:88/static/index.html


https://yydatav.blog.csdn.net/


https://blog.csdn.net/lildkdkdkjf/article/details/120705616

我的微信号:6550523  欢迎多多交流

五. 运行效果

六. 源码下载 

31【源码】数据可视化:基于 Echarts + Python Flask 动态实时【拖放】大屏 - 数据分析看板.zip

更多可视化案例

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客

你可能感兴趣的:(python,javascript,echarts,前端,可视化)