[wx-charts] 柱状图时间跨度大于25就显示不全_小程序显示柱状图太密了-优快云博客

本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/103390895

本文针对wx-charts在特定时间跨度下显示不全的问题，提出了通过picker组件和computed属性动态调整时间范围的解决方案，确保了时间跨度不超过25天或25个月时的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题复现
在这里插入图片描述

解决过程

尝试通过组件解决,在wx-charts的文档和社区转了好久也没有发现问题
经测试发现不是所有的时间段都显示不全,时间的天数跨度大于25天就显示不全
月份的跨度也不能大于25

经上面的过程,大致可以将逻辑设置为以下几步

a. 在picker设置拦截
b. 使用computed动态计算25的范围,包括天和月

codes:

天:

<picker mode="date" fields="day" start="{{_startDate}}" end="{{params.endDate}}" class="inline-block picker-wrap" value="{{params.startDate}}" bindchange="pickStartDate">
	<view class="picker">{{params.startDate}}</view>
</picker>

月:

<picker mode="date" fields="month" class="inline-block picker-wrap" start="{{_startDate}}" end="{{params.endDate}}" value="{{params.startDate}}" bindchange="pickStartDate">
	<view class="picker">{{params.startDate}}</view>
</picker>

computed = {
   _startDate(){
     let _date = '';
    if(this.params.type === 1){
      _date = dayjs(this.params.endDate).subtract(24, 'day').format('YYYY-MM-DD')
    }
    if(this.params.type === 2){
      _date = dayjs(this.params.endDate).subtract(24, 'month').format('YYYY-MM')
    }
    return _date
   }
 };

只是暂时性解决了,不知道还有啥好的办法,待更新