使用fastadmin图表的小坑,没事多看看文档和社区

发布于 2018-12-08 10:36:29

订单管理进行统计订单成交数和订单量。
将控制台的Echart表移至订单管理--更直观显示

Tab静态代码:
<a class="btn btn-addtabs btn-warning"  href="{:url('admin/echart/index')}" title="{:__('订单数据图表')}"><i class="fa fa-folder-o"></i>订单数据图表</a>

不过在这之前可以去看下这大佬的文章,了解下requireJs的简单使用
https://forum.fastadmin.net/thread/6505
我的需求
1.image.png
点击自定义的按钮 增加一个新的tab
2.显示7天的成交量和订单数
image.png
以上是想要的需求!

win环境:vagrant(redhat)
后台版本:Fastadmin-0119beta(线上版本太老了)
PHP:5.6.15版本

如果想使用更高的版本请去更新最新版的fastadmin!!

实际开发中遇到的坑:

操作过程如下:
第一坑:js方法名与control层方法名不一致
出现结果:获取不到初始化的数据--karson默认化的数据

重现小坑1

复制一份初始化页面Dashboard的所有view,control,js有关的文件,并改成以下文件名
image.png
image.png
出现坑的代码如下
JS层:
image.png
control层
image.png

社区是个好东西,希望你也逛逛!!
根据上述require入门讲解查找发现
image.png
image.png

对requireJs初步了解,至少看懂了一点

JS方法名(echart.js)与PHP控制器方法名一致

至此解决了第一坑
代码如下:
image.png
image.png

JS初始化图表参数说明:
image.png

walden专有名词
说白就是主题名 显示的Echart的主题(可随便选择,喜欢什么主题可下载覆盖fastadmin里面的相关JS)
image.png
附上地址:http://echarts.baidu.com/theme-builder/

---echarts功能实现
第二坑:可能某一天成交量没有或者为0
这个坑我想了好久,没有一个确定的解决方法
过程也是各种百度
最后总结下方法如下:
1.求显示7天的日期(x轴上显示的日期)
2.获取成交量和订单量对应的日期
3.成交量和订单量与7天求差集并给默认值为0(差集的日期说明的是成交量某一天可能为0)
4.组合有效数组
5.数组去重
6.返回绑定前端

代码实现我的需求
JS代码:
只有去掉这边的部分代码
image.png
PHP 代码
image.png
image.png

HTML代码不变
image.png
效果如下:
image.png

有错误地方欢迎指正!!!
喜欢打赏,收藏下!

5 条评论

发布
问题