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

<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,
  done: function (resu, curr, count) {
  //回调渲染折线图
  /**
   * 报表功能
   */
  var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
  // 显示标题，图例和空的坐标轴
  echartsRecords.setOption({
   title: {
   text: 'appCrash'
   },
   tooltip: {
   trigger: 'axis'
   },
   legend: {
   data: ['ios_owner', 'ios_bus', 'ios_oa', 'android_owner', 'android_bus', 'android_oa']
   },
   grid: {
   left: '3%',
   right: '4%',
   bottom: '3%',
   containLabel: true
   },
   toolbox: {
   feature: {
    saveAsImage: {}
   }
   },
   xAxis: {
   type: 'category',
   boundaryGap: false,
   data: []
   },
   yAxis: [
   {
    //设置类别
    type: 'value',
    //y轴刻度
    axisLabel: {
    //设置y轴数值为%
    formatter: '{value} %',
    },
   }
   ],
  });
  //渲染折线图
  echartsRecords.setOption({
   xAxis: {
   data: resu.Xtitle
   },
   series: resu.appCrashZhexiantu
  });
  }
 });


 // 监听搜索操作
 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>