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
}