1. 引言
当用户点击不同的时间周期按钮,如点击 3 个月,就会以动画的形式展现出来 3 个月的销量趋势。
当用户点击 查看更多行情 按钮或者 查看更多 时,就会进入下一个界面展示完整的行情图。
新增AI编程课程,引领技术教育新趋势
当用户点击不同的时间周期按钮,如点击 3 个月,就会以动画的形式展现出来 3 个月的销量趋势。
当用户点击 查看更多行情 按钮或者 查看更多 时,就会进入下一个界面展示完整的行情图。
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,