flask前后端分离 将数据传给前端 前端怎么使用pyechart
时间: 2024-04-17 16:24:15 浏览: 14
在使用 Flask 进行前后端分离的情况下,可以通过接口将数据从后端传递给前端,然后在前端使用 pyecharts 进行数据可视化。
下面是一个简单的示例代码,展示了如何将数据从后端传递到前端,并在前端使用 pyecharts 进行柱状图的绘制:
后端 Flask 代码:
```python
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/data')
def data():
# 模拟后端获取的数据
data = {'category': ['A', 'B', 'C'], 'value': [10, 20, 30]}
return jsonify(data)
if __name__ == '__main__':
app.run()
```
前端 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Pyecharts Demo</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height:400px;"></div>
<script>
fetch('/data')
.then(response => response.json())
.then(data => {
const chart = echarts.init(document.getElementById('chart'));
const option = {
xAxis: {
type: 'category',
data: data.category
},
yAxis: {
type: 'value'
},
series: [{
data: data.value,
type: 'bar'
}]
};
chart.setOption(option);
});
</script>
</body>
</html>
```
这个示例中,后端使用 Flask 创建了一个 `/data` 的接口,通过 `jsonify` 方法将数据以 JSON 格式返回给前端。前端使用 JavaScript 的 `fetch` 方法异步请求数据,然后使用 pyecharts 在柱状图中展示数据。
请注意,这只是一个简单的示例,实际项目中可能需要根据具体需求进行适当修改和扩展。希望可以帮助到你!