Background data of echarts map and its introduction

1. Refer to the official introduction for the introduction method

Because of the improvement of map accuracy in echart 3, no more built-in map data increases the code volume. You can download the required map file in the map download interface and import it into echart.

Two formats of map data are provided in ECharts. One is js file which can be imported directly by script tag. After importing, map name and data will be registered automatically. Another is JSON file, which needs to be registered manually after being loaded asynchronously through AJAX.

Here are two types of use examples:

JavaScript introduction example

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

JSON introduction example

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

ECharts uses data in the form of geoJSON as the outline of the map. In addition to the above data, you can also obtain the geoJSON data of the map and register it in ECharts by other means

2. For the json/js file of the map, npm can find the relevant map file in the echarts/map directory after installing echarts



Data of each province in propvince

3. json can also be customized. The format is as follows

  • This section is taken out of Xi'an separately, which is the part of Xi'an where the features in province/shanxi1.json are in the folder above
  • In actual use, shanxi1.json can be used to retrieve the data of each city dynamically by judging and disassembling
  • To add other data separately, please refer to the following format. coordinates
{
    "type":"FeatureCollection",
    "features":[
        {
            "id":"610100",
            "type":"Feature",
            "geometry":{
                "type":"MultiPolygon",
                "coordinates":[["@@D@@CMMAIKGMCCHIHJLABDFJH^C"],["@@DFJFtBFABGDCPBDCH@LBF@LGFAB@FFDLDDFBNIF@H@LHN@DCDKBCF@L@N@LJZBNB^HLFDFBJDDJDFHB^DLDBF@RA`DTARHB@LKFSBGFEJEDCACICEI@MFIBELG@ACCECECBaJgJoAQFIBYXÆ’BQKBMEOCQUCCaEGDEAGKBIF[BCVAHGBCCCIBG@ECOaAODKHCFATALG@ABORKBEAEEEHEAK@IFEJEXEFIBEASLCTA@CFAGABKFBB@@CAA@CECDAAACABABEECDC@CCCAA@CCAACBAAABEB@@CB@AGAA@ACABAACBACABACEBAAABAC@BCC@BAAEDCCCBC@AD@ACB@@ABA@EDADAAIAA@CACBCAAZALCDE@IJEFGRIHIHCJAVIJGDGD@JBJFVCLBJDHHRENBHCBA^INGVEJGbKB@LJHFTBHAJGJEL@bHJ@REP@RGTBDEL[DGJEZADABCAGKMOOAEDAJ@JETDJCLALIFIJEFIJIHBPJVU@GKGE@GHIDEIUGCHBHDFHF@BKDOAQWGOSUGESCEEAMBMCK@GECKAE@YTE@OCCDCLEDEGECQGWGE@MFGFACBECGGKMEI@GECCAOSC'CGAIIQCCOECMECE@G@CNKBEGESGCA@WCIEUGE@CFGIKAEDEHERG^UhMFGNIRAFE@GCIIG@EDWI_AAE@]BECEECAI@CCAGSOGCI@AACWEEWESCCAGMKBMAWBQFI@KEAGCAKBEEACECA@IJCBUAIDu@EDCL_@YNILIDGCO@IGQDEEAAGCKEOBEDKAMJENEFOFYB[JE@KGSDE@MGKMKA]BIBIHEDOCIDMEGACBGJU@EGG@OJK@CCEBEH@hKFGJIBOCQHC@[GIFBJGHQBEHC@GACCAGMWKIEGQGIKIEW@GCEIK@KCOBEBE@MI[II@GAE@MDEDGAAAEI@I@GAGAEMKK@AGCAKEG@EAGGGCGEOCCDSFCGKCAICAGDE@IHC@GCMCGGA@A@IHA@AA@CICKIC@KDGCGI@GgXEFCFAD@FHNBJ@FAFABI@KAIFA@UKIAIGO@GEG@KBCB@JEBMBUCWFM@KHA@KMMEgKEA@EDM@CECEACAAECCACBEEOCAEACAOOEADGDGBCACIGMBCAIBU@CDITIDCFCNMBEDM@IFIAGBiLIHG@KEICOBWQGAMQOEaMGAA@EMAAK@CBADQN@HAB]FCDANEFCBWCWDCEBGAAKAOECCAGGIUICCGAeHE@EACEWKSECCBCACGCEGQSCGMCE@E@QDIKECEBI@GDGDC@AAAEAACC@GOGOFQCKFCACAIAEFOFKHIEE@MMG@EFKFMJ_DQCSOCECCGAYFYJOLOBMJC@AAE@QHI@EBUFQASNGHA@QKMA@GIGIDK@EDEB@DCDMFELCBGCAEGACK@EAEQYMCCAOYCIOIC@MHICM@EDCFGDKJKJQGC@IDWLQ@GFMBWGSDS@_PW@WCCF@BGFC\\MLOHOLCRTLJNBDADNJBNIJCLVDPPBZJDBBBFALHLAJEHL^F^B^FTGb^HDBFFFDTLjRBB@FFHJLR^JHVDDHPLPCVGFILENKFAH@PFFDDHPLNHRBLHTBN@DIDGFIHAT@NCL@JBFD@DCDBFAJEHELBXEL@DHRANDDTBDD@F\\RDFAZJ@DHRNRXDDFBBHC@@DDACDCLHLAFANBDBH@LCDCJJBAHDHBDBALHFHFVBBJBDF@FCJBHHNDTJF@FGFEVTBFDJBDAJAFFFBPBFAJ@JBT@JAHAD@BEPEN@VIJGN@TBFFNFXBf@dIXOZSRGfARBRHJFLDRBPAlMFGFCRATBZHTHJHPBL@zEXKPDHBHHJDLBF@VGFBrVJLFBPBTFLHVBLBR@HEHAH@F@LNFBV@NDbRFDDHJHLBBEpTH@FCFQDCHCDKDAjODDAPBNHBL@@FGLAH@HFD\\FX@LPB@J@ROF@@HHDBF@DMNDDDBrEXBNADDDD@DCLCDFPANBFCL@HHDBDEFBDJB@FCDDHBNRNFDbEHJLFPNLHJHXFP@TAHBPHNRDBHBbAJDNLJDLFPNC\\ENHHLBFAFIFADD@BCLAJCNJRCNDRCLDH@DIHABDHBJBDBTCNBRADMDEDAJAFKP@HBBHFTAVDHLD@LAPBFDJLHDRBJFJB`BrBJADEDAZBRKJIFAJ@dFDBHDBFBDCVAH@\\APFPBNFFFDH@NB@N@FZXDH@DCJ@HBFFJBF"]],
                "encodeOffsets":[
                    [
                        [111793,34623]
                    ],
                    [
                        [111794,35525]
                    ]
                    ]
            },
            "properties":{
                "cp":[108.948024,34.263161],
                "name":"Xi'an City",
                "childNum":2
            }
        }
    ],
    "UTF8Encoding": true
}
18 original articles published, praised 0, and 345 visitors
Private letter follow

Tags: JSON Javascript npm

Posted on Mon, 13 Jan 2020 18:24:19 -0800 by Stevis2002