PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通PHP建站技术分享-从入门到精通

QQ:420220301 微信/手机:150-3210-7690
当前位置:首页 > CMS教程 > Fastadmin

关于Echart实现图表订单数,成交数!!

管理员 2024-12-14
Fastadmin
6

注意:了解下requireJs的简单使用移步这边 点击跳转查看

需求:统计订单成交数和订单量
步骤:

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

代码块说明

1.页面展示Tab按钮代码

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

2.页面按钮位置展示

image.png

环境要求设置如下

1. 本地win环境:vagrant(redhat虚拟机)
2. 后台版本:Fastadmin-0119beta(线上版本太老了)
3. PHP:5.6.15版本

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

填坑:

第1坑:js方法名与control层方法名不一致

出现结果:获取不到初始化的数据--karson默认化的数据
解决方案
参考Dashboard原始代码页面(所有view,control,js有关的文件)进行复制一份并初始化并改成以下文件名

image.png
image.png

出现坑的代码如下
JS层

image.png

control层

image.png

社区是个好东西,希望你也逛逛!!
根据以下require入门讲解查找发现

image.png
image.png

故:JS方法名(echart.js)与PHP控制器方法名一致,修改如下即可

image.png
image.png

第2坑:可能某一天成交量没有需要自动补全为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

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

image.png

2.walden专有名词
说白就是主题名 显示的Echart的主题(可随便选择,喜欢什么主题可下载覆盖fastadmin里面的相关JS)

image.png

附上地址:http://echarts.baidu.com/theme-builder/

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


希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。

相关推荐

扫码关注

qrcode

QQ交谈

回顶部