前端展示(四)
前端展示(四)
前端的展示然后是ECCV2018论文信息展示
其中通过前面的后端信息整理工作获得的数据在本页面展示
其中包括词频的前N个和词云图的展示
直接通过文件的读取在和echarts的图表展示进行展示
后端向前端传送数据
@app.route('/wordcloud')
def skin2():
data = []
data1=[]
readexcel = xlrd.open_workbook(r'./allpaper/words.xls', encoding_override='utf-8')
sheet = readexcel.sheet_by_name('Sheet1')
for i in range(0, 20):
# print('第', i + 1, '行数据', sheet.row_values(i), sheet.row_values(i)[0])
data.append(sheet.row_values(i)[0])
data1.append(sheet.row_values(i)[1])
# print(data)
return render_template("wordcloud.html", data=data, data1=data1)
前端进行接收
echarts使用js引入
然后将数据展示在echarts中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ url_for('static', filename='css/wordcloud.css') }}">
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<title>Title</title>
</head>
<style>
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
height: 100%;
}
th, td, tr {
text-align: center;
vertical-align: middle;
border: 1px solid black;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #BDBDBD;}
</style>
<body>
<nav class="navbar">
<span class="open-side">
<a href="#" onclick="openSideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#fff" stroke-width="5"></path>
<path d="M0,14 30,14" stroke="#fff" stroke-width="5"></path>
<path d="M0,23 30,23" stroke="#fff" stroke-width="5"></path>
</svg>
</a>
</span>
<ul class="navbar-nav">
<li><a href="home" >HOME</a></li>
<li><a href="index" >Check</a></li>
<li><a href="wordcloud" >ECCV2018</a></li>
<li><a href="ICCV2019">ICCV2019</a></li>
<li><a href="compare ">Compare</a></li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSideMenu()">×</a>
<a href="home">HOME</a>
<a href="index" >Check</a>
<a href="wordcloud" >ECCV2018</a>
<a href="ICCV2019">ICCV2019</a>
<a href="compare ">Compare</a>
</div>
<section class="layout absolute">
<article class="left-center-right">
<div class="left">
<table >
<tr>
<th>TOP10热点词汇</th>
</tr>
<tr>
<td>{{ data[0]}}</td>
</tr>
<tr>
<td>{{ data[1]}}</td>
</tr>
<tr>
<td>{{ data[2]}}</td>
</tr>
<tr>