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;
});以上都是测试数据.只提供思路.切勿照搬覆用.
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读