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!


相关文章
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
1110 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
搜索推荐 数据可视化 数据挖掘
基于Python flask框架的招聘数据分析推荐系统,有数据推荐和可视化功能
本文介绍了一个基于Python Flask框架的招聘数据分析推荐系统,该系统具备用户登录注册、数据库连接查询、首页推荐、职位与城市分析、公司性质分析、职位需求分析、用户信息管理以及数据可视化等功能,旨在提高求职者的就业效率和满意度,同时为企业提供人才匹配和招聘效果评估手段。
910 0
基于Python flask框架的招聘数据分析推荐系统,有数据推荐和可视化功能
|
监控 前端开发 API
实战指南:使用Python Flask与WebSocket实现高效的前后端分离实时系统
【7月更文挑战第18天】构建实时Web应用,如聊天室,可借助Python的Flask和WebSocket。安装Flask及Flask-SocketIO库,创建Flask应用,处理WebSocket事件。前端模板通过Socket.IO库连接服务器,发送和接收消息。运行应用,实现实时通信。此示例展现了Flask结合WebSocket实现前后端实时交互的能力。
1996 3
|
数据可视化 前端开发 数据挖掘
【优秀python大屏】基于python flask的广州历史天气数据应用与可视化大屏
本文介绍了一个基于Python Flask框架的广州历史天气数据应用与可视化大屏系统,该系统通过数据采集、处理、分析和可视化技术,提供了丰富的气象数据展示和决策支持,帮助用户快速了解和应对气象变化。
857 110
【优秀python大屏】基于python flask的广州历史天气数据应用与可视化大屏
|
搜索推荐 前端开发 数据可视化
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
本文介绍了一个基于Python协同过滤算法的旅游景点推荐系统,该系统采用Django框架、MySQL数据库、Bootstrap前端和echarts数据可视化技术,旨在为用户提供个性化的旅游推荐服务,提升用户体验和旅游市场增长。
2348 9
基于Python协同过滤的旅游景点推荐系统,采用Django框架,MySQL数据存储,Bootstrap前端,echarts可视化实现
|
数据采集 自然语言处理 数据可视化
优秀python系统案例】基于python Flask的电影票房数据爬取与可视化系统的设计与实现
本文介绍了一个基于Python Flask框架开发的电影票房数据爬取与可视化系统,该系统利用网络爬虫技术从豆瓣电影网站抓取数据,通过Python进行数据处理和分析,并采用ECharts等库实现数据的可视化展示,为电影行业从业者提供决策支持。
2032 2
优秀python系统案例】基于python Flask的电影票房数据爬取与可视化系统的设计与实现
|
JavaScript
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小,以适应其上级元素大小的变化,并结合使用防抖技术来解决大屏页面上的卡顿问题。
756 5
|
前端开发 数据挖掘 关系型数据库
基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui
本文介绍了一个基于Python的哔哩哔哩数据分析系统,该系统使用Flask框架、MySQL数据库、echarts数据可视化技术和Layui前端框架,旨在提取和分析哔哩哔哩用户行为数据,为平台运营和内容生产提供科学依据。
1485 9
|
机器学习/深度学习 数据采集 数据可视化
【优秀python系统毕设】基于Python flask的气象数据可视化系统设计与实现,有LSTM算法预测气温
本文介绍了一个基于Python Flask框架开发的气象数据可视化系统,该系统集成了数据获取、处理、存储、LSTM算法气温预测以及多种数据可视化功能,旨在提高气象数据的利用价值并推动气象领域的发展。
1952 1
|
数据可视化 算法 前端开发
基于python flask+pyecharts实现的中药数据可视化大屏,实现基于Apriori算法的药品功效关系的关联规则
本文介绍了一个基于Python Flask和Pyecharts实现的中药数据可视化大屏,该系统应用Apriori算法挖掘中药药材与功效之间的关联规则,为中医药学研究提供了数据支持和可视化分析工具。
827 2

推荐镜像

更多