layui做折线图_flask+layui+echarts实现前端动态图展示数据效果
效果图：
该效果主要实现一个table展示数据，并在下方生成一个折线图。
实现方式：
1、首先需要对表格进行一个数据加载，这里用到了layui的table.render，具体用法可以参考
https://www.layui.com/doc/modules/table.html
html部分：
js部分：
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;
});
此时已经基本实现了表格从后台抓取数据实现动态渲染表格。接下来需要实现的是，将表格里面的数据渲染成折线图
2、首先html中写一个放折线图的div，具体的html代码如下：
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：
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;
});
});
总结
以上所述是小编给大家介绍的flask+layui+echarts实现前端动态图展示数据效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
本文标题: flask+layui+echarts实现前端动态图展示数据效果
本文地址: http://www.cppcns.com/wangluo/qitazonghe/277465.html
layui做折线图_flask+layui+echarts实现前端动态图展示数据效果相关推荐
- layui进度条：调用、参数设置、动态渲染、数据热更新 （含案例、代码）
文章目录 layui进度条:调用.参数设置.动态渲染.数据热更新 (含案例.代码) 一.demo案例 1.1. 应用 · 截图: 1.2. 案例 · 全部代码: 二.自定义案例 2.1. 部分代码: ...
- Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记 展示效果如下(主要记录一下 如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据) 柱状图实体展示数据 series: [{ na ...
- 使用echarts实现系统性能动态监控（数据实时展示）
一. 实现效果 先来一张效果图.gif 二.解决方案 1.目前的解决方案(异步加载) 目前的实现方式比较简单,前端定时从后台请求数据并渲染Echarts,这样做的方式比较简单粗暴,但也有如下几个问题: ...
- 比较两组数据的差异用什么图更直观_你真的懂如何展示数据吗？
↑ 关注 + 星标 ~ 有趣的不像个技术号每晚九点,我们准时相约 偶尔应金主爸爸要求改时间 大家好,我是朱小五 如何来展现的你的数据?是你有时不得不去思考的一个问题. 不同的展示方法,其效果往往差 ...
- php换脸,gif动态图换脸 动态图如何换脸 怎样更换gif动态图的人脸头像
在网上我们经常能看到一些非常滑稽的图片,比如说:图片中的人物是电影主角,但是脸却是其他人的,关键是换脸之后还非常的有意思,让人忍不住捧腹大笑.很多动态的恶搞图片也是这样,明明是个很正常的gif动态图片 ...
- 【数据处理】python使用matplotlib如何绘制动图；如何使用python进行动图gif制作；实时绘制动态图
一.现有的集成工具 绘制动图可以用一些现有的集成库,但是很麻烦,你需要调整和他们一样的参数和格式,定制化程度比较低,还得再去搞懂它们的东西.比如这些现有的: https://github.com/Ja ...
- python 网页樱花动态图_如何用Python实现动态图？
GIF(Graphics Interchange Format,图形交换格式)是一种位图图像格式, GIF格式的图像文件具有如下特点: (1)GIF格式图像文件的扩展名是".gif" ...
- layui做折线图_详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏
layuiAdmin单页版根据后台 使用模板方式加载菜单 lay-url="菜单接口" lay-headers="将token带入请求头",如果没有,去掉就行 ...
- layui做折线图_绘制曲线图/折线图只需4步
绘制曲线图/折线图只需4步 8390251284.gif 下载YJGraph文件拖入工程后 1.导入头文件 #import "YJGraphView.h" #import &quo ...
最新文章
- 如何为ccflow工作流引擎增加一个优先级PRI？
- 第二次作业+105032014001
- 网闸与防火墙的区别_网关和网闸、防火墙的区别？
- c语言中赋值表达示与复制语句的区别
- 阿里云MaxCompute香港开服 将引入更多人工智能服务
- python如何装sklearn_python安装sklearn
- vue-codemirror基本用法：实现搜索功能、代码折叠功能、获取编辑器值及时验证
- Fedora进入超级用户的方法
- [Twisted] transport
- 分页打印控制 摘自于网络：http://www.cnblogs.com/joinger/articles/1807517.html
- in use 大学英语4word_(完整word版)全新版大学英语第四册综合教程课后翻译答案及课文译文...
- [Serializable]在C#中的作用,.NET 中的对象序列化
- 局域网ip冲突检测工具_只需一台Android设备就能打通局域网内部通讯：文字聊天与文件传输...
- openCV专栏(二)：基础计算实战+色彩空间转换
- kaka启动出现：Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x00000c00000, 1073,0)
- CorelDRAW X4中文版高清实例视频教程
- 如何查看windows版本
- Java中将函数作为参数进行传递
- 【机器学习】逻辑回归（理论）
- QC、QA未来的发展前景和“钱”景在哪？
热门文章
- 区块链中的Merkle Tree
- python错误：SyntaxError: Non-UTF-8 code starting with ‘\xbd‘
- CAD怎么转换版本？两个办法解决
- 杜克大学计算机专业本科入学条件,杜克大学本科申请条件有哪些？
- 计算机毕业设计Java宠物用品交易网站(源码+系统+mysql数据库+lw文档)
- 七大Linux桌面介绍：Unity、KDE、GNOME等等
- Error: Can‘t locate revision identified by ‘xxx‘
- 百度小程序部署到服务器,三：百度小程序提交发布上线
- IO输入输出模型是每个Java开发人员必须理解的重点，深度解析跳槽从开始到结束完整流程
- 浅谈：canvas绘制图片，canvas转换图片灰度值。