flask+echarts+jinja项目
时间: 2023-06-12 19:06:09 浏览: 127
Flask 是一个 Python Web 框架,Echarts 是一个基于 JavaScript 的可视化库,Jinja 是 Flask 内置的模板引擎。将它们结合起来,可以开发一个 Web 应用程序,使用 Echarts 展示数据。
以下是一个简单的 Flask+Echarts+Jinja 项目的示例:
1. 安装 Flask 和 Echarts
```python
pip install flask
pip install pyecharts
```
2. 创建 Flask 应用程序
```python
from flask import Flask, render_template
from pyecharts import options as opts
from pyecharts.charts import Bar
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/charts")
def charts():
bar = (
Bar()
.add_xaxis(["A", "B", "C", "D", "E"])
.add_yaxis("数据", [10, 20, 30, 40, 50])
.set_global_opts(title_opts=opts.TitleOpts(title="数据展示"))
)
return bar.dump_options_with_quotes()
if __name__ == "__main__":
app.run()
```
3. 创建模板文件 `index.html`
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask+Echarts+Jinja</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<div id="bar" style="width: 600px;height:400px;"></div>
<script>
$(function () {
$.ajax({
type: "GET",
url: "{{ url_for('charts') }}",
dataType: "json",
success: function (data) {
var chart = echarts.init(document.getElementById('bar'));
chart.setOption(JSON.parse(data));
}
});
});
</script>
</body>
</html>
```
4. 运行应用程序
```python
python app.py
```
5. 访问应用程序
在浏览器中访问 `http://localhost:5000/`,即可看到数据展示的页面。
以上就是一个简单的 Flask+Echarts+Jinja 项目的示例。你可以根据自己的需求进行修改和扩展。
阅读全文