flask+layui+echarts實(shí)現(xiàn)前端動態(tài)圖展示數(shù)據(jù)效果

更新時間：2019年09月30日 11:18:15 作者：胡先生7

這篇文章主要介紹了flask+layui+echarts實(shí)現(xiàn)前端動態(tài)圖展示數(shù)據(jù)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下

效果圖：

該效果主要實(shí)現(xiàn)一個table展示數(shù)據(jù)，并在下方生成一個折線圖。

實(shí)現(xiàn)方式：

1、首先需要對表格進(jìn)行一個數(shù)據(jù)加載，這里用到了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)，可用于對當(dāng)前表格進(jìn)行“重載”等操作
 tableIns = table.render({
 elem: '#reportTableId',
 url: '/api/dataFactory/onlineReport/searchAppCrash',
 method: 'post',
 toolbar: '#toolbarDemo',
 defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具欄右側(cè)圖標(biāo)。如無需自定義，去除該參數(shù)即可
  title: '提示'
  , layEvent: 'LAYTABLE_TIPS'
  , icon: 'layui-icon-tips'
 }],
 request: {
  pageName: 'page' //頁碼的參數(shù)名稱，默認(rèn)：page
  , limitName: 'limit', //每頁數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit
 },
 cols: [[
  {field: 'id', Width: 80, title: 'ID', sort: true},
  {
  field: 'ios_owner', minWidth: 120, title: '業(yè)主-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: '業(yè)主-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: '統(tǒng)計(jì)時間', sort: true},
 ]],
 limits: [10, 15, 20, 25, 50, 100],
 limit: 10,
 page: true,
 });
 
 // 監(jiān)聽搜索操作
 form.on('submit(data-search-btn)', function (data) {
 var form_result = JSON.stringify(data.field);
 //執(zhí)行搜索重載
 table.reload('reportTableId', {
  page: {
  curr: 1
  }
  , where: {
  searchParams: form_result
  }
 }, 'data');
 return false;
 
 });
 </script>

此時已經(jīng)基本實(shí)現(xiàn)了表格從后臺抓取數(shù)據(jù)實(shí)現(xiàn)動態(tài)渲染表格。接下來需要實(shí)現(xiàn)的是，將表格里面的數(shù)據(jù)渲染成折線圖

2、首先html中寫一個放折線圖的div，具體的html代碼如下：

<div class="layui-card">
 <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>報(bào)表統(tǒng)計(jì)</div>
 <div class="layui-card-body">
  <div id="echarts-records" style="width: 100%;min-height:500px"></div>
 </div>
</div>

3、然后在表格渲染完成后，渲染一個折線圖出來，這個時候需要在table.render()后添加一個回調(diào)函數(shù) done: function ，具體用法如下：

table.render({ //其它參數(shù)在此省略
 done: function(res, curr, count){
 //如果是異步請求數(shù)據(jù)方式，res即為你接口返回的信息。
 //如果是直接賦值的方式，res即為：{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長度
 console.log(res);
 
 //得到當(dāng)前頁碼
 console.log(curr); 
 
 //得到數(shù)據(jù)總量
 console.log(count);
 }
});

4、然后我們需要將done: function添加到我們已經(jīng)寫到的table.render()中去。

5、此時的resu就是你渲染表格時，拿到的后臺返回的數(shù)據(jù)，但是這個地方需要注意的是，因?yàn)楸砀皲秩緮?shù)據(jù)的格式和折線圖渲染數(shù)據(jù)的格式，是不一樣的，所以后臺需要返回兩種格式的數(shù)據(jù)，以便于一種用于table展示，一種用于折線圖展示。

上圖中就是在查詢接口的最后添加一個操作把數(shù)據(jù)在轉(zhuǎn)換一份用于折線圖展示，并且動態(tài)生成橫坐標(biāo)Xtitle

6、此時后臺的數(shù)據(jù)已經(jīng)準(zhǔn)備完畢，需要在前端渲染折線圖，具體的echarts的用法，請參考https://www.echartsjs.com/examples/zh/index.html，此處只是描述如何應(yīng)用折線圖。

此處我用的方法是先行在界面上渲染一個橫坐標(biāo)和縱坐標(biāo)出來，然后在渲染數(shù)據(jù)進(jìn)去。代碼如下：

/**
 * 報(bào)表功能
 */
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
// 顯示標(biāo)題，圖例和空的坐標(biāo)軸
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: [
 {
  //設(shè)置類別
  type: 'value',
  //y軸刻度
  axisLabel: {
  //設(shè)置y軸數(shù)值為%
  formatter: '{value} %',
  },
 }
 ],
});

此處因?yàn)槲倚枰目v坐標(biāo)是百分比類型的，所以添加了百分號，不需要的可以去掉。此時沒有數(shù)據(jù)的坐標(biāo)已經(jīng)渲染好了，然后就是渲染數(shù)據(jù)

7、渲染數(shù)據(jù)。

前面在done: function函數(shù)中我們得到三個返回值，其中第一個返回值resu就是接口的返回值，我們需要拿到其中的渲染數(shù)據(jù)進(jìn)行渲染，代碼如下：

//渲染折線圖
echartsRecords.setOption({
 xAxis: {
 data: resu.Xtitle
 },
 series: resu.appCrashZhexiantu
});

Xtitle代表的是折線圖的橫坐標(biāo)，appCrashZhexiantu代表的是具體的數(shù)據(jù)。數(shù)據(jù)格式為：

OK，此時所有功能已經(jīng)完成，界面上已經(jīng)可以完美的展示出折線圖。

綜上的所有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)，可用于對當(dāng)前表格進(jìn)行“重載”等操作
 tableIns = table.render({
  elem: '#reportTableId',
  url: '/api/dataFactory/onlineReport/searchAppCrash',
  method: 'post',
  toolbar: '#toolbarDemo',
  defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具欄右側(cè)圖標(biāo)。如無需自定義，去除該參數(shù)即可
  title: '提示'
  , layEvent: 'LAYTABLE_TIPS'
  , icon: 'layui-icon-tips'
  }],
  request: {
  pageName: 'page' //頁碼的參數(shù)名稱，默認(rèn)：page
  , limitName: 'limit', //每頁數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit
  },
  cols: [[
  {field: 'id', Width: 80, title: 'ID', sort: true},
  {
   field: 'ios_owner', minWidth: 120, title: '業(yè)主-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: '業(yè)主-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: '統(tǒng)計(jì)時間', sort: true},
  ]],
  limits: [10, 15, 20, 25, 50, 100],
  limit: 10,
  page: true,
  done: function (resu, curr, count) {
  //回調(diào)渲染折線圖
  /**
   * 報(bào)表功能
   */
  var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
  // 顯示標(biāo)題，圖例和空的坐標(biāo)軸
  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: [
   {
    //設(shè)置類別
    type: 'value',
    //y軸刻度
    axisLabel: {
    //設(shè)置y軸數(shù)值為%
    formatter: '{value} %',
    },
   }
   ],
  });
  //渲染折線圖
  echartsRecords.setOption({
   xAxis: {
   data: resu.Xtitle
   },
   series: resu.appCrashZhexiantu
  });
  }
 });


 // 監(jiān)聽搜索操作
 form.on('submit(data-search-btn)', function (data) {
  var form_result = JSON.stringify(data.field);
  //執(zhí)行搜索重載
  table.reload('reportTableId', {
  page: {
   curr: 1
  }
  , where: {
   searchParams: form_result
  }
  }, 'data');
  return false;

 });
 });
</script>

總結(jié)

以上所述是小編給大家介紹的flask+layui+echarts實(shí)現(xiàn)前端動態(tài)圖展示數(shù)據(jù)效果,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！