汽车销量查询小助手(小程序)销量趋势图功能及代码知识分享

 

1. 引言

在上篇博客

 

当用户点击不同的时间周期按钮,如点击 3 个月,就会以动画的形式展现出来 3 个月的销量趋势。

当用户点击 查看更多行情 按钮或者 查看更多 时,就会进入下一个界面展示完整的行情图。

 

3. 使用工具说明

  1. ui 效果使用的是 
  data: {     ...     ecLine: {       lazyLoad: true     }
  ...
},
复制代码

2. 使用 数组 periodClass 和绑定事件 cnSalePeriodChange来控制时间周期按钮的点击 和 对应趋势 的展示

复制代码
      <view class='xltab'>        <text class='{{ periodClass[0] }}' data-index='1' catchtap='cnSalePeriodChange'>3个月</text>        <text class='{{ periodClass[1] }}' data-index='2' catchtap='cnSalePeriodChange'>6个月</text>        <text class='{{ periodClass[2] }}' data-index='3' catchtap='cnSalePeriodChange'>1年</text>        <text class='{{ periodClass[3] }}' data-index='4' catchtap='cnSalePeriodChange'>全部</text>      </view>
复制代码

3. 对 echarts 的 option 填充进行封装,根据不同的时间周期得到不同的 option

复制代码
  showCnSalesChart: function () {     const cnSalesOption = cnSaleUtils.fillUpCnSalesOption(this.data.periodIndex)     this.setData({       loading: false     })      chartUtils.initChart(cnSalesOption, 

                    
                
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信