js数组多区间范围筛选

js yekong

数据大屏项目开发中,需要对数据进行多区间分组,第一组数据是区间,有6个区间,每个区间都有一个最小值一个最大值。

区间数据

[{
        min: 0,
        max: 1000,
        name: '1000人以下',
        color: 'rgba(0, 147, 255, 1)',
        icon: dot1,
      }, {
        min: 1000,
        max: 2000,
        name: '1000至2000人',
        color: 'rgba(38, 237, 183, 1)',
        icon: dot2,
      }, {
        min: 2000,
        max: 3000,
        name: '2000至3000人',
        color: 'rgba(254, 198, 0, 1)',
        icon: dot3,
      }, {
        min: 3000,
        max: 4000,
        name: '3000至4000人',
        color: 'rgba(255, 138, 0, 1)',
        icon: dot4,
      }, {
        min: 4000,
        max: 5000,
        name: '4000至5000人',
        color: 'rgba(255, 61, 0, 1)',
        icon: dot5,
      }, {
        min: 5000,
        max: 100000,
        name: '5000人以上',
        color: 'rgba(189, 0, 255, 1)',
        icon: dot6,
      }]

地图数据

第二组数据是地图数据,需要根据数组中的value[2]的大小,将数据分为六组。

[{"name":"新疆","value":[84.9023,41.748,0]},{"name":"西藏","value":[88.7695,31.6846,0]},{"name":"内蒙古","value":[117.5977,44.3408,0]},{"name":"青海","value":[96.2402,35.4199,0]},{"name":"四川","value":[102.9199,30.1904,0]},{"name":"黑龙江","value":[128.1445,48.5156,0]},{"name":"甘肃","value":[95.7129,40.166,0]},{"name":"云南","value":[101.8652,25.1807,0]},{"name":"广西","value":[108.2813,23.6426,0]},{"name":"湖南","value":[111.5332,27.3779,0]},{"name":"陕西","value":[109.5996,35.6396,0]},{"name":"广东","value":[113.4668,22.8076,0]},{"name":"吉林","value":[126.4746,43.5938,0]},{"name":"河北","value":[115.4004,37.9688,0]},{"name":"湖北","value":[112.2363,31.1572,0]},{"name":"贵州","value":[106.6113,26.9385,0]},{"name":"山东","value":[118.7402,36.4307,0]},{"name":"江西","value":[116.0156,27.29,0]},{"name":"河南","value":[113.4668,33.8818,0]},{"name":"辽宁","value":[122.3438,41.0889,0]},{"name":"山西","value":[112.4121,37.6611,0]},{"name":"安徽","value":[117.2461,32.0361,0]},{"name":"福建","value":[118.3008,25.9277,0]},{"name":"浙江","value":[120.498,29.0918,0]},{"name":"江苏","value":[120.0586,32.915,0]},{"name":"重庆","value":[107.7539,30.1904,0]},{"name":"宁夏","value":[105.9961,37.3096,0]},{"name":"海南","value":[109.9512,19.2041,0]},{"name":"台湾","value":[121.0254,23.5986,0]},{"name":"北京","value":[116.4551,40.2539,0]},{"name":"天津","value":[117.4219,39.4189,0]},{"name":"上海","value":[121.4648,31.2891,0]},{"name":"香港","value":[114.2578,22.3242,0]},{"name":"澳门","value":[113.5547,22.1484,0]}]

方法

处理方法

// 数据分组
groupData(ranges, data) {
  var groups = ranges.map(function (range) {
    return {
      name: range.name,
      color: range.color,
      icon: range.icon,
      values: [],
    };
  });

  data.forEach(function (item) {
    var value = item.value[2];
    for (var i = 0; i < ranges.length; i++) {
      if (value >= ranges[i].min && value <= ranges[i].max) {
        groups[i].values.push(item);
        break;
      }
    }
  });

  return groups;
},
喜欢