Echarts全国地图区域合并------去掉海南子区域及南海诸岛

最新推荐文章于 2025-06-11 15:20:52 发布

原创

最新推荐文章于 2025-06-11 15:20:52 发布 · 置顶 · 7.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts合并全国区域 #地图添加边框及阴影

Echarts 地图开发中需要实现地图阴影；

下图是一个失败的demo,真正需要的是为整个地图添加边框阴影而不是为每个区域添加

1.最简单的实现方法，用geo实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图样式</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="../echarts.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            width: 100%;
            height: 100vh;
            background: #000036;
        }

        #map_container{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="map_container"></div>
</div>
<script>
    /*
    * GEO实现阴影与边框
    */
    $(function () {
        var data_obj = {
            '1000000': {
                'map_data_all': [
                    {id: "110000", value: 2395274, name: "\u5317\u4eac\u5e02", "level": "1"}, {
                        id: "120000",
                        value: 1087242,
                        name: "\u5929\u6d25\u5e02",
                        "level": "1"
                    }, {id: "130000", value: 2405260, name: "\u6cb3\u5317\u7701", "level": "1"}, {
                        id: "140000",
                        value: 1160702,
                        name: "\u5c71\u897f\u7701",
                        "level": "1"
                    }, {id: "150000", value: 836075, name: "\u5185\u8499\u53e4\u81ea\u6cbb\u533a", "level": "1"}, {
                        id: "210000",
                        value: 2158982,
                        name: "\u8fbd\u5b81\u7701",
                        "level": "1"
                    }, {id: "220000", value: 995060, name: "\u5409\u6797\u7701", "level": "1"}, {
                        id: "230000",
                        value: 982917,
                        name: "\u9ed1\u9f99\u6c5f\u7701",
                        "level": "1"
                    }, {id: "310000", value: 3783735, name: "\u4e0a\u6d77\u5e02", "level": "1"}, {
                        id: "320000",
                        value: 6089455,
                        name: "\u6c5f\u82cf\u7701",
                        "level": "1"
                    }, {id: "330000", value: 4289162, name: "\u6d59\u6c5f\u7701", "level": "1"}, {
                        id: "340000",
                        value: 2145624,
                        name: "\u5b89\u5fbd\u7701",
                        "level": "1"
                    }, {id: "350000", value: 2007123, name: "\u798f\u5efa\u7701", "level": "1"}, {
                        id: