Python Flask Echarts数据可视化图表实战晋级笔记(1)HTML页面渲染与参数传递

简介: Python Flask Echarts数据可视化图表实战晋级笔记(1)HTML页面渲染与参数传递

2021年9月,一直在Python Django Echarts数据化中学习,但是随着不断的学习,发现Django是一个太重量级别的web框架了,其默认的架构、语法、urls映射以及数据库对接、API的开发,都是一个极其繁琐的学习过程。

对于漏刻有时数据可视化大屏的开发来说,如何快速有效的实现大屏,让更多的初学者入门,才是关键。在一周的flask学习和研究之后,进而决定,以flask作为漏刻有时Python后端的主要开发框架。


  1. python httpserver自带模块能解决web服务器,即可实现对json、excle、js等简单的数据文件的访问;
  2. python Flask ,轻量级的web框架,能解决mysql数据库数据储存和读取以及RESTFUL API的定制开发;


Flask后端

# -*- coding: UTF-8 -*-  
# @Time :2021-09-10 21:37 
# @File :app.py
# @Author : Poleung
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
def index():
    data_name = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    data_list = [150, 230, 224, 218, 135, 147, 260]
    return render_template('index.html', data_name=data_name, data_list=data_list)
if __name__ == '__main__':
    app.run("127.0.0.1", "8800", debug=True)


HTML模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Python Flask Echarts折线图的实现方法</title>
    <!--静态文件引入-->
    <link rel="stylesheet" href="static/css/common.css">
    <script src="static/js/echarts.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    //调用数据;
    dataName={{ data_name | safe}};
    dataList={{ data_list }};
    drawLine(dataName, dataList);
    //封装折线图;
    function drawLine(dataName, dataList) {
        let myChart = echarts.init(document.getElementById("container"));
        let option = {
            xAxis: {
                type: 'category',
                data: dataName
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataList,
                type: 'line'
            }]
        };
        //自适应浏览器;
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }
</script>
</body>
</html>

lockdatav Done!


相关文章
|
18天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
26天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
42 2
|
27天前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
104 1
|
10天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
28 0
|
2月前
|
搜索推荐 Python
Leecode 101刷题笔记之第五章:和你一起你轻松刷题(Python)
这篇文章是关于LeetCode第101章的刷题笔记,涵盖了多种排序算法的Python实现和两个中等难度的编程练习题的解法。
23 3
|
2月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
64 0
|
4月前
|
搜索推荐 数据可视化 数据挖掘
基于Python flask框架的招聘数据分析推荐系统,有数据推荐和可视化功能
本文介绍了一个基于Python Flask框架的招聘数据分析推荐系统,该系统具备用户登录注册、数据库连接查询、首页推荐、职位与城市分析、公司性质分析、职位需求分析、用户信息管理以及数据可视化等功能,旨在提高求职者的就业效率和满意度,同时为企业提供人才匹配和招聘效果评估手段。
109 0
基于Python flask框架的招聘数据分析推荐系统,有数据推荐和可视化功能
|
2月前
|
JSON 测试技术 数据库
Python的Flask框架
【10月更文挑战第4天】Python的Flask框架
|
2月前
|
存储 SQL 数据库
使用Python和Flask框架创建Web应用
【10月更文挑战第3天】使用Python和Flask框架创建Web应用
31 1
|
6月前
|
关系型数据库 MySQL 数据库
如何使用Python的Flask框架来构建一个简单的Web应用
如何使用Python的Flask框架来构建一个简单的Web应用
94 0