Flask和echart结合常规做法

最新推荐文章于 2024-03-24 17:59:37 发布

你很棒滴

最新推荐文章于 2024-03-24 17:59:37 发布

阅读量895

点赞数 2

分类专栏： Flask和echart数据展示 Selenium

本文链接：https://blog.csdn.net/RayMand168/article/details/116055668

版权

Selenium 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Flask和echart数据展示

2 篇文章 0 订阅

订阅专栏

Flask基本操作

from flask import Flask,render_template,request

app = Flask(__name__)
# 初始化一个路由
@app.route('/')
# /后面跟一个函数名,本机号（127.0.0.1/函数名）
def index():
	data = data.to_dict(orient='records')
	# 把pandas处理后的数据，转换成echart所需要的数据
	lst = [a.b,c]
	return render_template('xxx.html',data=data,lst=lst)
	# 需要先在程序文件夹下创建一个templates文件夹，在里面创建html
	# html界面{{data}}表示接受index里面的数据
	# html界面写for循环，需要{% for item in lst %} 我的列表有什么：{{lst}} {% endfor %}


app.route('/login',methods=['POST'])
# 每创建一个函数都需要写对应的装饰器（路由）
# html界面用的是POST请求，所以需要用POST接受，注意：是列表，POST必须大写
def login():
	user = request.get(user)
	pwd = request.get(pwd)
	# form 传参用request.get
	# 另一种传参的方式是url，用request.args.get()进行接受
	if user == '123456' and pwd =='123456':
		return '登陆成功'
	else:
		return render_template('login.html',msg='登录失败')
	
	
if __name__ = __main__:
	app.run(debug=True)
	# 加入debug后，修改完代码直接刷新（127.0.0.1）界面就可以

html的书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <!-----引入echart------>
  <form action="/login" method="POST">
  # form 用于组合，，action后面的函数用于处理表单，post是隐形提交，get是显形提交
  
    用户名<input type="text" name="user"><br/>
    密码<input type="password" name="pwd"><br/>
    <input type="submit" value="登录"><br/>
    {{msg}}
  </form>
</body>
</html>

与echart的结合

引入echart库，可以去bootcdn网站，寻找min.js结尾的网址，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!---引入echarts--->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 800px;height:700px;blackgroup:pink"></div>
     <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        # 一定要加var，JavaScript定义变量前面一定要加var
        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: '面积模式',
                        type: 'pie',
                        radius: [10, 250    ],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data:{{data|tojson}}
                        # 使Flask与html界面融合
                    }
                ]
            };
         myChart.setOption(option);
         # 启动选中的表格，名字与前面定义的myChart相对应
      </script>
</body>
</html>

参考网址：
https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

你很棒滴

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Flask和echart结合常规做法

Flask基本操作from flask import Flask,render_template,requestapp = Flask(__name__)# 初始化一个路由@app.route('/')# /后面跟一个函数名,本机号（127.0.0.1/函数名）def index(): data = data.to_dict(orient='records') # 把pandas处理后的数据，转换成echart所需要的数据 lst = [a.b,c] return render_tem
复制链接

扫一扫