• 前端展示(四)


    前端展示(四)

    前端的展示然后是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;
    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()">&times;</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>

    效果如下

  • 相关阅读:
    用自己的语言描述一下程序连接数据库的过程?
    什么是AJAX?
    怎样计算页面执行的时间?
    缓存的几种不同的实现方法?
    <%@Page%>中的Codebehind AytoEventWireup.inherits有何作用?
    上网搜关于缓存的内容,谈谈你对缓存的理解看法。并回答在网站开发中使用缓存有哪些好处?
    在access中如何创建数据库?你认为数据库在网站开发中所扮演的角色是什么?使用数据库和使用文件,两者的优缺点是是什么?
    什么是Cookie对象,Session对象,application对象?
    docker 部署gin項目
    golang windows endless 运行报错 undefined: syscall.SIGUSR1
  • 原文地址:https://www.cnblogs.com/huangmouren233/p/14909728.html
Copyright © 2020-2023  润新知