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!


相关文章
|
8天前
|
存储 机器学习/深度学习 数据处理
NumPy:从初识到实战,探索Python科学计算的无限可能
NumPy:从初识到实战,探索Python科学计算的无限可能
34 0
|
10天前
|
中间件 数据库连接 API
Python面试:FastAPI框架原理与实战
【4月更文挑战第18天】FastAPI是受欢迎的高性能Python Web框架,以其简洁的API设计、强大的类型提示和优秀的文档生成能力著称。本文将探讨FastAPI面试中的常见问题,包括路由、响应对象、Pydantic模型、数据库操作、中间件和错误处理。同时,还会指出一些易错点,如类型提示不准确、依赖注入误解,并提供实战代码示例。通过理解和实践FastAPI,可以在面试中展示出色的Web开发技能。
23 1
|
5天前
|
人工智能 安全 Java
Python 多线程编程实战:threading 模块的最佳实践
Python 多线程编程实战:threading 模块的最佳实践
121 5
|
7天前
|
人工智能 Python
【AI大模型应用开发】【LangChain系列】实战案例1:用LangChain写Python代码并执行来生成答案
【AI大模型应用开发】【LangChain系列】实战案例1:用LangChain写Python代码并执行来生成答案
13 0
|
2天前
|
网络协议 算法 网络架构
Python网络编程之udp编程、黏包以及解决方案、tcpserver
Python网络编程之udp编程、黏包以及解决方案、tcpserver
|
2天前
|
机器学习/深度学习 数据挖掘 算法框架/工具
Python:编程的艺术与魅力
Python:编程的艺术与魅力
11 3
|
5天前
|
机器学习/深度学习 数据挖掘 API
pymc,一个灵活的的 Python 概率编程库!
pymc,一个灵活的的 Python 概率编程库!
13 1
|
5天前
|
人工智能 算法 调度
uvloop,一个强大的 Python 异步IO编程库!
uvloop,一个强大的 Python 异步IO编程库!
18 2
|
6天前
|
机器学习/深度学习 人工智能 数据可视化
Python:探索编程之美
Python:探索编程之美
9 0
|
6天前
|
机器学习/深度学习 人工智能 数据处理
Python编程的魅力与实践
Python编程的魅力与实践