echarts纵坐标动态分段

ppylox
·11/23/2021·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

ECharts柱状图默认自动计算Y轴分段,若需固定分段,可在yAxis中设置interval、max、min字段,但需自行计算数值。文章提供arrMaxMin函数,通过取数据最大最小值、计算差值区间、确定调整值,循环得出interval,再根据最小值正负计算minLast,确保其能被5或5结尾小数整除,并判断是否包含最大值以确定maxLast,最终按flag返回max、min或interval,实现Y轴动态分段。

在开发echarts的柱状图时,默认情况下echarts会自动计算Y轴的最大值跟最小值,再自动计算分为几段,整个过程不用我们计算,但是有时候可能不太满意echarts自动计算结果,想让Y轴固定分为几段,这个时候就需要自定义计算结果,其实echarts也是支持的,通过在yAxis某个数组中添加 interval以及max和min字段就可以达到这种效果。但是这个间隔跟最大值和最小值需要自己计算。

\n\n\n\n\n\n

以下自动计算规则供参考:


// 取数组(如图表数据的最大和最小值)目的:Y轴刻度调整(可以被5或者5结尾的小数整除)\nexport function arrMaxMin (list, flag) {\n  let valArr = list\n  let splitNum = 1 // 分段数\n  let max = Math.max.apply(null, valArr) || 0 // 最大值\n  let min = Math.min.apply(null, valArr) || 0 // 最小值\n  let diff = max - min // 差值\n  let ilog = Math.round(Math.log10((diff || 3) / 3)) - 1 // 差值区间\n  let fixNum = 5 * (Math.pow(10, ilog)) // 调整值\n  let interval\n  for (let i = 1; i <= 10000; i++) {\n    if (fixNum * i * splitNum > diff) {\n      interval = fixNum * i\n      break\n    }\n  }\n  let minLast\n  let maxLast\n  // 计算出minLast、maxLast,计算出的minLast<=min(包含min),maxLast>=max(包含max),并且minLast,maxLast都能被5或者5结尾的小数整除\n  if (min >= 0) { \n    // 最小值大于等于零 例如 min = 0.0016 interval = 0.0015 则 minLast 0.0016-|0.0016|%0.0015 = 0.0015\n    minLast = min - Math.abs(min) % interval\n  } else { \n    // 最小值小于零 例如 min = -0.0016 interval = 0.0015 则 minLast = -0.0016+|0.0016|%0.0015 -0.0015 = 0.0030\n    minLast = min + Math.abs(min) % interval - interval\n  }\n  // 判断是否包含最大值,不包含则加一刻度\n  if (minLast + 1 * interval >= max) { \n    maxLast = minLast + 1 * interval \n  } else {\n    maxLast = minLast + 2 * interval \n  }\n\n  if (flag === 'max') {\n      return maxLast\n  } else if (flag === 'min') {\n      return minLast\n  } else if (flag === 'interval') {\n    return interval\n  }\n  return '--'\n}\n

相关文章

评论 (0)

暂无评论,来写第一条吧