echarts设置折线图Y轴数据随当前页面数据动态变化

1,581 阅读1分钟

echarts折线图或者柱状图存在多条数据时,y轴数据就需要根据当前数据设置y轴的数据,如果隐藏某条数据时,就会存在折线走势不明显的情况,这时就需要设置y轴的最大值和最小值为动态数据。 注:本文章只展示设置动态y轴之后的效果,不与未设置做对比。

1. 效果展示

1.1多条折线同时存在时

此时y轴数据就是根据三条数据中最大值最小值来做y轴的底点和顶点,此处y轴的刻度为300,刻度可根据实际情况而定。 在这里插入图片描述

1.2只展示一条数据时

隐藏其他曲线时,此时y轴的底点就从874.192变成了1089.658 在这里插入图片描述

1.3其他展示效果

y轴的底点和顶点都会动态变化 在这里插入图片描述 在这里插入图片描述

2.代码展示

只需要在y轴设置添加如下设置,就可以达到以上效果,实现y轴动态变化

  yAxis: [{
      type: 'value',
       name: '数值',
       //轴刻度
       interval: 300,
       //会自动获取当前所有数据中最大值和最小值来作为y轴的底点和顶点
       min: 'dataMin',
       max: 'dataMax',
       splitArea: {show: false}
   }],