Echarts折线图数据过大时趋势过于平缓的处理方法 ​

当使用折线图时，如果展示的数值非常大，但是每天的变化量占总值的比例很小，折线图的效果就相当于一条横线，失去监控的作用，本文将提出一种通用的解决方式。

问题描述 ​

当使用折线图时，如果展示的数值非常大，但是每天的变化量占总值的比例很小，折线图的效果就相当于一条横线，此时完全没有监控作用，如果这数值代表了用户量，那么每天似乎都没有用户流失了。

使用数据 [1009000, 1004000, 1003000, 1002000, 1001000, 1000200, 1000100] 作为示例

这时可能你会想到可以使用yAxis.scale=true来自动控制y轴最小值，但是这样会使得原来并没有多大变化的其他数据，看起来变化过大，失去了折线图监控趋势变化的作用。如果这些数值代表用户量，那么不管是用户骤减还是用户只有少量减少，看到的图形都是变化巨大，没有趋势的参考意义了。 使用y轴min值可以同时避免上面的两个问题，但是如果设置成固定值，那么这个配置无法通用，不同的折线图需要不同的配置，而一旦数据持续单方向变化，min不再适用，那么你的代码可能需要跟着修改，维护性差。

解决方式 ​

echarts的min可以传入一个处理方法，接受一个参数，参数有两个属性，分别是数据中的最大值和最小值。利用这个处理方法，我们可以做到，当数据变化足够大时我们保持原样，提醒用户注意。当数据变化不大时，也可以看出趋势，而不是一条横线。代码实现如下：

interface MinValue {
  min: number
  max: number
}

yAxis: {
  min: ({ min, max }: MinValue) => {
    const trendRate = 0.1 // 定义可见的最小趋势比例
    return max - min < max * trendRate ? max - (max - min) / trendRate : 0
  },
},

我们定义一个可见的最小趋势比例trendRate，如果实际趋势过缓，我们控制min值，使变化区间与总区间的比值为trendRate，如果趋势比例大于trendRate，则min设置为0，保持原样输出。 这样，在数据过大情况下，不管趋势变化如何，用户都可以很容易的从图中很方便的感知到变化，个人认为是个比较完美的处理方式了。