显示某个区域的地图&& 空气质量

1: 显示某个区域的地图

  1:  加载该区域的矢量地图数据
  2:  通过registerMap 注册到echarts 全局对象中
  3:  指明 geo 配置下的type为 'map',  map: 'anhuui'
  4:  通过zoom 放大该区域
  5:  通过center 定义中心点

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'},
     ....
  ]
$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'
        }
      ],
      // 配置visualMap: 的数据
      visualMap: {
       min: 0,  // 最小值
       max: 300,  // 最大值
       inRange: {
         color: ['white', 'red']   // 控制颜色渐变范围
       },
       calculable: true,  // 出现滑块的效果 (出现两个三角)
      }
     }
   }

mCharts.setOption(option); 
--------------------------------------------------------------
常见效果:
 1: 不同城市颜色不同
   1.1: 显示基本的中国地图
   1.2: 城市的空气质量数据设置给series
   1.3: 将series 下数据和geo 关联起来
        geoIndex: 0,   type: 'map'

   1.4: 结合visualMap 配合使用
        min: 0,  最小值
        miax: 300,  最大值
        inRange： 控制颜色渐变范围
        calculable: true,  // 出现滑块的效果