[Python知识库] Python Flask Echarts数据可视化图表实战晋级笔记(1)

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> Python知识库 -> Python Flask Echarts数据可视化图表实战晋级笔记(1) -> 正文阅读

[Python知识库]Python Flask Echarts数据可视化图表实战晋级笔记(1)

2021年9月，一直在Python Django Echarts数据化中学习，但是随着不断的学习，发现Django是一个太重量级别的web框架了，其默认的架构、语法、urls映射以及数据库对接、API的开发，都是一个极其繁琐的学习过程。
对于漏刻有时数据可视化大屏的开发来说，如何快速有效的实现大屏，让更多的初学者入门，才是关键。在一周的flask学习和研究之后，进而决定，以flask作为漏刻有时Python后端的主要开发框架。

python httpserver自带模块能解决web服务器，即可实现对json、excle、js等简单的数据文件的访问；
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>