Echarts visualMap：piece划分方法

小雅痞

已于 2022-08-12 09:28:41 修改

阅读量2.8k

点赞数

分类专栏： Vue 文章标签： echarts javascript

于 2022-08-11 09:50:48 首次发布

本文链接：https://blog.csdn.net/shijizhe1/article/details/126278768

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种用于将地图上的多个地区进行分组的算法。该算法适用于任何包含多个区域的地图，如中国及其各省份。通过设定每个组内地区的数量，可以实现自动化的区域划分，并能妥善处理最后一组地区数量不固定的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给一个中国地图或者任意州市、区县的地图将其划分为几个部分。
例如：云南有16个州市。每四个一组，最多划分为5组就划分为：1-4,5-8，9-12,13-16

1. 需要注意的问题

前面循环赋值就可以了(label = gte - lte)，特殊情况仅存在于最后一次循环的时候：

最后一组中地区数=1，label = gte
最后一组中地区数>groupSize，label = lte 及以上
1<最后一组中地区数<=groupSize,label = gte - lte

2. 函数参数

length: 地图中共有多少个地区
groupSize：一组中有多少个地区
groupNum：一共有多少个组

3. 代码

let resArr = []
function cutPiece(length,groupSize,groupNum){
        let groups =  Math.ceil(length/groupSize)   // 向上取整
        let cutPiece = groups > groupNum ? groupNum : groups // 划分组数
        let gte = 1;
        let lte = 1;
        let startNum = 0;
        let endNum = 0
        let label = ''
        for(let i=1;i<=cutPiece;i++){
          lte = gte + groupSize-1;
          if(i===cutPiece){
            if(lte >= length){
              if(gte === length){
                startNum = gte
                endNum = gte
                label =gte + '名'
              }
              else{
                lte = length

                startNum = gte
                endNum = lte
                label = gte + '-' + lte + '名'
              }
            } else{
              startNum = gte
              endNum = length
              label = gte + '名及以上'
            }
          }else{
            startNum = gte
            endNum = lte
            label = gte + '-' + lte + '名'
          }
          resArr.push(label )
          gte = lte+1;
        }
      }

4. 测试样例

测试样例	结果
cutPiece(16,4,5)	[ “1-4名”, “5-8名”, “9-12名”, “13-16名” ]
cutPiece(13,4,5)	[ “1-4名”, “5-8名”, “9-12名”, “13名” ]
cutPiece(50,4,5)	[ “1-4名”, “5-8名”, “9-12名”, “13-16名”, “17名及以上” ]
cutPiece(10,4,5)	[ “1-4名”, “5-8名”, “9-10名” ]

函数逻辑感觉如果比较复杂，但胜在参数灵活，不需要理解函数的意思，只要传参数就可以的要想要的划分结果。

取次花丛懒回顾，半缘修道半缘君。

—— 唐·元稹