@app.route('/echarts',methods=['GET']) def echarts(): if request.method == 'GET': query_result = D_huaxue.query.filter() data = [] context = { 'query_result': query_result, 'd_huaxuedata': data } return render_template('地图2.html', **context),{ name:'海洋水文数据集', type:'scatter', coordinateSystem: 'bmap', data:d_huaxuedata }还需要在echarts上添加什么
时间: 2024-02-27 20:51:51 浏览: 134
Flask框架URL管理操作示例【基于@app.route】
根据你提供的代码,需要在`render_template`中将数据传递给前端页面。具体地,在`context`中添加`d_huaxuedata`字段,将从数据库中查询到的数据传递给前端页面。如下所示:
```python
@app.route('/echarts',methods=['GET'])
def echarts():
if request.method == 'GET':
query_result = D_huaxue.query.filter()
data = []
for row in query_result:
data.append({
'name': row.name,
'value': [row.longitude, row.latitude],
'symbolSize': 15,
'itemStyle': {'color': 'blue'}
})
context = {
'query_result': query_result,
'd_huaxuedata': data
}
return render_template('地图2.html', **context)
```
在前端页面中,需要使用`echarts`库来绘制地图,并将从后端传递过来的数据`d_huaxuedata`传递给地图组件进行绘制。具体地,需要在Javascript代码中添加以下代码:
```javascript
var myChart = echarts.init(document.getElementById('map'));
// 指定地图的配置项和数据
var option = {
bmap: {
center: [113.25, 23.12],
zoom: 12,
roam: true
},
series: [
{
name:'海洋水文数据集',
type:'scatter',
coordinateSystem: 'bmap',
data: {{ d_huaxuedata | safe }}
}
]
};
// 使用制定的配置项和数据显示地图
myChart.setOption(option);
```
在以上代码中,`{{ d_huaxuedata | safe }}`表示从后端传递过来的数据,使用了jinja2模板引擎进行渲染,并使用`| safe`过滤器来确保数据的安全性。同时,`myChart.setOption(option)`语句则是使用制定的配置项和数据显示地图。
这样就可以将从数据库中查询到的数据展示在echarts地图上了。
阅读全文