echarts-地图使用/配合散点图展示空气质量

准备工作：

准备数据：name  value 组成的对象数组 - 每个省份的空气指标数据

let airData = [
  { name: '北京', value: 39.92 },
  { name: '天津', value: 39.13 },
  { name: '上海', value: 31.22 },
  { name: '重庆', value: 66 },
  { name: '河北', value: 147 },
  { name: '河南', value: 113 },
  { name: '云南', value: 25.04 },
  { name: '辽宁', value: 50 }......
]

 散点图的数据-不是直角坐标系 数据是 经纬度

let scatterData = [
  {value:[114.298572, 30.584355]},
  {value:[116.405285, 39.904989]}
]

获取地图的数据（json）

$.get('../json/map/china.json',function (res) {
  const res = res
}

核心配置：

 注册地图：

echarts.registerMap('chinaMap',res) // 注册地图的矢量数据  
第一个参数：起名字(字符串) 第二个参数就是上面请求回来的数据源

地图不用 xAxis yAsis   标识geo  只需这一项配置 就可以把地图显示出来

geo:{
  type:'map',
  map:'chinaMap', // 与上面注册的名字保持一致
  roam:true, // 可以被拖动和缩放
  label:{
    show:true // 展示标签
  },
  zoom:1, // 初始化缩放比例
  center:[113.665412, 34.757975], // 中心点
  itemStyle:{
    color:'#f35' // 想设置中心点的颜色
  },
},

 在地图的基础上 使用 颜色区分和 散点图   

series:[
  {
    data:airData, // 最上面定义的数据
    geoIndex:0, // 将空气质量的指数和第0个 gen 关联在一起
    type:'map', // 类型是map
  },
  {
    data: scatterData, // 配置散点数据（坐标值）
    type: 'effectScatter', // 类型是会扩散的散点图
    coordinateSystem:'geo', // 指明散点使用的坐标系统是geo
    rippleEffect:{
      scale:5, // 设置涟漪动画的缩放
      color:'#107' // 涟漪的颜色
    },
  }
],
visualMap:{
  min:0,
  max:300,
  inRange:{ // 最大值 最小值 以及 颜色过渡
    color:['#fff','red']
  },
  calculable: true // 出现滑块选择范围
}