地图的实现

地图

特点：地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异

矢量地图的实现步骤

1、将jQuery的js文件放到lib目录，将矢量地图数据china.json放到json文件夹下

2、在原来的模板上引入jquery.js文件

3、使用Ajax获取矢量地图数据

4、在Ajax的回调函数中注册地图矢量数据 echarts.registerMap(‘chinaMap’, 矢量地图数据)

5、配置geo的type为’map’, map为’chinaMap’

    $.get('json/map/china.json', function (ret) {
      // ret 就是矢量地图数据
       console.log(ret)
      echarts.registerMap('chinaMap', ret)
      var option = {
        geo: {
          type: 'map',
          map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致

        }
      }
      mCharts.setOption(option)
    })

完整代码

常用配置

可拖拽，允许缩放

在geo中设置属性

 roam:true ,//可拖拽

展示名称

 label: {
           show: true
            }

设置初始化比例

  zoom:1,//设置初始化的缩放比例

地图中心点

设置经度和维度

   center: [87.617733, 43.792818]

常见效果

不同城市颜色不同

根据城市的空气质量数据设置给series

结合visualMap使用

地图和散点图结合

1、给series下增加新的对象

其中scatterData为

  var scatterData = [
      {
        value: [117.283042, 31.86119]
      }
    ]

          {
            data: scatterData,//配置散点的坐标数据
            type: 'effectScatter',//涟漪效果
            coordinateSystem: 'geo',//指明散点使用的坐标系统是 geo的坐标系统
            rippleEffect: {
              scale: 10 //效果更明显
            }
          }

2、准备好散点图数据，设置给新对象的data

3、配置新对象type

4、让散点图使用地图坐标系统

5 、让涟漪的效果更加明显