汽车销量查询小助手(小程序)销量趋势图功能及代码知识分享
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 上留言,我将仔细阅读,认真回复。
如果我的文档或程序代码对您有所帮助,请帮忙推荐或转发,非常感谢~
- 汽车销量查询小助手(小程序)开发心路历程
- 个人小程序智能对话查询工具完整代码分享--快递、身份证、词典、诗词等
- android 分享功能,实现分享的程序与进行分享信息的代码
- 微信小程序支付功能 php后台对接完整代码分享
- 微信小程序开发中常用的功能代码分享
- [微信小程序]转发(分享)和打电话功能,完整代码附效果图
- 微信公众平台开发应用(天气预报、股票查询、手机归属地查询、在线听音乐、翻译、成绩查询等功能)代码分享如下
- 这个多条件不确定查询功能怎么实现,写的代码还有问题
- 基于JS组件实现拖动滑块验证功能(代码分享)
- c#多线程网络聊天程序代码分享(服务器端和客户端)
- 使用ARM汇编破解iOS程序基础知识分享
- 调用新浪微博接口,实现“分享”功能——代码实现
- 基于php&mysql实现聊天室功能的代码实例分享
- Angularjs添加排序查询功能的实例代码
- 分享制作精良的知识管理系统 博客园博客备份程序 Site Rebuild
- 【分享】怎么设置使MyEclipse的代码提示功能一样能像Microsoft Visual Studio的代码提示功能
- 分享非常有用的Java程序(关键代码)(七)---抓屏程序