如何实现tornado后端给echart图实时传递数据？

1. 项目架构

前端：bootstap
数据可视化：echart中的share dataset图型
后端：tornado
数据库：mongodb

2. 问题：

想要实现从mongodb数据库实时采集数据，传给前端的echart。
请教，前端怎么接数据，后端通过什么传数据
具体怎么实现不太会

3. 代码

html页面代码test.html（静态有数据）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="{{static_url('js/echarts.min.js')}}"></script>
    </head>

    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 1400px;height:700px;"></div>
        <script type="text/javascript">
        <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                                var option;
                                setTimeout(function () {

                                    option = {
                                        legend: {},
                                        tooltip: {
                                        trigger: 'axis',
                                        showContent: false
                                    },
                                    dataset: {
                                        source: [
                                            ['product', '2019-11', '2019-12', '2020-01' ],
                                            ['ftp', 86, 31, 28],
                                            ['http', 15, 19, 7],
                                            ['ssh', 24, 67, 18],
                                            ['telnet', 65, 67, 0],
                                            ['portscan', 56, 28, 28],
                                            ['mysql', 25, 37, 27],
                                            ['git', 1, 2, 11],
                                            ['ntp', 3, 0, 0],
                                            ['redis', 15, 2, 0],
                                            ['tcpbanner', 3, 1, 0],
                                            ['vnc', 15, 19, 0],
                                            ['rdp', 7, 6, 0],
                                            ['snmp', 31, 15, 7],
                                            ['sip', 4, 0, 0, ],
                                            ['mssql', 27, 10, 0, ],
                                            ['httpproxy', 14, 11, 0],


                                        ]
                                    },
                                    xAxis: {type: 'category'},
                                    yAxis: {gridIndex: 0},
                                    grid: {top: '55%'},
                                    series: [
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                                        {type: 'line', smooth: true, seriesLayoutBy: 'row'},

                                        {
                                            type: 'pie',
                                            id: 'pie',
                                            radius: '30%',
                                            center: ['50%', '30%'],
                                            label: {
                                                formatter: '{b}: {@2012} ({d}%)'
                                            },
                                            encode: {
                                                itemName: 'product',
                                                value: '2012',
                                                tooltip: '2012'
                                            }
                                        }
                                    ]
                                };

                                myChart.on('updateAxisPointer', function (event) {
                                    var xAxisInfo = event.axesInfo[0];
                                    if (xAxisInfo) {
                                        var dimension = xAxisInfo.value + 1;
                                        myChart.setOption({
                                            series: {
                                                id: 'pie',
                                                label: {
                                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                                },
                                                encode: {
                                                    value: dimension,
                                                    tooltip: dimension
                                                }
                                            }
                                        });
                                    }
                                });

                                myChart.setOption(option);

                            });
                                myChart.setOption(option);
        </script>
    </body>
</html>

4. test.html显示效果图

图片说明

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

console.log( ) 2020-04-09 15:36

关注

隔段时间请求数据，请求成功更新数据并刷新

myChart.setOption(option);
window.onresize = function(){
    myChart.resize();
    myChart1.resize();    //若有多个图表变动，可多写

}
$.ajax({
   url: 'http://www.',
   type: 'post',
   dataType:'json',
   contentType: 'application/json',
   async:true,
   data: JSON.stringify({

   }),
   success:function(data){
       console.log(data)
       var data1=[]
       var data2=[]
       for(var i=0;i<data.list.length;i++){
           data1[i]=data.list[i].name
           data2[i]=data.list[i].weight
       }
    myChart.setOption({
            xAxis: {
                data: data1
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '回收量',
                data: data2
            }]
        });
   }

});

报告相同问题？

关注问题

Python3.7的Tornado框架，调用HTTPClient获取网页信息，控制台为什么会报乱码？ python tornado
2020-08-21 10:25

回答 2 已采纳 ``` print(postRequest(request).decode('utf-8')) ``` https://www.cnblogs.com/xiaoqi/p/5101795.
python中tornado的使用问题 linux python tornado 服务器
2018-05-07 13:41

回答 2 已采纳关闭xshell后python进程也自动关闭了，如果你想一直开启的话需要额外的配置，最简单的可以用linux的后台运行命令nohup，或者使用如uwsgi工具
python3如何直接上传网络文件，而不需保存？ django flask list python tornado
2019-09-27 10:37

回答 1 已采纳可以，files = {} 那里第二个参数，直接写base64.b64decode(str_b64)
举例讲解Python的Tornado框架实现数据可视化的教程
2020-12-24 08:45

Python语言中，读取Excel的扩展工具。可以实现指定表单、指定单元格的读取。使用前须安装。下载地址：https://pypi.python.org/pypi/xlrd 解压后cd到解压目录，执行 python setup.py install 即可 ...
python中使用tornado 中post get 请求报错500 ajax tornado
2018-05-17 14:18

回答 3 已采纳 from app.view.view_xxm.mysqlfuntion import selectnav 说明有一类或方法叫selectnav class selectnav(tornado.
python树莓派运行代码区报错 python tornado 嵌入式硬件
2022-02-14 11:32

回答 2 已采纳 class IndexHandler(tornado.web.RequestHandler): def get(self): self.render("index.html")
每日一问 | 学习 Python 时，你最想解决的问题是？ django flask python tornado virtualenv
2020-12-18 09:08

回答 2 已采纳准确来说学习开发是为了赚更多钱
Pythonweb后端开发框架Django、Flask、Tornado
2021-02-24 09:11

深入学习Python，用Django做Web后端开发现在Python的用途愈来愈广，服务器、Web、游戏、爬虫、数据分析以及人工智能学习之路还很长技术之路不能回头陷进去就出不来就跟恋爱一般，学习中、项目中印象笔记、有道云笔记...
python树莓派运行代码报错 python tornado 嵌入式硬件有问必答
2022-02-14 11:45

回答 3 已采纳这块代码的归属是哪个方法？层次错啦？
在win的VS code上运行tornado项目报路径错误 python tornado
2019-04-30 10:17

回答 1 已采纳电脑上根据路径F:\\xvni_hj\\tornado_web\\test_web\\user\\templates\\index.html 找一下文件存在不存在，是否路径有问题
数据分析求解怎么做 list python tornado
2021-07-02 17:51

回答 1 已采纳 1、是不真实存在的2、Series和DataFrame3、不对，[0 1 2 3]4、对5、对
Python的Tornado框架实现图片上传及图片大小修改功能
2020-12-24 01:55

图片的上传上传图片使用了表单提交, 下面是html部分, enctype=”multipart/form-data”表示不对字节进行编码，上传文件类型时需指定. input标签的 type=”file” 指定上传类型. <form action="/" enctype=...
python tornado 实现websocket 实时消息传递
2019-10-31 14:47

INSNNP_LZM的博客大家都知道股票交易所和聊天类软件都是实时消息传递的建一个 tornado_websocket.py # -*- coding: utf-8 -*- from __future__ import unicode_literals, print_function from datetime import datetime import os ...
python基于Tornado实现，系统核心调度，可分布式扩展
2023-04-21 13:01

python基于Tornado实现，系统核心调度，可分布式扩展仅供学习交流及一切非盈利用途，禁止商用。
使用Python的Tornado框架实现一个Web端图书展示页面
2020-12-25 09:12

首先，为什么选择Tornado： 1.高性能的网络库，这可以和gevent,twisted,libevent等做对。提供了异步io支持，超时事件处理，在此基础上提供了tcpserver,httpclient，尤其是curlhttpclient, 在现有http客户端中肯定排...
没有解决我的问题, 去提问

悬赏问题

¥20 idea运行测试代码报错问题
¥15 网络监控：网络故障告警通知
¥15 django项目运行报编码错误
¥15 请问这个是什么意思？
¥15 STM32驱动继电器
¥15 Windows server update services
¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏
¥15 模糊pid与pid仿真结果几乎一样
¥15 java的GUI的运用
¥15 我想付费需要AKM公司DSP开发资料及相关开发。

码龄粉丝数原力等级 --

如何实现tornado后端给echart图实时传递数据？

1. 项目架构

2. 问题：

3. 代码

4. test.html显示效果图

1条回答默认最新

码龄粉丝数原力等级 --

悬赏问题

如何实现tornado后端给echart图实时传递数据？

1. 项目架构

2. 问题：

3. 代码

4. test.html显示效果图

1条回答 默认 最新

悬赏问题

1条回答默认最新