Add custom areas to Echarts map

When generating a map with Echarts, what if I need to add some custom areas? See the example below.

Generate original map

index.hmtl

Introducing Jquery and Echarts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts 地图添加自定义区域</title>
    <script></script>
    <script src="./js/jquery-1.9.1.min.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/map.js"></script>
</head>
<body>
<div id="map" style="width: 1500px;height: 800px;"></div>
</body>
</html>

map.js

var map = {
    init : function () {
        map.getMapData();
    },

    getMapData : function () {
        $.getJSON("./mapdata/china.json", function (data) {
            if(data != null) {
                echarts.registerMap("china", data);// 注册地图
                var mapData = [];
                var features = data.features;
                $.each(features, function(i, item) {
                    mapData.push({id : i+1, name: item.properties.name});
                })
                map.renderMap(mapData);
            }
        })
    },

    renderMap : function (data) {
        var chart =  echarts.init(document.getElementById("map"));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode : 'multiple',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data : data
                }
            ]
        }
        chart.setOption(option);
    }
}

$(function () {
    map.init();
})

Open index.html in the browser, the style is as follows:

At this time, a simple map of China has been generated. Next, we add a custom area based on this map.

Add custom area

In map.js, we use the $.getJson()method read ./mapdata/china.jsonfile to get map data. The file is a geojson file from which the map is generated. So, if we want to add custom regions, we have to modify the geojson file.

But how to modify it? Manual modification is definitely not advisable, because there are many properties in the geojson file, which are cumbersome and error-prone to change. There is a site dedicated to dealing with geojson that can help us with this.