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

2023-11-19 19:21:04

1. 引言

在上篇博客汽车销量查询小助手（小程序）开发心路历程我分享了整个小程序的开发历程，感谢有那么多同学阅读和关注。

后面就会将小程序中的各个功能块以代码片段的方式给大家分享出来，所有的代码都在我的 github （https://github.com/ReyCG/carsales-snippets）项目下，

直接使用微信开发工具的代码片段导入，即可看到效果。首先来看第一个功能：销量趋势图 。该功能的代码地址在 https://github.com/ReyCG/carsales-snippets/tree/master/cn-sales-chart .

2. 效果图及功能点说明

界面是这样的：

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

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

3. 使用工具说明

ui 效果使用的是 WeUI基础控件库
图形展示使用的是 echarts for weixin

4.整体实现分析说明

1. 使用 echarts 异步加载

  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, this, ‘#cnsales-line-chart‘)
  },

4. 对 echarts 图形的展示进行封装,只需传入 option, page 上下文和 ec-canvas id 即可展示图形

chartUtils.initChart(cnSalesOption, this, ‘#cnsales-line-chart‘)

5. 注意点

不要试图通过控制 css 使时间周期按钮放置在 echarts 图形区域内，这样会导致按钮点击无效。无论设置多少 z-index 都是无效的。

这是因为

　echarts 图形是使用的 canvas 原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。

6. 附注

该功能可以在我开发的小程序 汽车销量查询小助手 查看完整的效果，可以在微信中搜索 汽车销量查询小助手 或者扫描下方二维码查看。

如果您对我的文章或程序代码有意见和建议或者问题，欢迎各位在评论区或者 github 上留言，我将仔细阅读，认真回复。

如果我的文档或程序代码对您有所帮助，请帮忙推荐或转发，非常感谢~