在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

var Orderdata = {

createdata: {:json_encode(array_values($createlist))}

};

最后修改对应页面的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;

});

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