echarts ajax Python,python+flask+jQuery+ajax+echarts+mongoDB

0 说明

一直想弄个界面显示下船舶轨迹，恰好前段时间有个朋友说想弄个地图做显示，瞬间心血来潮！！！于是在浩浩荡荡的度娘上搜索python的可视化地图开源代码，大部分人推荐用pyecharts，恰好看到了[pyecharts中文文档](http://pyecharts.org/#/zh-cn/flask)，看到flask可以快速实现自己的目标，于是开始研究起来。后面发现pyecharts比较难用，不如直接调用echarts的js，但是想实现数据的动态显示，就需要jQuery和ajax的配合。好吧，故事正式开始。

1 开始

我们需要的软件有：flask、jQuery、ajax、echarts、mongoDB。系统环境：Ubuntu16.04、python2.7。以上安装方法请度娘。。。。。

flask是一个轻量级的web开发框架，上手极其容易，几乎有idea就能用flask搭载其他开源软件包就能够实现。我们的目标就是将经纬度数据从数据库中读取然后加载到地图上做显示。

定义获取数据函数

'''

import pymongo

from pymongo import MongoClient

def get_db():

client=MongoClient(maxPoolsize=None,connect=False)

db=client.changle_research_data ##changle_research_data是我数据库的名字，大家在这上面可以自由发挥

return db

def query_db(db): ###查询函数

data=db['s_bulk_carrier'].find().limit(400) ##s_bulk_carrier是我集合的名字

return data

'''

加载模板，模板是上[Echarts官网](http://gallery.echartsjs.com/editor.html?c=effectScatter-map)下的感觉挺好看的。再根据[pyecharts中文文档](http://pyecharts.org/#/zh-cn/flask)中应用案例进行改写，写个路由，将查询函数和获取函数加上，将获得到的数据以json方式返回。方法就是建一个空数组，然后循环添加。如：

[{‘name’:****,'value':[119,39]},{'name':****,'value':[119,39.3]}....}，在模板中用ajax方法调用下weather方法就好了，接着就是要注意在模板的data选项里要想成功显示数据，比如返回的变量名是res，function(res)，在data选项里调用就要res.res才能够成功。最后在myEcharts.setOption(option,true)一下就好。

2 展示

可以拖动