echarts 项目折线图自定义 Y 轴刻度值数量和自定义间隔刻度

[sanlangguo]

基金折线图自定义 Y 轴刻度值数量和自定义间隔刻度

• 在下项目中做基金单位净值和累积净值折线图时，需要按照下图展示Y轴刻度

• 如何实现

1. 在 echarts yAxis.interval 中描述到，必须和 max, min 搭配使用才能生效，interval 代表每刻度的间隔单位
2. 确定 max, min 的最大最小值后

   
   最大值和最小值避免图标直接绘制最高，最低, 此时把最大，最小加一点弹性数值
   if (maxValue === minValue) { // 根据需求min == max  时，展示 5 个刻度
   interval = Math.fround(maxValue / 40).toFixed(2)
   maxValue = Number(maxValue + interval * 2).toFixed(4)
   minValue = Number(minValue - interval * 2).toFixed(4)
   } else { // 根据需求min ！= max  时，展示 6 个刻度
   interval = ((maxValue - minValue) / 4)
   minValue = Number(minValue - (interval / 2)).toFixed(4)
   maxValue = Number(maxValue + (interval / 2)).toFixed(4)
   }

// 图标配置 const options = { yAxis: { interval: interval, type: 'value', min: minValue, max: maxValue, axisLabel: { color: '#78797C', formatter: (val) => { return val && Number(val).toFixed(4) } }, axisPointer: { snap: true, label: { formatter(val) { return Number(val.value).toFixed(4) } } } }

- 总结： 主要是 min, max 计算出 interval，之后加入弹性数值， 记录一下，便于后期查阅