flask+layui+echarts实现前端动态图展示数据效果

日期：2020-05-12 栏目：破解天下浏览：次

效果图：

该效果主要实现一个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},
 ]],
 limits: [10, 15, 20, 25, 50, 100],
 limit: 10,
 page: true,
 });
 
 // 监听搜索操作
 form.on('submit(data-search-btn)', function (data) {
 var form_result = JSON.stringify(data.field);
 //执行搜索重载
 table.reload('reportTableId', {
  page: {
  curr: 1
  }
  , where: {
  searchParams: form_result
  }
 }, 'data');
 return false;
 
 });
 </script>

此时已经基本实现了表格从后台抓取数据实现动态渲染表格。接下来需要实现的是，将表格里面的数据渲染成折线图

2、首先html中写一个放折线图的div，具体的html代码如下：

<div class="layui-card">
 <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
 <div class="layui-card-body">
  <div id="echarts-records" style="width: 100%;min-height:500px"></div>
 </div>
</div>

转载注明出处：http://www.heiqu.com/1551.html

flask+layui+echarts实现前端动态图展示数据效果

相关推荐