flask+echarts 初学python可视化demo1

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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值