地图的基本实现

地图图表的使用方式

（1）百度地图API

　　需要申请百度地图的ak

（2）矢量地图

　　需要准备矢量地图的地图数据

矢量地图的实现步骤：

（1）Echarts最基本的代码结构：

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

（2）准备中国的矢量地图json文件，放到json/map/的目录下

　　china.json

（3）使用Ajax获取china.json

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

（4）在Ajax的回调函数中往echarts全局对象中注册地图的json数据

　　echarts.registerMap('chinaMap',chinaJson);

（5）在geo下设置

　　type:'map'

　　map:'chinaMap'

常用配置：

（1）缩放配置：roam:true 设置允许缩放以及拖动的效果

（2）名称显示：label

（3）初始化缩放比例：zoom

 

（4）地图中心点：center

<script src="lib/jquery.min.js"></script>

<div id="main" style="width: 700px;height:400px;"></div>
<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // ret是中国各个省份的矢量地图数据
        $.get('json/map/china.json', function (ret) {
            echarts.registerMap('chinaMap', ret);
            var option = {
                geo: {
                    type: 'map',
                    map: 'chinaMap', // chinaMap要和registerMap的第一个数据保持一致
                    roam: true, // 可以进行拖到和滚轮缩放
                    label:{
                        show:true // 一开始就显示省份
                    },
                    zoom:1, // 初始化缩放比例
                    center:[87.617733,43.792818] // 地图的中心点
                }
            };
            myChart.setOption(option);
        })
    </script>

 如图：