文件之间的作用及关系
参考来源:SSM各个层的作用
echarts图表的插入与运用
layui模板中有很多echarts图表,对于layui和echarts不熟悉的新手来说,通过直接对echarts自带的表格修改的方式插入表格相对简单。下面展示修改echarts表格数据的方法。
1.引入渲染图表的js文件。
layui渲染表格的js文件通常在resources/statiec.layuiadmin/modules文件夹下,先查看想要的图表效果(可通过layui演示找到想要的的图表效果),将和目标图表的渲染结果相似的js文件复制一份,引入js文件后,对js文件进行修改。
引入js文件代码:(以demo.js为例)
<script>
layui.config({
base: 'layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'demo']);
</script>
修改js文件代码:(此js文件为动态表格数据效果)
//折线图
layui.use(['carousel', 'echarts'], function () {
var $ = layui.$
, carousel = layui.carousel
, echarts = layui.echarts;
var flag = 1;
var ratedom = [];
var timedom = [];
$.ajax({
type: "GET",//get方式获取
url: "/dysafety",//设置显示图表的url
dataType: "json",
async: false,
success: function (result) {
for (var i = 0; i < 10; i++) {
ratedom.push(result[i].rate);//开始状态:取出数据库中10个数据
timedom.push(result[i].time);//rate、time为对应关系
}
},
error: function (errorMsg) {
//设置echarts获取数据失败的提示
alert("出错了");
}
});
function refresh() {
//动态获取数据库中数据的函数
$.ajax