分享一下近期项目上遇到的一些需求和解决方法

（办公区窗外随手拍，管道上有只猫，不知道大家发现没？）

 前言

最近在做的一个项目，因为非常着急，所以用react+umi和vue2的两个架子同时开发需求和功能，然后让一位前端大佬用微前端合在了一起发布上线。

现在需求做的差不多了，然后要把react做的那部分需求，再用vue再实现一遍。

很不幸，react那部分就是我和另一位前端一起完成的，另一个前端去了其它项目组了，所以这份‘重担’就落在我身上了。

正好在代码迁移的这个过程中，遇到了一些问题，和大家分享一下。共勉。

elementPlus 和 antd 日期选择器组件如何只可选某些指定的日期（或禁用某些指定的日期）

// 后端返回的数据类似这种
// [{id:11111,year:2024,month:1},
//  {id:22222,year:2024,month:2} ...... ]
// 我们需要将数据 拼成这样 NonDisabledDate 的
// 可选日期
const NonDisabledDate = ['2024-2','2024-4','2024-6','2024-9','2023-5','2023-6']

const disableFun=(current)=>{
  // elementUI 写法
  return !NonDisabledDate.includes(`${current.getFullYear()}-${current.getMonth()+1}`)
  // antd 写法
  return !NonDisabledDate.includes(`${current.year()}-${current.month()+1}`)
  }

效果图展示

el-row,el-col 布局相关问题

问题复现

可以看到图片中是一行查询表单框，因为需要向右对齐，所以最后一列按钮总是会出现各种问题。

1、如果span给的太大，按钮后面会有留白。

2、如果span给的太小，小屏幕的话，就会出现错行的问题。

解决办法: 最后一列的span 给成任意小数即可

echarts柱状图如何自动出平均值以及手动设置y轴平均值

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [80, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      markLine: {
      data: [
         // 自动计算平均值     
          {
            type: 'average',
            name: '平均值'
          }
          ],
    }
    }
  ]
}

后来客户又提了一个需求，如果值为0的时候，就不要统计在平均数内。这个只需要 手动计算出平均值，然后把值给到yAxis就可以了。 

 

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [80, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      markLine: {
      data: [
              {
                yAxis: 160 // 手动设置平均值
              },
         // 自动计算平均值     
         // {
         //  type: 'average',
         //   name: '平均值'
         // }
          ],
          // 去掉平均值最后面的箭头
          symbol: 'none',  
          // 警戒线样式
           lineStyle: {
              type: 'solid',
              color: 'red',
            },
    }
    }
  ]
};