专栏首页桑先生的专栏Fastadmin使用—新增可视化数据

Fastadmin使用—新增可视化数据

在fastadmin开源项目中,首页有可视化配图,看起来很酷炫.那么,如果自己想做自己的可视化使徒.有需要怎么做呢?

首先,我们需要了解下echarts

其次,我们需要明确的是使用fastadmin,前端使用的是requirejs.作为一个纯后台路人.表示根本不知道是啥玩意.但这不影响我们去使用它.

首先得用模块化的方式编写我们的js,使用define定义一个模块:

define('modelname',['jquery','xxx'], function ($,xxx) {

    var hehe = {
        function1: function () {
            
        },
        function2: function () {
            
        },
        function3: function () {
            
        }
    };
    return hehe;
});

define有三个参数,第一个是模块名(可以不写,默认与模块名与文件名同名),第二个是当前模块依赖的其他模块,第三个是一个function,模块体,要求必须return一个数据。

上面这段代码如果用php来理解,可以看作是:

require jquery.php
require xxx.php

class hehe{
    public function function1(){

    }
    public function function2(){

    }
}

那么我们在其他地方就可以使用这个模块:

require(['jquery', 'hehe'], function ($, hehe) {
    //调用hehe模块提供的方法
    hehe.function1();
    hehe.function2();
    hehe.function3();
});

这段代码如果也用php的思维来理解,你可以看作是:

require jquery.php;
reuqire hehe.php

hehe.function1();
hehe.function2();
hehe.function3();

首先我们写我们的控制器,正常查询你所需要展示的数据.然后通过Tp的方法渲染给前台.

public function index(){
 $todayusersignup = db('info')->where('admin_id',$ath_id)->value('name');
 $this->view->assign([ 
            'createlist'  => $createlist,
        ]);
        return $this->view->fetch();
}

然后修改html页面   这里是定义js

<script>
    var Orderdata = {
    createdata: {:json_encode(array_values($createlist))}
  };
</script>

最后修改对应页面的js文件

define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {

    var Controller = {
        index: function () {
           // 基于准备好的dom,初始化echarts实例
          var zhexian = Echarts.init(document.getElementById('zhexian'), 'walden');
          var three ={
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [ '测试1', '测试1',  '测试1', '测试1', '测试1'],
                    splitLine: { //网格线
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: { //网格线
                        show: false
                    },
                },
                series: [{
                    data: [
                        {value: Orderdata.ceshi1},
                        {value: Orderdata.ceshi1},
                        {value: Orderdata.ceshi1},
                        {value: Orderdata.ceshi1},
                        {value: Orderdata.ceshi1},
                    ],
                    type: 'line',
                    areaStyle: {}
                }]
            }
 // 使用刚指定的配置项和数据显示图表。

           
            zhexian.setOption(three);
          

            $(window).resize(function () {
                zhexian.resize();
            });

            $(document).on("click", ".btn-checkversion", function () {
                top.window.$("[data-toggle=checkupdate]").trigger("click");
            });

            $(document).on("click", ".btn-refresh", function () {
                setTimeout(function () {
                    zhexian.resize();
                }, 0);
            });

        }
    };
    return Controller;
});

以上都是测试数据.只提供思路.切勿照搬覆用.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP使用header+Location实现网站301重定向

    今天没事做.准确的说这几天都没啥事做.想写点东西.又不知道写什么.所以去最大同性交友社区找了个点别人的项目.想呢借鉴下别人的写法.

    桑先生
  • 公众号开发之万丈高楼平地起

    没啥好写的了.也懒得写了.碰巧这几天在开发公众号.所以记录下开发公众号的相关流程.

    桑先生
  • ThinkPHP5.1composer安装和使用PHPExcel

    这几天在整PHP的导出.相对5.0版本.5.1废弃了vendor和import助手函数.通过composer自动加载完成引入.废话少说.直接抱起键盘就是干 ?

    桑先生
  • 简单讲解《前端模块化》(一)

    也就是后来的 common.js ,AMD, es6 ,CMD这些。。这些就下次再说了,

    web前端教室
  • 谈谈ES6语法(汇总下篇)

    ES2017标准引入了async函数,使得异步操作更加方便。async函数是Generator函数的语法糖。不打算写Generator函数,感兴趣的话可以看文档...

    嘉明
  • jQuery on()方法

    绑定click事件,使用jquery的$().click(func)?别闹了,属实是low。

    陈灬大灬海
  • 前端-part5-JavaScript函数+面向对象+部分基础方法

    少年包青菜
  • Html|Vue实战小项目-购物车

    在很多电商网站中,都有一个非常重要的功能,那就是购物车。接下来将使用Vue.js实现一个简易的购物车项目。实现的功能有全选或选择部分商品、计算总价、对商品数量进...

    算法与编程之美
  • async/await 原理及执行顺序分析

    之前写了篇文章《这一次,彻底理解Promise原理》,剖析了Promise的相关原理。我们都知道,Promise解决了回调地狱的问题,但是如果遇到复杂的业务,代...

    桃翁
  • 十二、面向对象实战之封装拖拽对象

    前面几篇文章,我跟大家分享了JavaScript的一些基础知识,这篇文章,将会进入第一个实战环节:利用前面几章的所涉及到的知识,封装一个拖拽对象。为了能够帮助大...

    用户6901603

扫码关注云+社区

领取腾讯云代金券