地图的基本实现
地图图表的使用方式
(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>
如图: