layui做折线图_flask+layui+echarts实现前端动态图展示数据效果

效果图：

该效果主要实现一个table展示数据，并在下方生成一个折线图。

实现方式：

1、首先需要对表格进行一个数据加载，这里用到了layui的table.render，具体用法可以参考

https://www.layui.com/doc/modules/table.html

html部分：

js部分：

layui.use(['form', 'table', 'echarts'], function () {

var $ = layui.jquery,

form = layui.form,

table = layui.table;

echarts = layui.echarts;

//table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作

tableIns = table.render({

elem: '#reportTableId',

url: '/api/dataFactory/onlineReport/searchAppCrash',

method: 'post',

toolbar: '#toolbarDemo',

defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可

title: '提示'

, layEvent: 'LAYTABLE_TIPS'

, icon: 'layui-icon-tips'

}],

request: {

pageName: 'page' //页码的参数名称，默认：page

, limitName: 'limit', //每页数据量的参数名，默认：limit

},

cols: [[

{field: 'id', Width: 80, title: 'ID', sort: true},

{

field: 'ios_owner', minWidth: 120, title: '业主-ios', sort: true, templet: function (d) {

return d.ios_owner + '%'

}

},

{

field: 'ios_bus', minWidth: 120, title: '商家-ios', sort: true, templet: function (d) {

return d.ios_bus + '%'

}

},

{

field: 'ios_oa', minWidth: 100, title: 'OA-ios', templet: function (d) {

return d.ios_oa + '%'

}

},

{

field: 'android_owner', minWidth: 100, title: '业主-android', templet: function (d) {

return d.android_owner + '%'