| 12345678910111213141516171819202122232425262728293031323334353637383940414243 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>03.地图的实现</title>
- <script src="lib/echarts.min.js"></script>
- <script src="lib/jquery.min.js"></script>
- </head>
- <body>
- <div style="width: 600px;height:400px;"></div>
- <script>
- /*
- 1、Echarts最基本的代码结构
- 2、准备中国地图的矢量数据
- 3、使用Ajax获取矢量地图数据
- 4、在Ajax的回调函数中注册地图矢量数据echarts.registerMap(‘chinaMap’,矢量地图数据)
- 5、配置geo的type为'map'，map为'chinaMap'
- */
- var mCharts = echarts.init(document.querySelector('div'))
- $.get('json/map/china.json',function(ret){
- //ret就是中国的各个省份的矢量地图数据
- // console.log(ret)
- echarts.registerMap('chinaMap',ret)
- var option = {
- geo:{
- type:'map',
- map:'chinaMap',//chinaMap需要和registerMap中的第一個參數保持一致
- roam:true,//设置允许缩放以及拖动的效果
- label:{
- show:true //展示标签
- },
- zoom:1, //设置初始化缩放比例
- //center:[] //设置地图中心点的坐标
- }
- }
- mCharts.setOption(option)
- })
- </script>
- </body>
- </html>
|
