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

效果图：

该效果主要实现一个桌子展示数据，并在下方生成一个折线图。

实现方式：

1、首先需要对表格进行一个数据加载，这里用到了获得的table.render，具体用法可以参考

https://www.layui.com/doc/modules/table.html

超文本标记语言部分：

table class=' layui-hide ' id=' reportTableId ' lay-filter=' currentTableFilter '/tablejs部分：

scriptlayui.use(['form '，' table '，' echart ']，function () { var $=layui.jquery，form=layui.form，table=layui . tableechart=layui . echart//table . render()方法返回一个对象：var tableIns=table.render(选项),可用于对当前表格进行"重载"等操作tableIns=table。render({ elem : ' # reportTableId '，URL : '/API/数据工厂/onlineReport/searchAppCrash '，method: 'post '，toolbar: '#toolbarDemo '，defaultToolbar: ['filter '，' exports '，' print '，{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可标题： '提示，layEvent: 'LAYTABLE_TIPS '，icon: 'layui-icon-tips' }]，请求： {页面名称： ' page '//页码的参数名称，默认：页面，限制名称："限制",//每页数据量的参数名，默认：limit }，cols: [[ {field: 'id '，Width: 80，title: 'ID '，sort: true}，{ field: 'ios_owner '，minWidth: 120，title: '业主-ios '，sort: true，模板：函数(d){ return d . IOs _ owner ' % ' }，{ field: 'ios_bus '，minWidth: 120，title: '商家-ios '，sort: true， 模板：函数(d) { return d.ios_bus '%' }，{ field: 'ios_oa '，minWidth: 100，title: 'OA-ios '，template :函数(d) { return d.ios_oa '%' }，{ field: 'android_owner '，minwidth 3360 100，title: '业主-android '，模板：函数(d){ return d . Android _ owner ' % ' }，{ field: 'android_bus '，minWidth: 100，title: '商家“安卓”，模板：函数(d) { return d.android_bus '%' }，{ field: 'android_oa '，minWidth: 130，title: 'OA-android '，模板：函数(d) { return d.android_oa '%' }，{field: 'crash_day '，minWidth: 110，title: '统计时间，sort: true}，]]，limit 3360[10，15，20，25，50，100]，limit: 10，page: true，})； //监听搜索操作形式。on(‘submit(数据-搜索-BTN)’)，function(数据){ var form _ result=JSON。stringify(数据。字段)；//执行搜索重载table.reload('reportTableId '，{ page: { curr: 1 }，其中： {搜索参数3360 form _ result } }，' data ')；返回false })；/script此时已经基本实现了表格从后台抓取数据实现动态渲染表格。接下来需要实现的是，将表格里面的数据渲染成折线图

2、首先超文本标记语言中写一个放折线图的div，具体的超文本标记语言代码如下：

div class=' layui-card ' div class=' layui-card-header ' I class=' fa fa-折线图图标/i报表统计/div class=' layui-card-body ' div id=' echart-records ' style=' width : 100%；最小高度：500 px '/div/div 3，然后在表格渲染完成后，渲染一个折线图出来，这个时候需要在table.render()后添加一个回调函数done:函数，具体用法如下：

table.render({ //其它参数在此省略done:函数(res，curr，count){ //如果是异步请求数据方式，res即为你接口返回的信息。 //如果是直接赋值的方式，res即为：{data: []，count: 99}数据为当前页数据、计数为数据总长度控制台。日志(RES)；//得到当前页码控制台。日志(当前)；//得到数据总量console.log(计数);}});4、然后我们需要将done:函数添加到我们已经写到的table.render()中去。

5.此时的resu是渲染表格时后台返回的数据。但是需要注意的是，表格渲染数据的格式与线图渲染数据的格式不同，所以后台需要返回两种格式的数据，一种可以用于table显示，另一种可以用于线图显示。

在上图中，查询界面的末尾增加了一个操作，将数据转换为折线图显示，并动态生成横坐标Xtitle

6.此时背景数据已经准备好，需要在前端渲染折线图。有关echarts的具体用法，请参考https://www.echartsjs.com/examples/zh/index.html。这里，我们只描述如何应用折线图。

我这里用的方法是先在界面上渲染一个横坐标和纵坐标，然后输入渲染的数据。代码如下：

/* * * report function */var echart records=echart . init(document . getelementbyid(' echart-records '，' Walden ')；//显示标题、图例和空坐标轴echartsrecords。set option({ title : { text : ' app crash ' }，tooltip 3360 { trigger : ' axis ' }，legend : { data :[' IOs _ owner '，' ios_bus '，' ios_oa '，' android_owner '，' android_bus '，' android_oa'] }，grid : { left 3: ' 3% '，right 3: ' 4% '，bottom 3: ' 3% '，这里，因为我需要的纵坐标是百分比类型的，所以添加了一个百分比符号，并且可以删除不必要的符号。此时，已经渲染了没有数据的坐标，然后渲染数据

7.呈现数据。

在done:函数函数中，我们得到了三个返回值，第一个是接口的返回值，我们需要得到渲染数据进行渲染。代码如下：

//呈现折线图echartsrecords . setoption({ xaxis 3360 { data : resu . xttitle }，series : resu . appcrashzheshentu })；Xtitle代表折线图的横坐标，appCrashZhexiantu代表具体数据。数据格式为：

好的，此时所有功能都已经完成，折线图可以完美的显示在界面上。

综上所述：

script layui.use(['form '，' table '，' echart ']，function () { var $=layui.jquery，form=layui.form，table=layui . tableechart=layui . echart//table . render()方法返回一个对象：var tableIns=table.render(选项),可用于对当前表格进行"重载"等操作tableIns=table。render({ elem : ' # reportTableId '，URL : '/API/数据工厂/onlineReport/searchAppCrash '，method: 'post '，toolbar: '#toolbarDemo '，defaultToolbar: ['filter '，' exports '，' print '，{ //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可标题： '提示，layEvent: 'LAYTABLE_TIPS '，icon: 'layui-icon-tips' }]，请求： {页面名称： ' page '//页码的参数名称，默认：页面，限制名称："限制",//每页数据量的参数名，默认：limit }，cols: [[ {field: 'id '，Width: 80，title: 'ID '，sort: true}，{ field: 'ios_owner '，minWidth: 120，title: '业主-ios '，sort: true，模板：函数(d){ return d . IOs _ owner ' % ' }，{ field: 'ios_bus '，minWidth: 120，title: '商家-ios '，sort: true， 模板：函数(d) { return d.ios_bus '%' }，{ field: 'ios_oa '，minWidth: 100，title: 'OA-ios '，template :函数(d) { return d.ios_oa '%' }，{ field: 'android_owner '，minwidth 3360 100，title: '业主-android '，模板：函数(d){ return d . Android _ owner ' % ' }，{ field: 'android_bus '，minWidth: 100，title: '商家“安卓”，模板：函数(d) { return d.android_bus '%' }，{ field: 'android_oa '，minWidth: 130，title: 'OA-android '，模板：函数(d) { return d.android_oa '%' }，{field: 'crash_day '，minWidth: 110，title: '统计时间，sort: true}，]]，limit 3360[10，15，20，25，50，100]，limit: 10，page: true，done:函数(resu，curr，count) { //回调渲染折线图/** * 报表功能*/var echart records=echart。 init(文档。getelementbyid(' echart-records ')，' Walden ')；//显示标题，图例和空的坐标轴电子病历。set option({ title : { text : ' appCrash ' }，工具提示： { trigger : ' axis ' }，图例： { data :[' IOs _ owner '，' ios_bus '，' ios_oa '，' android_owner '，' android_bus '，' android_oa'] })，grid : { left 3: ' 3% '，right 33: ' 4% '，bottom:设置类别键入： '值'，//y轴刻度axisLabel: { //设置y轴数值为% formatter :"{ value } % "，}，} ]，})；//渲染折线图电子病历。设置选项({ xaxis : { data : resu .Xtitle }，系列： resu。appcrashzhexantu })；} });//监听搜索操作形式。on(‘submit(数据-搜索-BTN)’)，function(数据){ var form _ result=JSON。stringify(数据。字段)；//执行搜索重载table.reload('reportTableId '，{ page: { curr: 1 }，其中： {搜索参数3360 form _ result } }，' data ')；返回false })；});/script总结

以上所述是小编给大家介绍的flask layui echarts实现前端动态图展示数据效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！