flask+layui+echarts实现前端动态图展示数据效果
1星 112 浏览量
2020-10-16
06:55:19
上传
评论 1
收藏 70KB PDF 举报 
flask+layui+echarts实现前端动态图展示数据效果实现前端动态图展示数据效果
主要介绍了flask+layui+echarts实现前端动态图展示数据效果，本文通过实例代码给大家介绍的非常详细，具有
一定的参考借鉴价值,需要的朋友可以参考下
效果图：
该效果主要实现一个table展示数据，并在下方生成一个折线图。
实现方式：
1、首先需要对表格进行一个数据加载，这里用到了layui的table.render，具体用法可以参考
https://www.layui.com/doc/modules/table.html
html部分：
<table class="layui-hide" id="reportTableId" lay-filter="currentTableFilter"></table>
js部分：
<script>
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 + '%'
}
},
{
field: 'android_bus', minWidth: 100, title: '商家-android', templet: function (d) {
return d.android_bus + '%'
}
},
{
field: 'android_oa', minWidth: 130, title: 'OA-android', templet: function (d) {
return d.android_oa + '%'
}
},
{field: 'crash_day', minWidth: 110, title: '统计时间', sort: true},
资源评论
FlyWithJo2020-12-20我以为是源代码，原来只是个pdf文件。。。。。浪费积分
