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;
});

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