python+flask+socket-io+echarts数据可视化

最新推荐文章于 2026-04-09 07:12:36 发布
原创 最新推荐文章于 2026-04-09 07:12:36 发布 · 1.9k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了如何使用Python Flask、Flask-SocketIO和Echarts搭建一个实时数据可视化应用。首先，文章展示了如何安装相关库，然后创建Flask应用并设置路由。接着，通过创建HTML模板并在其中引入Echarts，展示了一个简单的柱状图。随后，通过Socket.IO实现实时通信，创建后台线程发送随机数据到前端，并在前端接收数据后更新Echarts图表。最后，演示了如何动态显示接收到的数字。

查看本机python版本

安装psutil

       打开window power shell安装psutil

       PSC:\Users\space> pip install psutil

       Collectingpsutil

         Downloadinghttps://files.pythonhosted.org/packages/c6/bf/09b13c17f54f0004ccb43cc1c2d36bab2eb75f471564b7856749dcaf62c3/psutil-5.4.5-cp35-cp35m-win_amd64.whl(222kB)

           100% |████████████████████████████████|225kB 714kB/s

       Installingcollected packages: psutil

       Successfullyinstalled psutil-5.4.5

       Youare using pip version 8.1.1, however version 10.0.1 is available.

       Youshould consider upgrading via the 'python -m pip install --upgrade pip' command.

安装flask

       PSC:\Users\space> pip install flask

       Collectingflask

         Downloadinghttps://files.pythonhosted.org/packages/77/32/e3597cb19ffffe724ad4bf0beca4153419918e7fa4ba6a34b04ee4da3371/Flask-0.12.2-py2.py3-none-any.whl(83kB)

           100% |████████████████████████████████|92kB 238kB/s

       Collectingitsdangerous>=0.21 (from flask)

         Downloadinghttps://files.pythonhosted.org/packages/dc/b4/a60bcdba945c00f6d608d8975131ab3f25b22f2bcfe1dab221165194b2d4/itsdangerous-0.24.tar.gz(46kB)

           100% |████████████████████████████████|51kB 374kB/s

       CollectingJinja2>=2.4 (from flask)

         Downloadinghttps://files.pythonhosted.org/packages/7f/ff/ae64bacdfc95f27a016a7bed8e8686763ba4d277a78ca76f32659220a731/Jinja2-2.10-py2.py3-none-any.whl(126kB)

           100% |████████████████████████████████|133kB 453kB/s

       Collectingclick>=2.0 (from flask)

         Downloadinghttps://files.pythonhosted.org/packages/34/c1/8806f99713ddb993c5366c362b2f908f18269f8d792aff1abfd700775a77/click-6.7-py2.py3-none-any.whl(71kB)

           100% |████████████████████████████████|71kB 314kB/s

       CollectingWerkzeug>=0.7 (from flask)

         Downloadinghttps://files.pythonhosted.org/packages/20/c4/12e3e56473e52375aa29c4764e70d1b8f3efa6682bef8d0aae04fe335243/Werkzeug-0.14.1-py2.py3-none-any.whl(322kB)

           100% |████████████████████████████████|327kB 198kB/s

       CollectingMarkupSafe>=0.23 (from Jinja2>=2.4->flask)

         Downloadinghttps://files.pythonhosted.org/packages/4d/de/32d741db316d8fdb7680822dd37001ef7a448255de9699ab4bfcbdf4172b/MarkupSafe-1.0.tar.gz

       Installingcollected packages: itsdangerous, MarkupSafe, Jinja2, click, Werkzeug, flask

         Running setup.py install for itsdangerous ...done

         Running setup.py install for MarkupSafe ...done

       Successfullyinstalled Jinja2-2.10 MarkupSafe-1.0 Werkzeug-0.14.1 click-6.7 flask-0.12.2itsdangerous-0.24

       Youare using pip version 8.1.1, however version 10.0.1 is available.

       Youshould consider upgrading via the 'python -m pip install --upgrade pip'command.

安装flask-socketio

       pipinstall flask-socketio

更新pip

       python-m pip install --upgrade pip

使用flask

       打开pycharm，新建一个工程

       创建一个.py文件

       创建一个文件夹，名字叫 templates (不能改成别的)

       在该文件夹下创建一个.html文件

       打开.py文件

              fromflask import Flask, render_template

              fromflask_socketio import SocketIO

             

              app= Flask(__name__)

              app.config['SECRET_KEY']= 'secret!'

              socketio= SocketIO(app)

             

             

              @app.route('/')

              defindex():

                  return render_template('index.html')

             

             

              if__name__ == '__main__':

                  socketio.run(app)

       打开.html文件

              <!DOCTYPEhtml>

              <htmllang="en">

              <head>

                  <meta charset="UTF-8">

                  <title>Title</title>

              </head>

              <scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>

              <body>

              <a>wbcbwjcwcw</a>

              </body>

              <scripttype="text/javascript" charset="utf-8">

                  var socket = io.connect('http://' +document.domain + ':' + location.port+'/');

                  socket.on('connect', function() {

                      socket.emit('my event', {data: 'I\'mconnected!'});

                  });

              </script>

              </html>

              【注意】

              //cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js一定要确保能用，之前用的1.0.3怎么都打不开网页，也可以把该文件下载下来

socket-io如何传递数据给echarts

       搭建flask socket-io基本框架

              fromflask import Flask, render_template

              fromflask_socketio import SocketIO

             

              app= Flask(__name__)

              app.config['SECRET_KEY']= 'secret!'

              socketio= SocketIO(app)

             

             

              @app.route('/')

              defindex():

                  return render_template('index.html')

             

             

              if__name__ == '__main__':

                  socketio.run(app)

              这样一启动flask就会进入index.html,这个跳转是由@app.route('/')下的函数实现的

       在html页面中添加echarts

              首先引入echarts需要的js文件，可以链接网络上的也可以使用本地的

                         <script type="text/javascript"src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

                         <script type="text/javascript"src="//cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script>

                         <scriptsrc="theme/chalk.js"></script>

                         <!-- ECharts 3 引入 -->

                         <scriptsrc="http://echarts.baidu.com/dist/echarts.js"></script>

              然后创建一个div,确定div的id

                   <divid="main" style="height:300px;border:1px solid#ccc;padding:10px;"></div>

              然后在script标签内添加echarts

                     这是一个柱状图

                             <scripttype="text/javascript">

                             // 基于准备好的dom，初始化echarts实例

                             var myChart1 =echarts.init(document.getElementById('main'),'dark');

                    

                             // 指定图表的配置项和数据

                             var option = {

                                 title: {

                                     text: 'ECharts 入门示例'

                                 },

                                 tooltip: {},

                                 legend: {

                                     data:['销量']

                                 },

                                 xAxis: {

                                     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

                                 },

                                 yAxis: {},

                                 series: [{

                                     name: '销量',

                                     type: 'bar',

                                     data: [5, 20, 36, 10, 10, 20]

                                 }]

                             };

                    

                             // 使用刚指定的配置项和数据显示图表。

                             myChart1.setOption(option);

                    

                         </script>

                     其中document.getElementById('main')中的main就是之前div的id,通过这个设置，图表就会知道要把自己放到哪个div中；后面的dark是默认主题之一，可以自己自定义主题，具体方法官网有，不再介绍

                    

       经过上面两步启动flask后就会在localhost:5000网页上看到一个柱状图，不过这个柱状图是静态的不能接收后台数据动态改变

      

       现在在.py文件中添加一个线程，用来与前端交互发送数据

              首先添加

              #与前端建立 socket 连接后，启动后台线程

              @socketio.on('connect',namespace='/test')

              然后在该句下面添加自己的函数来启动一个后台线程

                     thread= socketio.start_background_task(target=background_thread)

                     其中background_thread即是要实现的后台处理函数

              然后创建background_thread函数

                     在该函数中实现将数据发到前端

                         while True:

                             socketio.sleep(1)

                             k = random.randint(0, 100)      //这里产生一个随机数

                             socketio.emit('server_other',    //这里的server_other是前端定义的用来确定发送给哪个

                                           {'data': [k]},      //这里面放大就是要发送的数据

                                           namespace='/test')      //这是命名空间，前端有这个后端就要实现

              然后在html文件中添加接收数据的函数

                              // 建立socket连接，等待服务器“推送”数据，用回调函数更新图表

                             $(document).ready(function() {

                             namespace = '/test';      //这就是使用的命名空间，在后端用@socketio.on('connect',namespace='/test')实现

                             var socket =io.connect(location.protocol + '//' + document.domain + ':' + location.port +namespace);

                    

                             socket.on('server_other', function(res){  //后端使用socketio.emit('server_other',发送的数据会由这个接收

                                 update_mychart2(res);         //然后接收到后台数据res后，会调用update_mychart2(res)将数据更新到图表

                                 });

                              });

              将接收到的数据更新到图表

                         var update_mychart2 = function (res) {//res是json格式的response对象

                             valu = res.data[0]      //取出后台发送的数据

                             option.series[0].data[0].value =res.data[0]       //设置图表数据

                             myChart2.setOption(option);     //使设置生效实现修改图表

                         };

                     这里用的是一个仪表盘，只有一个数据，比较简单

网页动态显示数字

       由于echarts没有类似秒表的东西，没有办法单纯的显示数字，所以自己写一个

       首先在.html文件中添加一个用来表示数字的标签

              <divstyle="height:30px;border:1px solid #ccc;padding:10px;width:30px">

                          <aid="ri">1234566789</a>

                      </div>

       然后在html中设置当接收到后台数据后修改该数字

              首先在收到后台数据后调用修改该数字的函数

                     $(document).ready(function(){

                             namespace = '/test';

                             var socket =io.connect(location.protocol + '//' + document.domain + ':' + location.port +namespace);

                    

                             socket.on('server_other', function(res){

                                 update_mychart2(res);

                                 update_ri(res);

                                 });

                              });

              其中 update_ri(res);即为修改数字的函数

              然后实现该函数

                         var update_ri = function (res) { //res是json格式的response对象

                             valo = res.data[0]

                             document.getElementById("ri").innerHTML=valo

                         };

              这样就可以看到网页中数字动态改变的效果了


flask+socketio+echarts3 服务器监控程序（基于后端数据推送）
derek881122的博客
08-19 313
本文地址：http://www.cnblogs.com/hhh5460/p/7397006.html 说明 以前的那个例子的思路是后端监控数据存入数据库；前端ajax定时查询数据库。 这几天在看websocket。前端有一个js库：socket.io.js，后端python也有很多库实现了websocket，flask就有一个好用的扩展：flask-socketio。 在参考了这里之后，...
python socketio socketio.emit_python学习-Flask使用SocketIO结合Echarts实现一个简单的实时监控图...
weixin_29985807的博客
02-09 396
系统监控走势图var myChart = echarts.init(document.getElementById('main'));myChart.setOption({title: {text: '系统监控走势图'},tooltip: {},legend: {data:['cpu']},xAxis: {data: []},yAxis: {},series: [{name: 'cpu',type...
如何快速构建专业级数据大屏：Python Flask可视化终极指南
最新发布
gitblog_00142的博客
04-09 492
你是否曾为创建复杂的数据可视化仪表板而烦恼？传统的数据大屏开发往往需要专业前端技能和大量时间投入。big_screen项目正是为解决这一痛点而生——这是一个基于Python Flask的数据大屏可视化框架，让你只需几行代码就能生成专业级的数据可视化界面。无论是企业数据监控、业务分析报表，还是实时数据展示，big_screen都能帮你快速实现，无需复杂的JavaScript或前端框架知识。 ##
Python web学习笔记——（一）flask实现websocket+Echarts图表数据实时更新
weixin_42582355的博客
08-14 7472
flaskio+echarts实现图表实时更新项目概述遇到的问题Websocket 概述使用WebSocket协议的原因Flask实现WebSocket（全双工通信）方法一、使用flask-sockets（经过测试，无法连接）方法二、通过 `flask-sockeio` 实现WebSocket 项目概述 本人毕业设计是一个基于WSN的环境监控系统，实现流程如下： 硬件端采集数据（包括温湿度，光照强度，当前位置经纬度等），并通过WiFi模块，上传至后端，后端采用JAVA编写，后端接收数据并对其进行存储，同时转
python利用flask-socketio推送数据给前端(websocket协议)
贵有恒，何必三更眠五更起；最无益，只怕一日曝十日寒
11-17 1万+
flask-socketio可以实现全双工通信，本文使用的版本是： python==2.7 Flask-SocketIO==4.3.2 gevent-websocket==0.10.1 下面直接看服务端的代码: 其中前端直接访问也要访问这个name_space # coding: utf-8 import json from flask import Flask, request from flask_socketio import SocketIO, emit from monitor_
Python web实战 | 使用 Flask 实现 Web Socket 聊天室
Rocky006的博客
07-31 3520
Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议。它是 HTML5 中的一部分，并且可以在浏览器和服务器之间创建实时的交互式 Web 应用程序。Web Socket 通过在服务器和客户端之间建立持久连接，实现了实时的双向数据传输。本文介绍了如何使用 Python 和 Flask-SocketIO 实现 Web Socket，并创建了一个实时聊天室应用程序。Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得在客户端和服务器之间实现实时双向通信变得容易。
Python基于flask的医学电子技术线上翻转微课堂作业提交系统
qq2295116502的博客
02-20 777
本系统后端采用 PHP 语言搭配Thinkphp或者 Laravel 框架，PHP 语法简洁且功能强大，Laravel 或者Thinkphp框架能优化代码结构、提升开发效率，高效实现系统核心逻辑与数据库交互。前端运用 Vue 框架，其组件化开发与响应式设计，可打造流畅交互界面。MySQL 数据库稳定可靠，能安全存储海量文档数据,整体而言，这些成熟技术相互配合，能顺利完成系统开发。开发软件: hbuiderx,vscode、Adobe Dreamweaver等。
python基于flask的老年人健康养生系统的设计与实现-vue pycharm django
QQ3166678367的博客
02-28 363
后端框架选择Flask+Django的组合，Flask轻量灵活适合快速开发API接口，Django的ORM和Admin模块可加速数据管理开发。采用Nginx反向代理，uWSGI运行Django，Gunicorn运行Flask。使用Django REST framework构建RESTful API，Flask处理实时数据推送。Flask实时推送使用Socket.IO扩展，健康预警功能通过Celery定时任务实现。单元测试使用pytest框架，接口测试采用Postman自动化测试集。开发语言：Python。
基于python的在线学习交流系统 学习资源推荐系统
QQ402205496的博客
02-24 592
Python语言Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言，其设计具有很强的可读性，相比其他语言经常使用英文关键字，其他语言的一些标点符号，它具有比其他语言更有特色语法结构。Flask框架Flask 是一个轻量级的 Web 框架，使用 Python 语言编写，较其他同类型框架更为灵活、轻便且容易上手，小型团队在短时间内就可以完成功能丰富的中小型网站或 Web 服务的实现。
从无到用写个股票分析APP(一)
weixin_33888907的博客
06-29 1120
前言：再给自己挖个坑吧。我想写个什么东西呢？一：可以浏览当下相关资讯，以及大盘指数实时更新。二：添加自选股票，可以查看该股票的走势图，相关资讯以及基本数据。三：通过 server 端定义相关指标及常用策略，手机上可以直接添加已定义的技术指标及策略用以组合，然后在在 server 端得到结果，手机端查看。项目地址：https://github.com/youerning/pstock所用技术：● n...
python 使用flask-socketio
vincent_duan的专栏
05-29 2217
安装flask-socketio pip install flask-socketio 服务端 from flask import Flask, render_template from flask_socketio import SocketIO, emit app = Flask(__name__) app.config['SECRET_KEY'] = 'secret_key' socketio = SocketIO() socketio.init_app(app, cors_allowed_or
数据可视化——flask简单使用
日常bug
04-14 6618
文章目录前言一、Flask是什么？- **常用扩展包**- **基本模式**二、Flask基础使用1.引入库2.路由解析新建项目默认代码如下：修改Debug模式通过访问路径，获取用户的参数返回给用户渲染后的网页文件向页面传参表单总结 前言 爬取到的数据不能直观的知道得到了什么数据，能用什么方法将数据分析并进行可视化？ 提示：以下是本篇文章正文内容，下面案例可供参考 一、Flask是什么？ Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模
Python使用总结之Flask-SocketIO介绍
载_酒i
08-30 1792
Python使用总结之Flask-SocketIO介绍 一、Flask-SocketIO简介 Flask-SocketIO 是一个基于 Flask 的扩展库，用于在 Flask 应用中实现 WebSocket 通信。WebSocket 是一种双向通信协议，允许服务器和客户端之间在不重新建立连接的情况下进行实时数据交换。这种能力使得 WebSocket 非常适合用于构建实时聊天应用、在线游戏、实时数据推送等需要高频率数据传输的应用。 Flask-SocketIO 通过集成了几个底层库，如 gevent、e
Python Socketio 介绍
weixin_47420447的博客
01-16 4673
是一个Python库，用于处理实时网络通信，它实现了Socket.IO协议。Socket.IO是一个JavaScript库，用于实时、双向和基于事件的通信。它在浏览器和服务器之间建立一个持久的连接，允许它们进行实时通信。库中的一个类，用于创建一个Socket.IO客户端。这个客户端可以连接到一个Socket.IO服务器，并与其进行实时通信。: 这个方法用于连接到一个Socket.IO服务器。当客户端收到指定的事件时，它会调用相应的事件处理器。: 这个方法用于发送一个事件到服务器。的事件，然后断开连接。
flask-socket的实践
m0_57057282的博客
06-24 1143
首先要在app文件夹下建一个extensions.py文件，是为了解决在run.py和init.py里面循环引入socket的问题。1）TCP在真正的读写操作之前，server与client之间必须建立一个连接，然后后端接受前端传的消息并且调用对应的方法传参，再将结果传给前端。当读写操作完成后，双方不再需要这个连接时它们可以释放这个连接，所以说每个连接的建立都是需要资源消耗和时间消耗的。连接的建立通过三次握手，释放则需要四次握手，2）短连接就是我们平时登陆注册，建立的连接。主要就是前端点击发送按钮触发。
Python 基于 Flask 框架实现 Websocket 实时通信详细教程（待更新）
热门推荐
唤醒手腕
06-11 3万+
Websocket 和 Http WebSocket 是 HTML5 出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算） 首先HTTP有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个HTTP请求合并为一个，但是 Websocket 其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解： 有交集，但是并不是全部 GET /cha
flask manage port_Python加Flask实现简单全双工在线客服系统！解放双手咯！
weixin_39718890的博客
11-30 333
Socket.IO 就是一个封装了 Websocket、基于 Node 的 JavaScript 框架，包含 client 的 JavaScript 和 server 的 Node(现在也支持python,go lang等语言)。其屏蔽了所有底层细节，让顶层调用非常简单，另外，Socket.IO 还有一个非常重要的好处。其不仅支持 WebSocket，还支持许多种轮询机制以及其他实时通信...
Python项目开发：Flask基于Python的天气数据可视化平台
QQ1694456187的博客
09-10 3228
随着社会多元化的不断发展，天气数据问题不可被简单的理解为是科学问题，更多的是环境问题，可以直接影响到人民的日常生活，甚至对一个国家的政治经济带来影响，由此可见，天气预测是一项非常重要的行业。基于此，我们就需要开发一个可视化的、综合的、方便人们查看的项目。基于Python的天气数据可视化设计与实现，通过使用基于Python的网络爬虫技术,能在短时内提取有价值的信息数据。
Python设计Flask基于Python的天气数据可视化平台
q_q1262330535的博客
10-14 1600
天气变幻无常，影响着我们生活的方方面面，应用天气预报信息可以及时了解天气的趋势，给人们的工作、生活等带来便利，也可以为我们为未来的事情做安排和打算，所以一个精准的、易读的、直观的天气信息对我们个人、国家来说都很重要。气象网站中有大量的多维度气象数据信息,供社会各行业作为参考研判的依据,Python作为当前数据分析领域最为流行的语言,具有丰富和强大的库.为数据分析提供大量函数，通过利用Python程序对气象网站大量的气象信息进行分析,可以挖掘出关于气象气候演变的规律信息,为气象预报提供更丰富的参考依据。
使用Python 打造实时聊天应用：使用Flask和SocketIO的终极指南
m0_74972192的博客
08-06 2917
这篇博客展示了如何使用Flask和Flask-SocketIO构建一个简单的实时聊天应用。应用支持WebSocket通信，能够存储和广播聊天消息。好的，让我们一步一步来解析这个代码片段，并给出相关的扩展和说明。导入库和初始化应用 Flask: 一个轻量级的Web框架，用于构建Web应用。 Flask-SocketIO: 一个扩展，允许Flask应用支持WebSocket。 os: 提供了一种便携式的方式使用操作系统相关的功能。 app.config[‘SECRET_KEY’]: 设置Fla
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值