Flask+html+axios+echarts 简单实现前后端数据数字可视化大屏

Wynl590

已于 2023-12-03 09:17:22 修改

阅读量821

点赞数 15

文章标签： flask echarts python html 前端后端

于 2023-12-03 09:16:36 首次发布

本文链接：https://blog.csdn.net/weixin_64559691/article/details/134760847

版权

将前两篇相结合。

后端：通过python（爬虫）处理数据作为数据源，用falsk作为后端接口

前端：通过html+echarts作页面展示，用axios作为前端请求脚手架

即可完成一个简单的数字可视化大屏。

后端——

数据源可通过python爬虫读取等，本示例通过简单随机数作为后端数据源，并用flask搭建接口。

后端接口代码：

from flask import Flask
from flask_cors import CORS
import random

app = Flask(__name__)
app.config.from_object(__name__)
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 1

CORS(app, resources={r'/*': {'origins': '*'}})

data_list = [random.randint(0, 300) for i in range(7)]


@app.route('/', methods=["GET"])
def get():
    return data_list;


if __name__ == '__main__':
    app.run(port=8000)

前端——

通过简单html+echarts页面结合axios请求生成大屏

web项目结构：

前端页面代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入echarts.js-->
    <script src="js/echarts.js"></script>
    <!--引入 axios-->
    <script type="text/javascript" src="js/axios.js"></script>
</head>

<body>
    <!-- style内容进行了flex布局,可根据需要自行修改 -->
    <div style="display: flex;justify-content:space-around;">
        <div id="main" style="width: 1000px;height:600px;"></div>
    </div>
    <script>
        //通过axios进行异步请求，渲染操作需在axios内执行
        axios.get("http://127.0.0.1:8000").then(response => {
            const mydata = response.data
            console.log(mydata)

            //初始化Echarts图表
            var myChart = echarts.init(document.getElementById('main'));

            //以下添加图表
            var option = {
                //图表代码
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: mydata,
                        type: 'line'
                    }
                ]
            };

            //实例化的Echarts图表，在DOM中渲染图表显示
            myChart.setOption(option);
        })
    </script>

</body>

</html>

即可打开页面查看效果：

Wynl590

关注

15
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
Flask+html+axios+echarts 简单实现前后端数据数字可视化大屏

数据源可通过python爬虫读取等，本示例通过简单随机数作为后端数据源，并用flask搭建接口。前端：通过html+echarts作页面展示，用axios作为前端请求脚手架。后端：通过python（爬虫）处理数据作为数据源，用falsk作为后端接口。通过简单html+echarts页面结合axios请求生成大屏。即可完成一个简单的数字可视化大屏。
复制链接

扫一扫