flask+echarts 初学python可视化demo1

最新推荐文章于 2024-07-30 17:23:09 发布

一口大芒果

最新推荐文章于 2024-07-30 17:23:09 发布

阅读量1k

点赞数

分类专栏：练习文章标签： python

本文链接：https://blog.csdn.net/weixin_43709875/article/details/123698844

版权

练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.pip install flask +request 两大库

2.建立templates，放跳转的html
在这里插入图片描述
3.flask.py
——3.1创建app
——3.2 准备函数处理浏览器的请求
——3.3 运行app

from flask import Flask, render_template,request
import pandas as pd

#1.创建app
#2.准备函数 处理浏览器的发送的请求
#3.运行app
app = Flask(__name__)

#@app.route("/")
#demo1传数据给网页
# def index():
#     s = "你好zzs！"
#     lst = {"a","b","c"}
#     return render_template("helloword.html", s=s, lst=lst)

#demo2从网页接收数据
# @app.route("/")
# def index():
#     return render_template("login.html")
#
# @app.route("/login",methods=['post'])
# def login():
#     username= request.form.get("username")
#     password=request.form.get("pwd")
#     if username == "zzs" and password == "123":
#         return render_template("login.html",msg="登录成功")
#     else:
#         return render_template("login.html", msg="登录失败")

#demo3 echarts可视化
@app.route('/')
def index():
    data=[{'value':123,'name':'坐在'},{'value':456,'name':'阁楼'},{'value':200,'name':'吃'},{'value':354,'name':'芒果'}]
    return render_template("visual.html",data=data)

if __name__ == '__main__':
    app.run()

4.简单传输 hello.html


```python
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#">{{s}}</a>
<hr/>
{{lst}}
<hr/>
{% for item in lst%}
传送数:{{item}}
{% endfor %}
</body>
</html>

5.简单验证获取页面数据 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
</head>
<body>
  <form action="login" method="post">
    用户名<input type="text" name="username">
    密码<input type="password" name="pwd">
    <input type="submit" value="登录">
      {{msg}}
  </form>
</body>
</html>

6.简单echarts可视化 visual.html
——从echarts网站上看样式、复制样式代码
——sricpt引入相应链接，可从bootcdn中找
——data数据改为自己的。
注意： 去引号可以用 data|tojson

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入echarts-->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
</head>
<body>
echarts展示
<div id="main" style="width: 600px;height: 600px;background: pink">
    <script>
        var ma = echarts.init(document.getElementById("main"))
        //配置echarts

        var option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data:{{data|tojson}}
    }
  ]
};

        ma.setOption(option)
    </script>
</div>
</body>
</html>

在这里插入图片描述

一口大芒果

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
flask+echarts 初学python可视化demo1

1.pip install flask +request 两大库2.建立templates，放跳转的html3.flask.py——3.1创建app——3.2 准备函数处理浏览器的请求——3.3 运行appfrom flask import Flask, render_template,requestimport pandas as pd#1.创建app#2.准备函数处理浏览器的发送的请求#3.运行appapp = Flask(__name__)#@app.route("/
复制链接

扫一扫

专栏目录