解决echarts 双Y轴配置+传入1天数据展示5天数据

传入一天的数据,默认展示了5天的数据

在这里插入图片描述
期望的结果,当只传入一天的数据的时候,只展示一天的时间刻度
在这里插入图片描述
由于官方文档关于 xAxis 的刻度预估是切成5段的,这个预估值比较坑
也就是说不管你传入的是几个数据,都会默认切成5端展示
在这里插入图片描述
通过配置 xAis的 splitNumber 为1,以及 showMaxLable:false, showMinLable:false将收尾的最大以及最小的lable去掉
在这里插入图片描述

xAxis:{
    type: 'time',
    data: this.type === 'category' ? this.category : null,
    //默认的预估值5,此时只有一个数据的时候,只需要显示一个
    splitNumber: 1,
    axisLabel: {
        showMaxLabel: false, // 是否展示最右侧的label
        showMinLabel: false,
        // X轴不展示年份
        formatter(value) {
          return dayjs(value).format('MM-DD');
        },
        // 超过50条数据将X轴的刻度旋转50度
        rotate: this.data[0].data.length > 30 ? 50 : 0 ,
        maxInterval: 3600 * 24 * 1000 // 设置x轴的时间间隔
  },
}

双Y轴,左右2边被切成不同的份数,左边 5个刻度,右边4个刻度

在这里插入图片描述
希望左右2边切成相同的份数
在这里插入图片描述
根据官方文档:
在这里插入图片描述
可是通过设置 yAxis 的max min 以及 interval来调整
在这里插入图片描述

传入左边的做大值,最小值 然后 最大值最小值赋给 max min

**需要注意点:
当传入的数据的数值为0的时候,此时每一Y 轴,需要处理最大值为0的时候,按每格0.2的间隔切割
在这里插入图片描述
如图:虽然PCU的数值为0 ,但是Y轴还是按照 每隔 0.2 被切割成了5份
代码如下:

 yAxis: [
      {
        position: 'left',        
        max: this.dauMax, // 计算最大值
        min: 0,
        //  平均分为5份
        interval: this.dauMax === 0 ? 0.2 : Math.ceil(this.dauMax / 5),     
      },
      {
        // // 网格线
        position: 'right',
        min: 0,
        max: this.pcuMax, // 计算最大值
        //  平均分为5份
        interval: this.pcuMax === 0 ? 0.2 : Math.ceil(this.pcuMax / 5), 
      }
 ],
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页