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()中去。
5、此时的resu就是你渲染表格时，拿到的后台返回的数据，但是这个地方需要注意的是，因为表格渲染数据的格式和折线图渲染数据的格式，是不一样的，所以后台需要返回两种格式的数据，以便于一种用于table展示，一种用于折线图展示。
上图中就是在查询接口的最后添加一个操作把数据在转换一份用于折线图展示，并且动态生成横坐标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代表的是具体的数据。数据格式为：
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
0
投稿猜你喜欢
- #!/usr/bin/env python# -*- coding:utf-8 -*-#导入random和string模块import ra
目标跟踪是对摄像头视频中的移动目标进行定位的过程，有着非常广泛的应用。实时目标跟踪是许多计算机视觉应用的重要任务，如监控、基于感知的用户界面- 本文简单介绍如何使用 Python 的 pyautogui 模块实现鼠标的自动移动以及键盘的自行输入. 该模块不是 Python 自带的,
- 绘制一个菱形四边形，边长为 200 像素。方法1和2绘制了内角为60和120度的菱形，方法3绘制了内角为90度的菱形。方法1
- 较新的pip已经支持list --outdated了，所以记录一下新的方法：pip list --outdated --format=leg
- 本文实例讲述了Python 网络编程之UDP发送接收数据功能。分享给大家供大家参考，具体如下：demo.py（UDP发送数据）：import
- CSS（叠层样式表）和XSL（可扩展样式语言）都可以定义XML文件的显示，这两种方式有哪些不同以及它们在使用中的具体方法，我们将在本文给予介
- 如果你的PHP网站换了空间，必定要对Mysql数据库进行转移，一般的转移的方法，是备份再还原，有点繁琐，而且由于数据库版本的不一样会导致数据
- python 地图经纬度转换、纠偏的代码如下所示：# -*- coding: utf-8 -*-import jsonimport urll
- study.py内容如下#!/usr/bin/env python# -*- coding:utf-8 -*-__author__ = &#
- 求3721,163,1,4832,1980,2008,68686688,9999,17173,5173,8848中最大的数明白后，试着求一下
- 在当今企业环境中，保证数据安全不是可有可无的工作。频繁曝光的入侵和欺骗事件、萨班斯•奥克斯利法案、HIPAA法案规定和爱国
- 不知道写得对不对啊！错了再改吧！加密函数Function Encodestr(s,xorstr)Dim enFor&nb
- 如何用FILESYSTEMOBJECT组件来做一个站内搜索？看看下面我们提供的例子，主要由searchpage.htm和searchresu
- 凯撒加密就是通过将字母移动一定的位数来实现加密和解密。明文中的所有字母都在字母表上向后(或向前)按照一个固定数目进行偏移，被替换成密文。例如
- 本文实例讲述了Python实现的IP端口扫描工具类。分享给大家供大家参考，具体如下：去年服务器老是被攻击，每次上线之后，上线的人急急忙忙下班
- 一个asp读取数据库中数据到数组的类，仅供参考！DbPath = "test.mdb"’数据库位置&
- 一、初始化CounterCounter支持3种形式的初始化，比如提供一个数组，一个字典，或单独键值对“=”式赋值。具体初始化的代码如下所示：
- 题目1、 请输入一个整数 ， 若该数是偶数 ， 输出 “ 是偶数” ”
- 前段时间开始学习JSON在ASP中的使用，JSON确实比XML方便。以前在写程序的时候有考虑使用XML来存储数据，但是一直觉得生成文档及文档
