Echarts geo地图 visualMap 自定义分段

我叫陈小皮。

已于 2022-03-16 10:51:23 修改

阅读量2.2k

点赞数

分类专栏：图表使用文章标签： echarts 前端 geo地图 visualMap自定义分段 echarts 自定义分段

于 2022-03-10 11:06:54 首次发布

本文链接：https://blog.csdn.net/m0_37805167/article/details/123396373

版权

图表使用专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇博客介绍了两个JavaScript函数，用于数值处理和分段函数的创建。`toCeil`函数用于将数值四舍五入到指定的小数位数，而`getPieces`函数根据最大值、分段数量和是否显示百分比创建分段标签，解决了精度问题并确保等分。

摘要由CSDN通过智能技术生成

/*
	value: 需要处理的数值
	num: 保留几位小数
*/
export function toCeil (value, num) {
  let val = Math.ceil(value * Math.pow(10, num)) / Math.pow(10, num) + ''
  if (num > 0) {
    const intp = val.split('.')[0]
    const decp = val.split('.')[1] || ''
    if (decp.length < num) {
      val = `${intp}.${decp.padEnd(num, '0')}`
    }
  }
  return +val
}
/*
	max: 分段最大值
	splitNum: 分为几段
	isPercentage: 是否分段label中显示百分号
	注：此处为防止精度问题，引入了Decimal库
*/
export function getPieces (max = 0, splitNum = 5, isPercentage = false) {
  const unit = isPercentage ? '%' : ''
  let interval = max / splitNum
  if (interval !== toCeil(interval, 2)) {
    // 除不尽保留2为小数，保持进1
    interval = toCeil(interval, 2)
    max = toCeil(interval * splitNum, 2)
  }
  const pieces = [
    {
      max: interval,
      min: 0,
      label: `0 - ${interval}${unit}`
    }
  ]
  let i = 1
  while (i < splitNum) {
    const max = +(new Decimal(pieces[i - 1].max).add(interval))
    const min = +(new Decimal(pieces[i - 1].max))
    pieces[i] = {
      max,
      min,
      label: `${min}${unit} - ${max}${unit}`
    }
    i++
  }
  return pieces
}