前端展示
前端的展示然后是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) { padding: 0px; line-height: 1.8; color: rgb(104, 151, 187);">#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>
<td>{{ data[3]}}</td>
</tr>
<tr>
<td>{{ data[4]}}</td>
</tr>
<tr>
<td>{{ data[5]}}</td>
</tr>
<tr>
<td>{{ data[6]}}</td>
</tr>
<tr>
<td>{{ data[7]}}</td>
</tr>
<tr>
<td>{{ data[8]}}</td>
</tr>
<tr>
<td>{{ data[9]}}</td>
</tr>
</table>
</div>
<div class="center" id="main1"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: 'TOP10热点词汇统计'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: ['{{ data[0]}}', '{{ data[1]}}', '{{ data[2]}}', '{{ data[3]}}', '{{ data[4]}}', '{{ data[5]}}', '{{ data[6]}}', '{{ data[7]}}', '{{ data[8]}}', '{{ data[9]}}']
},
yAxis: {
type: 'value'
},
series: [{
data: ['{{ data1[0]}}', '{{ data1[1]}}', '{{ data1[2]}}', '{{ data1[3]}}', '{{ data1[4]}}', '{{ data1[5]}}', '{{ data1[6]}}', '{{ data1[7]}}', '{{ data1[8]}}', '{{ data1[9]}}'],
type: 'line'
}]
};
option && myChart.setOption(option);
</script>
<div class="right">
<img src="{{ url_for('static', filename='images/ciyuntu.png') }}">
</div>
</article>
</section>
<script>
function openSideMenu() {
document.getElementById('side-menu').style.width = '250px';
document.getElementById('main').style.marginLeft = '250px';
}
function closeSideMenu() {
document.getElementById('side-menu').style.width = '0';
document.getElementById('main').style.marginLeft = '0';
}
</script>
</body>
</html>
效果如下
