一、路徑：dashboard\controller\Index.php，通過smarty模版引擎，賦值并渲染視圖頁面：
```
function lockData()
{
global $CONF;
$tpl = new Smarty;
$tpl->caching = true;
$tpl->cache_lifetime = 120;
//$tpl->debugging = true;
$pagestpl = './' . DASH_BOARD . '/view/lockdata.html';
if (!$tpl->isCached($pagestpl)) {
//判斷當前的緩存有效，如果有效，則無需使用模型取數據;
$tpl->assign('title', $CONF['sys_name']);
$tpl->assign('description', '漏刻有時（LOCKDATA），智能化數據展示解決方案服務商，讓更多的人看到數據可視化的魅力，促進前沿技術與產業融合，幫助非專業的工程師通過圖形化的界面輕松搭建專業水準的可視化應用，滿足會議展覽、業務監控、風險預警、地理信息分析等多種業務的展示需求。');
$tpl->assign('author', 'Poleung');
$tpl->assign('STATIC', 'static/lockdata/');
$tpl->assign('loading', 'Loading...');
$tpl->assign('retreat', '開啟/退出全屏');
$tpl->assign('subtitle1', '任務進程分布');
……
}
$tpl->display($pagestpl);
}
```
二、視圖呈現，路徑：dashboard\view\lockdata.html
```
<!doctype html>
<html style="overflow-x: hidden; overflow-y: auto;">
<head>
<meta charset="utf-8">
<title>{$title}</title>
<meta name="description" content="{$description}">
<meta name="author" content="{$author}">
<script type="text/javascript" src="{$STATIC}js/jquery.js"></script>
<script type="text/javascript" src="{$STATIC}js/echarts.min.js"></script>
<script type="text/javascript" src="{$STATIC}js/visual.js"></script>
<script type="text/javascript" src="{$STATIC}js/times.js"></script>
<script type="text/javascript" src="{$STATIC}js/jquery.liMarquee.js"></script>
<script type="text/javascript" src="{$STATIC}js/jquery.cxselect.min.js"></script>
<link rel="stylesheet" href="{$STATIC}css/common.css">
</head>
<body>
內容展示區
</body>
</html>
```
三、ECHARTS圖標核心代碼，路徑：static\lockdata\js\visual.js
* [ ] 前臺調用函數；
```
//調用Echarts;
$(function () {
echarts_1();
echarts_2();
echarts_3();
echarts_4();
echarts_5();
zb1();
zb2();
zb3();
```
* [ ] 通過api/api.php接口進行數據調用，并且自動刷新數據；
```
function showtotal() {
$.ajax({
type: "post",
async: false,
url: "../api/api.php?act=summary&token=3cab7ce4142608c0f40c785b5ab5ca24",
data: {},
dataType: "json",
success: function (result) {
$('.cnum').text(result.data.totaldata);
},
error: function (errmsg) {
$('.cnum').text("Ajax err！" + errmsg);
}
});
}
//自動刷新;
var interval;
showtotal();
clearInterval(interval);
interval = setInterval(function () {
showtotal()
}, 6 * 1000);
```
