[wx-charts] 柱状图时间跨度大于25就显示不全

最新推荐文章于 2024-09-09 09:47:57 发布

原创最新推荐文章于 2024-09-09 09:47:57 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#wxCharts #柱状图 #时间跨度 #时间跨度大于25 #25

WeChat 专栏收录该内容

7 篇文章

订阅专栏

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

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

解决过程

尝试通过组件解决,在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
   }
 };

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