python+flask+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文件

             

             

             

                 

                 

             

             

             

              wbcbwjcwcw

             

             

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

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

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

                  });

             

             

              【注意】

              //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文件，可以链接网络上的也可以使用本地的

                        

                        

                        

                        

                        

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

                  

              然后在script标签内添加echarts

                     这是一个柱状图

                            

                             // 基于准备好的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);

                    

                        

                     其中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文件中添加一个用来表示数字的标签

             

                          1234566789

                     

       然后在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

                         };

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