地图和散点图的结合

实现效果地图和散点图的结合:
   地图结合散点图的结合：
1: 给series 下增加新的对象;
2: 准备好散点数据, 设置给新的对象data;
3: 配置新的对象type 为： type: effectScatter
4: 让散点图使用地图坐标系统
     coordinateSysten: 'geo',

5: 让涟漪的效果更加明显
    rippleEffect: {
      scale: 10
    }
-------------------------------------------------------

1:  引入Echarts 文件
 <script src="lib/echarts.min.js"></script>
2: 准备一个呈现图表盒子：
   <div style="width: 600px; height: 400px"></div>
3: 初始化echarts 对象：   获取初始化对象
  var mCharts = echarts.init(document.querySelector('div'));
  var airData = [
     {name: '北京'， value: '80.2'},
     {name: '天津'， value: '100.2'},
     ....
  ],
   // 准备scatterData = [
        {
          value: [117.23423, 31.45645]
        }
      ]
$get('json/map/china.json', function() {
   // ret  就是代表中国各个省份的矢量地图的数据
   console.log(ret);
   echarts.registerMap('chinaMap', ret)
   var option = {
     geo: {
       type: 'map',
       map: 'chinaMap',   // chinaMap 需要和registerMap 中第一个参数保持一致
       roam: true,  // 设置允许缩放以及拖动的效果
       zoom: 1 // 2,   // 设置初始化的缩放比
       center: ['经度', '纬度'],   // 地图的中心位置显示
       lable: {
         show: true,   // 显示每一个省份的文字 (展示标签)
      },
      series: [
        {
          data: airData,
          geoIndex: 0,  // 将空调质量的数据和第0 个 geo 配置关联在一起
          type: 'map'
        },
        {
          data: scatterData;    // 配置散点的坐标系数据
          type: 'effectScatter';
          coordiateSystem: 'geo', // 指明散点使用的坐标系统  geo 的坐标系统
          rippleEffect: {
            scale: 10   // 设置涟漪动画的缩放比例
          }
        }
      ],
      // 配置visualMap: 的数据
      visualMap: {
       min: 0,  // 最小值
       max: 300,  // 最大值
       inRange: {
         color: ['white', 'red']   // 控制颜色渐变范围
       },
       calculable: true,  // 出现滑块的效果 (出现两个三角)
      }
     }
   }
 
mCharts.setOption(option);
---------------------------------------------------------------
地图的特点:
  地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异。