python aiohttp + echart.js 构成定时刷新加载波形图

最新推荐文章于 2023-12-22 10:01:32 发布

wuhao2048

最新推荐文章于 2023-12-22 10:01:32 发布

阅读量703

点赞数

分类专栏： python 文章标签： python 波形图定时刷新

本文链接：https://blog.csdn.net/wuhao2048/article/details/101770572

版权

python 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前提：想自己搭载一个实时监控峰值的波形图，后端使用python37 aiohttp框架，搭配html和echart.js插件，实现了简单的定时刷新功能，废话不多说，直接上代码(就是个简单demo，代码重复的比较多，勿怪)

1.后台代码

# 三条路由信息
app.add_routes([
    web.get(r"/", wave.wave_html), # 加载html
    web.get(r"/wave/data", wave.wave_data), # 初始数据
    web.get(r"/flush/wave", wave.flush_data), #定时刷新数据
])

2.后台加载html 和模拟传入数据

import random

import aiohttp_jinja2
import logging

from aiohttp import web
from util.util import dictToJson
import datetime
import time

class Wave:
    def __init__(self):
        self.begin_time = None
        self.data = None


    async def wave_html(self, request):
        '''
        加载index.html
        :param request: 
        :return: 
        '''
        return aiohttp_jinja2.render_template('index.html', request, {})


    async def wave_data(self, request):
        '''
        加载初始数据
        :param request: 
        :return: 
        '''
        data = list()

        self.begin_time = datetime.datetime.now()

        for i in range(100):
            l = list()
            self.begin_time = (self.begin_time + datetime.timedelta(seconds=1))
            l.append(self.begin_time.strftime("%Y-%m-%d %H:%M:%S"))
            l.append(random.randint(1, 100))
            data.append(l)

        self.data = data
        logging.info('wave_data [%s] length [%s]', self.data, len(self.data))
        return web.json_response(self.data, dumps=dictToJson)


    async def flush_data(self, request):
        '''
        定时刷新数据
        :param request: 
        :return: 
        '''
        l = list()
        self.begin_time = (self.begin_time + datetime.timedelta(seconds=1))
        l.append(self.begin_time.strftime("%Y-%m-%d %H:%M:%S"))
        l.append(random.randint(1, 100))
        self.data.append(l)

        logging.info('flush data [%s] length [%s]', self.data, len(self.data))

        return web.json_response(self.data, dumps=dictToJson)

3.index.html

这里面引入了 juqery.js 和 echart.js文件

注：echart 可以实现很多辅助数据，例如标注线等等，自行查看

https://www.echartsjs.com/zh/index.html

只是一个div容器，留着放入波形图的，可自定义宽高

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/wave.js"></script>
</head>
<body>

<div id="main" style="width: 100%;height:500px;"></div>

<script>
    
    var myChart = echarts.init(document.getElementById('main'));
    paint_wave(myChart)

</script>
</body>
</html>

4.自定义js文件，封装了两个方法

paint_wave : 页面初始加载部分数据，可根据需求自定义

flush_wave : 定时两秒加载另一函数，并实时刷新波形图效果

注：定时刷新拿数据时，ECharts 是由数据驱动，数据的改变驱动图表展现的改变，拿到新的数据后，只需要通过 setOption 填入数据，无需要考虑数据到底产生了哪些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

function paint_wave(myChart) {
    $.get('/wave/data', function (data) {
        myChart.setOption(option = {
            title: {
                text: '实时波形图'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                data: data.map(function (item) {
                    return item[0];
                })
            },
            yAxis: {
                splitLine: {
                    show: false
                }
            },
            series: {
                name: 'wave_time',
                type: 'line',
                data: data.map(function (item) {
                    return item[1];
                }),
                markLine: {
                    silent: true,
                    data: [{
                        yAxis: 50
                    }, {
                        yAxis: 100
                    }, {
                        yAxis: 150
                    }, {
                        yAxis: 200
                    }, {
                        yAxis: 300
                    }]
                }
            }
        });
    });
    setInterval(flush_wave, 2000, myChart) # 定时方法
}

function flush_wave(myChart) {
    console.log('myChart', myChart);
    $.ajax({
        type:"get",
        datatype:"json",
        url:"/flush/wave",
        success:function (data) {
            myChart.setOption({
                xAxis: {
                    data: data.map(function (item) {
                        return item[0];
                    })
                },
                series: {
                    name: 'wave_time',
                    type: 'line',
                    data: data.map(function (item) {
                        return item[1];
                    }),
                }
            });
            console.log(myChart.getOption());
        }
    })
}

5.效果图

ps: 不会博客发动图，原图效果是，每两秒在最后面加载一个新的节点并连线。

wuhao2048

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
python aiohttp + echart.js 构成定时刷新加载波形图

前提：想自己搭载一个实时监控峰值的波形图，后端使用python37 aiohttp框架，搭配html和echart.js插件，实现了简单的定时刷新功能，废话不多说，直接上代码(就是个简单demo，代码重复的比较多，勿怪)1.后台代码# 三条路由信息app.add_routes([ web.get(r"/", wave.wave_html), # 加载html web.g...
复制链接

扫一扫