flask+layui+echarts實(shí)現(xiàn)前端動(dòng)態(tài)圖展示數(shù)據(jù)效果
更新時(shí)間：2019年09月30日 11:18:15 作者：胡先生7
這篇文章主要介紹了flask+layui+echarts實(shí)現(xiàn)前端動(dòng)態(tài)圖展示數(shù)據(jù)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
效果圖：
該效果主要實(shí)現(xiàn)一個(gè)table展示數(shù)據(jù)，并在下方生成一個(gè)折線圖。
實(shí)現(xiàn)方式：
1、首先需要對(duì)表格進(jìn)行一個(gè)數(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()方法返回一個(gè)對(duì)象：var tableIns = table.render(options)，可用于對(duì)當(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ì)時(shí)間', 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>
此時(shí)已經(jīng)基本實(shí)現(xiàn)了表格從后臺(tái)抓取數(shù)據(jù)實(shí)現(xiàn)動(dòng)態(tài)渲染表格。接下來需要實(shí)現(xiàn)的是，將表格里面的數(shù)據(jù)渲染成折線圖
2、首先html中寫一個(gè)放折線圖的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、然后在表格渲染完成后，渲染一個(gè)折線圖出來，這個(gè)時(shí)候需要在table.render()后添加一個(gè)回調(diào)函數(shù) done: function ，具體用法如下：
table.render({ //其它參數(shù)在此省略
done: function(res, curr, count){
//如果是異步請(qǐng)求數(shù)據(jù)方式，res即為你接口返回的信息。
//如果是直接賦值的方式，res即為：{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長(zhǎng)度
console.log(res);
//得到當(dāng)前頁碼
console.log(curr);
//得到數(shù)據(jù)總量
console.log(count);
}
});
4、然后我們需要將done: function添加到我們已經(jīng)寫到的table.render()中去。
5、此時(shí)的resu就是你渲染表格時(shí)，拿到的后臺(tái)返回的數(shù)據(jù)，但是這個(gè)地方需要注意的是，因?yàn)楸砀皲秩緮?shù)據(jù)的格式和折線圖渲染數(shù)據(jù)的格式，是不一樣的，所以后臺(tái)需要返回兩種格式的數(shù)據(jù)，以便于一種用于table展示，一種用于折線圖展示。
上圖中就是在查詢接口的最后添加一個(gè)操作把數(shù)據(jù)在轉(zhuǎn)換一份用于折線圖展示，并且動(dòng)態(tài)生成橫坐標(biāo)Xtitle
6、此時(shí)后臺(tái)的數(shù)據(jù)已經(jīng)準(zhǔn)備完畢，需要在前端渲染折線圖，具體的echarts的用法，請(qǐng)參考https://www.echartsjs.com/examples/zh/index.html，此處只是描述如何應(yīng)用折線圖。
此處我用的方法是先行在界面上渲染一個(gè)橫坐標(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)是百分比類型的，所以添加了百分號(hào)，不需要的可以去掉。此時(shí)沒有數(shù)據(jù)的坐標(biāo)已經(jīng)渲染好了，然后就是渲染數(shù)據(jù)
7、渲染數(shù)據(jù)。
前面在done: function函數(shù)中我們得到三個(gè)返回值，其中第一個(gè)返回值resu就是接口的返回值，我們需要拿到其中的渲染數(shù)據(jù)進(jìn)行渲染，代碼如下：
//渲染折線圖
echartsRecords.setOption({
xAxis: {
data: resu.Xtitle
},
series: resu.appCrashZhexiantu
});
Xtitle代表的是折線圖的橫坐標(biāo)，appCrashZhexiantu代表的是具體的數(shù)據(jù)。數(shù)據(jù)格式為：
OK，此時(shí)所有功能已經(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()方法返回一個(gè)對(duì)象：var tableIns = table.render(options)，可用于對(duì)當(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ì)時(shí)間', 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)前端動(dòng)態(tài)圖展示數(shù)據(jù)效果,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
最近,deepseek ai發(fā)布了一個(gè)超強(qiáng)開源版本的大模型,效果接近于Chat GPT o1-mini,并且提供了支持本地部署的版本,本教程旨在讓讀者學(xué)會(huì)本地部署,感興趣的小伙伴跟著小編一起來看看吧2025-03-03
本文是在GitHub上看到一個(gè)大?？偨Y(jié)的前端常見面試題，很多問題問的都很好，很經(jīng)典、很有代表性。上面沒有答案，我就整理了一下，從網(wǎng)上找了一些相關(guān)問題的答案2016-08-08
在C#和Java語言中for和foreach的區(qū)別詳解
這篇文章主要介紹了在C#和Java語言中for和foreach的區(qū)別詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
本篇文章主要介紹二維碼,二維碼大家都很熟悉,但是二維碼是如何生成的并不了解,對(duì)二維碼感興趣的小伙伴可以看下本篇文章2016-07-07
前幾天寫了個(gè)工具 CookieAdmin 來查看 IE 的 Cookie 有人問到實(shí)現(xiàn)原理，就寫了這篇文章 我不善于寫文檔或文章，所以還是代碼說話吧2009-12-12
ChatGPT是當(dāng)前自然語言處理領(lǐng)域的重要進(jìn)展之一，可應(yīng)用于多種場(chǎng)景，如智能客服、聊天機(jī)器人、語音助手等。本文通過調(diào)用OpenAI GPT-3模型提供的Completion API來實(shí)現(xiàn)一個(gè)更加智能的QQ機(jī)器人，文中原理代碼介紹的非常詳細(xì)，感興趣的同學(xué)可以參考下2023-05-05
gliffy-confluence-plugin-9.1.2插件教程詳解
這篇文章主要介紹了gliffy-confluence-plugin-9.1.2破解教程詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
一文學(xué)會(huì)Hadoop與Spark等大數(shù)據(jù)框架知識(shí)
Hadoop是一個(gè)開源的可運(yùn)行于大規(guī)模集群上的分布式文件系統(tǒng)和運(yùn)行處理基礎(chǔ)框架，Spark是UC Berkeley?AMPLab開發(fā)的是一種計(jì)算框架，分布式資源工作交由集群管理軟件（Mesos、YARN），本文介紹Hadoop與Spark大數(shù)據(jù)框架知識(shí)，感興趣的朋友一起看看吧2022-04-04
一個(gè)假冒的序列號(hào)被用來注冊(cè)Internet?Download?Manager,IDM正在退出的解決辦法
這篇文章主要介紹了一個(gè)假冒的序列號(hào)被用來注冊(cè)Internet?Download?Manager?IDM正在退出的解決辦法,在文章末尾給大家分享了序列號(hào)和綠色軟件，大家根據(jù)自身情況選擇，需要的朋友可以參考下2023-01-01
在Windows系統(tǒng)上安裝Cygwin搭建Swoole測(cè)試環(huán)境的圖文教程
這篇文章主要介紹了在Windows系統(tǒng)上安裝Cygwin搭建Swoole測(cè)試環(huán)境的方法，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05