【26】地图可视化：基于 Echarts + Flask 的动态实时地图组件 - 点&气泡&流向&组合&区域&三级下钻地图

最新推荐文章于 2024-09-06 11:09:12 发布

m0_67391121

最新推荐文章于 2024-09-06 11:09:12 发布

阅读量2.3k

点赞数 2

分类专栏：前端 html 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_67391121/article/details/123220337

版权

本文介绍了一种使用Echarts、Flask和Bootstrap构建的地图可视化大屏方案，详细展示了如何封装Echarts地图组件，包括点式地图、点气泡组合地图、流向地图、流向气泡组合地图、区域地图和三级下钻地图。通过前端布局和HTTP服务端的Flask架构，实现了动态效果和主题切换功能。

摘要由CSDN通过智能技术生成

一、大屏整体架构?Echarts + Flask + Bootstrap

3. HTTP 服务端使用 Flask?架构

2. 点式+气泡组合地图 scatter + effectScatter

4. 流向+气泡组合地图 lines + effectScatter

echarts 代码

JSON数据格式 - 流向图 lines

json 数据 - 气泡图 scatter

在数据可视化大屏中，地图可视化是常用的高级图表之一。

很多小伙伴们以为地图太高大上了，那么实现起来估计也不容易，说实话，确实不那么容易，直接用echarts是要花些时间研究的，但是我们可以将其二次封装，以后在项目中就可以实现拿来主义，这样就简单快捷多了。

一、大屏整体架构Echarts + Flask + Bootstrap

1. 效果展示

动态效果

鼠标右键切换主题

2. 前端布局Bootstrap

<body style="background-color:rgb(11, 18, 39)">

    <div class="container_fluid" id="vue_app">
        <!-- 标题栏 -->
        <div class="row_fluid">
            <div id="container_1" class="col-12"
                style="color:#f5be66; text-align:center; align-content: center; padding-top: 1%; padding-bottom: 1%;">
                <strong>
                    <h3>【26】地图可视化：基于 Echarts + Flask 的动态实时地图组件 - 点&气泡&流向&组合&区域&三级下钻地图 </h3>
                </strong>
                <dv-decoration-5 style="width:100%; height:4%; color:#f5be66;">
                </dv-decoration-5>
            </div>
        </div>

        <!-- 上栏 -->
        <div class="row" style="height: 44%;">
            <!-- 上左栏 -->
            <div class="col-xs-12 col-sm-4 col-md-4 ">
                <dv-border-box-7>
                    <div id="container_2" style="height:100%;">
                    </div>
                </dv-border-box-7>
            </div>

            <!-- 上中栏 -->
            <div class="col-xs-12 col-sm-4 col-md-4 ">
                <dv-border-box-7>
                    <div id="container_3" style="height:100%;">
                    </div>
                </dv-border-box-7>
            </div>

            <!-- 上右栏 -->
            <div class="col-xs-12  col-sm-4 col-md-4 ">
                <dv-border-box-7>
                    <div id="container_4" style="height:100%;">
                    </div>
                </dv-border-box-7>
            </div>
        </div>

        <!-- 下栏 -->
        <div class="row" style="height: 44%; padding-top: 0.5%;">
            <!-- 下左栏 -->
            <div class="col-xs-12 col-sm-4 col-md-4">
                <dv-border-box-7>
                    <div id="container_5" style="height:100%;">
                    </div>
                </dv-border-box-7>
            </div>

            <!-- 下中栏 -->
            <div class="col-xs-12 col-sm-4 col-md-4 ">
                <dv-border-box-7>
                    <div id="container_6" style="height:100%;">
                    </div>
                </dv-border-box-7>
            </div>

            <!-- 下右栏 -->
            <div class="col-xs-12 col-sm-4 col-md-4 ">
                <div class="col-xs-12 col-md-12 col-sm-12">
                    <dv-border-box-7>
                        <div class="col-xs-12  col-md-12 col-sm-12">
                            <button id="china" type="button" class="btn btn-info" style="width: fit-content;"
                                onclick="make_china('china')">中国</button>
                            <button id="province" type="button" class="btn btn-info" onclick=""
                                style="display: none; width: fit-content;"></button>
                            <button id="city" type="button" class="btn btn-info" onclick=""
                                style="display: none;  width:fit-content"></button>
                        </div>
                        <div id="container_7" style="height:100%;">
                        </div>
                    </dv-border-box-7>
                </div>
            </div>
        </div>

    </div>


    <!-- 鼠标右键切换主题 theme [1/2] -->
    <!-- style="width: 200px;" 必须写在html，不能写在css文件中 -->
    <ul id="right_menu" style="width: 200px;">
        <li><img src="img/drop-down.png"> 主题列表</li>
        <li>infographic</li>
        <li>macarons</li>
        <li>roma</li>
        <li>shine</li>
        <li>walden</li>
        <li>westeros</li>
        <li>wonderland</li>
        <li>vintage</li>
        <li>purple-passion</li>
        <li>chalk</li>
        <li>dark</li>
        <li>essos</li>
    </ul>
</body>

3. HTTP 服务端使用 Flask架构

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)

二、封装的Echarts地图可视化组件

我将项目中常用的地图组件整理了一下，主要6组，分为：

点式地图 scatter

点式+气泡组合地图scatter + effectScatter

流向地图lines

流向+气泡组合地图 lines + effectScatter

区域地图map

国家省市三级下钻地图map

1. 点式地图 scatter

echarts 代码

function init_echart_map_china_scatter(container) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(container), window.gTheme);
  var data = [];
  var geoCoordMap = {};
  option = {
    title: {
      text: "点图 scatter",
      top: "top",
      left: "center",
      textStyle: {
        color: "hsl(200, 86%, 48%)",
        fontSize: "14",
      },
    },

    tooltip: {
      trigger: "item",
      formatter: function (params) {
        if (typeof params.value[2] == "undefined") {
          return params.name + " : " + params.value;
        } else {
          return params.name + " : " + params.value[2];
        }
      },
    },

    geo: {
      map: "ch