图书管理系统

成绩管理系统

  接着上次的菜单界面，我们补全右侧的数据可视化界面，包括堆叠面积图、饼形图、柱状图及进度条。当然了，这个地方你如果想要炫酷一些的，可以选择河流图或是知识图谱这样的来做。下面就是最终的界面展示：
  左侧为图书管理系统的菜单，右侧为数据可视化页面

接下来是图的细化
  各年级学生借书人次(人)堆叠面积图

  平均每天借书数目(本)直方图

直接上程序

程序代码：

<header class="header left">
  <div class="left nav">
      <ul>
          </ul>
  </div>
    <div class="header_center left" style="position:relative">
        
        <h2><strong>图书大数据分析展示</strong></h2>

    </div>
    <div class="text_right">
        <ul>

        </ul>
    </div>

</header>
<div class="con left">
  <!--数据总概-->
  <div class="con_div">
      <div class="jaslkj">
          <div class="left">
              <img src="a.png" class="qtuwy"/>
              <div class="klaj">
                  <p>全年借书总量(万本)</p>
                  <p>53</p>
              </div>
          </div>
          <div class="right">
              <img src="j.png" class="left text01_img"/>
              <div class="jljlj">
                  <p>当月借书总理(万本)</p>
                  <p>7</p>
              </div>
          </div>
      </div>
      <div class="con_div_text left">
          <div class="con_div_text01 left">
              <img src="l.png" class="kajsk"/>
              <div class="hakjh">
                  <p>借书人数(人)</p>
                  <p class="sky">12356</p>
              </div>
          </div>
          <div class="con_div_text01 right">
              <img src="sd.png" class="sl"/>
              <div class="left text01_div">
                  <p>当月借书人数(人)</p>
                  <p class="sky">1235</p>
              </div>
          </div>
      </div>
      <div class="t">

          <div class="qwe">
              <img src="../images/info_11.png" class="left text01_img"/>
              <div class="xm">
                  <p>学生占比</p>
                  <p class="org">92%</p>
              </div>
          </div>
          <div class="co">
              <img src="i.png" class="x"/>
              <div class="ft">
                  <p>教师占比</p>
                  <p class="org">8%</p>
              </div>
          </div>
      </div>
  </div>
    <!--统计分析图-->
    <div class="div_any">
        <div class="asd">
            <div class="hi">
                <div class="e"><img src="fg.png">各年级学生借书数量占比</div>
                <p id="gr" class="ar"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_6.png">各学院学生借书数量占比</div>
                <p id="histogramChart2" class="p_chart"></p>
            </div>
        </div>
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_7.png">各年级学生借书人次(人)</div>
                <p id="lineChart1" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_8.png">各专业学生借书人次(人)</div>
                <p id="lineChart2" class="p_chart"></p>
            </div>
        </div>
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_9.png">上周各年级学生借书人次占比(%)</div>
                <p id="histogramChart3" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_10.png">平均每天借书数目(本)</div>
                <p id="histogramChart4" class="p_chart"></p>
            </div>
        </div>
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_11.png">每天借书时间段</div>
                <p id="pieChart1" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="../images/title_12.png">每周借书时间段</div>
                <p id="pieChart2" class="p_chart"></p>
            </div>
        </div>
    </div>

全部程序

print:("q917267119")