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

作者:胡先生7 时间:2023-06-24 15:41:55 

效果图:

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},
]],
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>

3、然后在表格渲染完成后,渲染一个折线图出来,这个时候需要在table.render()后添加一个回调函数 done: function ,具体用法如下:


table.render({ //其它参数在此省略
done: function(res, curr, count){
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
console.log(res);

//得到当前页码
console.log(curr);

//得到数据总量
console.log(count);
}
});

4、然后我们需要将done: function添加到我们已经写到的table.render()中去。

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

5、此时的resu就是你渲染表格时,拿到的后台返回的数据,但是这个地方需要注意的是,因为表格渲染数据的格式和折线图渲染数据的格式,是不一样的,所以后台需要返回两种格式的数据,以便于一种用于table展示,一种用于折线图展示。

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

上图中就是在查询接口的最后添加一个操作把数据在转换一份用于折线图展示,并且动态生成横坐标Xtitle

6、此时后台的数据已经准备完毕,需要在前端渲染折线图,具体的echarts的用法,请参考https://www.echartsjs.com/examples/zh/index.html,此处只是描述如何应用折线图。

此处我用的方法是先行在界面上渲染一个横坐标和纵坐标出来,然后在渲染数据进去。代码如下:


/**
* 报表功能
*/
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} %',
 },
}
],
});

此处因为我需要的纵坐标是百分比类型的,所以添加了百分号,不需要的可以去掉。此时没有数据的坐标已经渲染好了,然后就是渲染数据

7、渲染数据。

前面在done: function函数中我们得到三个返回值,其中第一个返回值resu就是接口的返回值,我们需要拿到其中的渲染数据进行渲染,代码如下:


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

Xtitle代表的是折线图的横坐标,appCrashZhexiantu代表的是具体的数据。数据格式为:

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

OK,此时所有功能已经完成,界面上已经可以完美的展示出折线图。

综上的所有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,
 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>

总结

以上所述是小编给大家介绍的flask+layui+echarts实现前端动态图展示数据效果,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

来源:https://www.cnblogs.com/huxiansheng/p/11611178.html

标签:flask,layui,echarts
0
投稿

猜你喜欢

  • 使用keras内置的模型进行图片预测实例

    2021-12-27 17:54:29
  • 官方是这样定义 DOCTYPE HTML PUBLIC 的

    2007-05-31 09:43:00
  • python 中文件输入输出及os模块对文件系统的操作方法

    2023-04-10 18:34:05
  • 基于python实现百度语音识别和图灵对话

    2022-08-23 23:44:54
  • PHP实现的AES加密、解密封装类与用法示例

    2023-07-23 12:56:45
  • python爬虫实例详解

    2021-07-05 01:37:53
  • Pandas的read_csv函数参数分析详解

    2021-06-02 13:40:15
  • [译]图片优化 第五章:AlphaImageLoader

    2010-08-29 18:39:00
  • 浅谈Go语言中字符串和数组

    2024-04-25 15:14:36
  • 页面内查找

    2023-07-02 05:25:46
  • MySQL学习(七):Innodb存储引擎索引的实现原理详解

    2024-01-25 05:53:02
  • oracle中添加删除主键的方法

    2023-06-30 00:28:52
  • 读Json文件生成pandas数据框详情

    2023-01-11 19:29:01
  • python3使用requests模块爬取页面内容的实战演练

    2022-01-08 18:26:57
  • Python德劳内三角剖分详解

    2021-02-18 23:08:49
  • python读取html中指定元素生成excle文件示例

    2021-04-08 19:51:11
  • golang API请求队列的实现

    2024-03-11 16:39:50
  • CSS 裸奔节

    2009-04-09 19:36:00
  • python 移除字符串尾部的数字方法

    2023-03-18 19:38:21
  • Python安装图文教程 Pycharm安装教程

    2022-06-19 20:03:05
  • asp之家 网络编程 m.aspxhome.com