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

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

目录

一. 实现思路

二. 系统架构

三. 动态效果

四. 关键代码

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



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 

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/794540.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-06
下一篇 2022-05-06

发表评论

登录后才能评论

评论列表(0条)

保存