ECharts矢量地图

矢量地图数据：

https://gitee.com/liumuye666/front-end/tree/master/

矢量地图的实现步骤

ECharts最基本的代码结构

引入js文件，DOM容器，初始化对象，设置option2.

准备中国地图的矢量数据，放到json/map的目录下

china.json

使用Ajax获取矢量地图数据

$.get(\'json/map/china.json\',function(chinaJson){})

在Ajax的回调函数中注册地图矢量数据

echarts.registerMap(‘chinaMap’, 矢量地图数据)

在geo下设置（区别于series）

type:’map’

map:’chinaMap’

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script src="echarts.min.js"></script>
 8     <script src="jquery.min.js"></script>
 9 </head>
10 <body>
11     <div style="width: 600px;height: 600px;"></div>
12 </body>
13 <script>
14     var mCharts = echarts.init(document.querySelector(\'div\'))
15     $.get(\'map/china.json\',function(ret){
16         
17         // console.log(ret);
18         echarts.registerMap(\'chinaMap\',ret)
19         var option = {
20         geo:{
21             type:\'map\',
22             map:\'chinaMap\', //chinaMap需要和registerMap中的第一个参数保持一致
23             roam:true,  //设置允许缩放、拖动
24             label:{
25                 show:true
26             },
27             zoom:2, //初始化比例
28             center:[87.617733,43.792818] //地图中心点
29         }
30     }
31     mCharts.setOption(option)
32     })
33     
34    
35 </script>
36 </html>