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
    评论
1. 部署环境 首先需要在服务器上安装Python环境和Flask框架,可以使用以下命令: ``` sudo apt-get update sudo apt-get install python3-pip sudo pip3 install flask ``` 2. 获取代码 可以使用Git将代码克隆到服务器上: ``` git clone https://github.com/yourusername/yourproject.git ``` 3. 安装依赖 进入项目目录,使用以下命令安装项目所需的依赖: ``` cd yourproject pip3 install -r requirements.txt ``` 4. 配置数据库 如果项目需要使用数据库,需要在服务器上安装相应的数据库,并在项目进行配置。这里以MySQL为例,可以使用以下命令安装: ``` sudo apt-get install mysql-server ``` 然后在MySQL创建数据库和用户,并授权: ``` mysql -u root -p CREATE DATABASE yourdatabase; GRANT ALL PRIVILEGES ON yourdatabase.* TO 'youruser'@'localhost' IDENTIFIED BY 'yourpassword'; ``` 在项目配置数据库连接信息: ``` # config.py SQLALCHEMY_DATABASE_URI = 'mysql://youruser:yourpassword@localhost/yourdatabase' ``` 5. 配置Nginx 可以使用Nginx作为反向代理服务器,将Flask应用部署在80端口上。首先需要安装Nginx: ``` sudo apt-get install nginx ``` 然后创建一个Nginx配置文件: ``` sudo nano /etc/nginx/sites-available/yourproject ``` 在文件添加以下内容,注意将其的yourdomain.com和yourproject替换为实际的域名和项目名称: ``` server { listen 80; server_name yourdomain.com; location / { proxy_pass http://127.0.0.1:5000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` 保存并退出文件,然后创建一个符号链接: ``` sudo ln -s /etc/nginx/sites-available/yourproject /etc/nginx/sites-enabled/ ``` 最后重启Nginx以使配置生效: ``` sudo systemctl restart nginx ``` 6. 启动应用 在项目目录运行以下命令启动Flask应用: ``` export FLASK_APP=yourproject export FLASK_ENV=production flask run --host=127.0.0.1 --port=5000 ``` 如果需要在后台运行应用,可以使用nohup命令: ``` nohup flask run --host=127.0.0.1 --port=5000 & ``` 至此,Python Flask Echarts的数据可视化项目已经成功部署。可以在浏览器访问域名或IP地址,查看应用是否正常运行。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值