E2【数据可视化】【组件】基于Python+Flask+Echarts+BaiduMap实现的地理位置点图scatter+气泡图effectScatter

目录

一. 实现思路

二. 系统架构

三. 动态效果

四. 关键代码

1. 引入百度地图API

2. Echarts 百度地图坐标系

3. Echarts 系列之点图scatter+气泡图effectScatter

4. Python Flask web服务器

4. JSON 数据格式

5. AJAX动态刷新数据

五. 源码下载

---

一. 实现思路

企业要展示公司所在城市的地理位置，通常是用百度地图实现的。

要用到百度地图开放平台：jspopularGL | 百度地图API SDKhttps://lbsyun.baidu.com/index.php?title=jspopularGL

点图scatter+气泡图effectScatter，要用到 echarts：

Documentation - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/option.html

二. 系统架构

1. 前后端分离：前端 Echarts JavaScript BootStrap; 后端Python Flask；

2. 数据动态更新：服务端触发数据源的变化，前端AJAX自动获取最新数据并渲染到Echarts图表上；

3. 数据格式：JSON；

三. 动态效果

展示了 卫星 和 地图 两种形式：

四. 关键代码

1. 引入百度地图API

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AgasQmKK2z6YZjy4w5dFPY93c6uPw7RI
"></script>

<script type="text/javascript" src="/static/map_baidu/bmap.min.js"></script>

2. Echarts 百度地图坐标系

 bmap: {
      center: [118.104103, 24.477761],
      zoom: 2,
      roam: true,
    },

3. Echarts 系列之点图scatter+气泡图effectScatter

  {
        name: "点图",
        type: "scatter",
        coordinateSystem: "bmap",
        symbolSize: function (val) {
          return val[2] / 40;
        },
        data: [],
  }

4. Python Flask web服务器

app = Flask(__name__, static_folder="static", template_folder="template")


@app.route('/')
def hello_world():
    return 'Hello World!'


# 主程序在这里
if __name__ == "__main__":
    # 开启线程，触发动态数据
    a = threading.Thread(target=asyncJson.loop)
    a.start()

    # 开启 flask 服务
    app.run(host='0.0.0.0', port=88, debug=True)

4. JSON 数据格式

[
   {
        "name": "金昌",
        "value": [
            102.188043,
            38.520089,
            498
        ]
    },
    {
        "name": "泉州",
        "value": [
            118.58,
            24.93,
            825
        ]
    }
]

5. AJAX动态刷新数据

 $.getJSON(filename).done(function (data) {
    var myChart = echarts.init(document.getElementById(container));
    myChart.setOption({
      series: [
        { data: data },
        {
          data: data
            .sort(function (a, b) {
              return b.value[2] - a.value[2];
            })
            .slice(0, 5),
        },
      ],
    });
  });
}

五. 源码下载

E2【数据可视化】【组件】基于Python+Flask+Echarts+BaiduMap实现的地理位置点图scatter.zip