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!


相关文章
|
1月前
|
数据采集 Web App开发 JavaScript
Python爬虫解析动态网页:从渲染到数据提取
Python爬虫解析动态网页:从渲染到数据提取
|
2月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
10月前
|
Python
以下是一些常用的图表类型及其Python代码示例,使用Matplotlib和Seaborn库。
以下是一些常用的图表类型及其Python代码示例,使用Matplotlib和Seaborn库。
|
7月前
|
数据可视化 Python
以下是一些常用的图表类型及其Python代码示例,使用Matplotlib和Seaborn库。
通过这些思维导图和分析说明表,您可以更直观地理解和选择适合的数据可视化图表类型,帮助更有效地展示和分析数据。
258 8
|
8月前
|
数据可视化 JavaScript 前端开发
Python中交互式Matplotlib图表
【10月更文挑战第20天】Matplotlib 是 Python 中最常用的绘图库之一,但默认生成的图表是静态的。通过结合 mpld3 库,可以轻松创建交互式图表,提升数据可视化效果。本文介绍了如何使用 mpld3 在 Python 中创建交互式散点图、折线图和直方图,并提供了详细的代码示例和安装方法。通过添加插件,可以实现缩放、平移和鼠标悬停显示数据标签等交互功能。希望本文能帮助读者掌握这一强大工具。
247 5
|
9月前
|
数据可视化 数据挖掘 Python
Seaborn 库创建吸引人的统计图表
【10月更文挑战第11天】本文介绍了如何使用 Seaborn 库创建多种统计图表,包括散点图、箱线图、直方图、线性回归图、热力图等。通过具体示例和代码,展示了 Seaborn 在数据可视化中的强大功能和灵活性,帮助读者更好地理解和应用这一工具。
142 3
|
10月前
|
数据可视化 Python
Python中的数据可视化:使用Matplotlib绘制图表
【9月更文挑战第11天】在这篇文章中,我们将探索如何使用Python的Matplotlib库来创建各种数据可视化。我们将从基本的折线图开始,然后逐步介绍如何添加更多的功能和样式,以使您的图表更具吸引力和信息量。无论您是数据科学家、分析师还是任何需要将数据转化为视觉形式的专业人士,这篇文章都将为您提供一个坚实的起点。让我们一起潜入数据的海洋,用视觉的力量揭示其背后的故事。
143 17
|
11月前
|
数据采集 自然语言处理 数据可视化
优秀python系统案例】基于python Flask的电影票房数据爬取与可视化系统的设计与实现
本文介绍了一个基于Python Flask框架开发的电影票房数据爬取与可视化系统,该系统利用网络爬虫技术从豆瓣电影网站抓取数据,通过Python进行数据处理和分析,并采用ECharts等库实现数据的可视化展示,为电影行业从业者提供决策支持。
760 2
优秀python系统案例】基于python Flask的电影票房数据爬取与可视化系统的设计与实现
|
11月前
|
数据可视化 前端开发 数据挖掘
【优秀python大屏】基于python flask的广州历史天气数据应用与可视化大屏
本文介绍了一个基于Python Flask框架的广州历史天气数据应用与可视化大屏系统,该系统通过数据采集、处理、分析和可视化技术,提供了丰富的气象数据展示和决策支持,帮助用户快速了解和应对气象变化。
208 3
【优秀python大屏】基于python flask的广州历史天气数据应用与可视化大屏
|
10月前
|
数据挖掘 数据处理 Python
python如何高效处理excel图表案例分享
python如何高效处理excel图表案例分享
150 2

热门文章

最新文章

推荐镜像

更多