echarts地图背景数据，及引入方式

1、引入方式参考官方介绍

ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用示例：

JavaScript 引入示例

<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 引入示例

$.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 使用 geoJSON 格式的数据作为地图的轮廓，除了上述数据，你也可以通过其它手段获取地图的 geoJSON 数据注册到 ECharts 中

2、关于地图的json/js文件，npm安装echarts之后，可在echarts/map目录下找到相关地图文件

propvince中是各个省份的数据

3、json也可自定义，格式如下

• 这段是单独把西安拿出来了，就是上面文件夹中province/shanxi1.json 中features 为西安的那一部分
• 实际使用中，可通过判断拆解shanxi1.json用于动态拿取各个城市的数据
• 要单独增加别的数据，格式参照下面这个就可以了，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":"西安市",
                "childNum":2
            }
        }
    ],
    "UTF8Encoding": true
}