master

分支 (1)

管理

管理

master

echarts-web
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>可视化展板-echarts</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 头部区域 -->
  <header>
    <h1>可视化展板-echarts</h1>
    <div class="showTime"></div>
  </header>
  <!-- 主体区域 -->
  <section class="main">
    <!-- 左侧区域 -->
    <div class="left">
      <div class="panel bar">
        <h2>柱形图-就业行业</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel line">
        <h2>
          折线图-人员变化
          <a href="javascript:;">2020</a>
          <a href="javascript:;">2021</a>
        </h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pie">
        <h2>饼状图-年龄分布</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <!-- 中间区域 -->
    <div class="center">
      <!-- 数字区域 -->
      <div class="number">
        <div class="no-hd">
          <ul>
            <li>123456</li>
            <li>456789</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>测试数据</li>
            <li>测试数据</li>
          </ul>
        </div>
      </div>
      <!-- 地图区域 -->
      <div class="map">
        <div class="earth"></div>
        <div class="revolve"></div>
        <div class="revolve2"></div>
        <div class="chart"></div>
      </div>
    </div>
    <!-- 右侧区域 -->
    <div class="right">
      <div class="panel bar2">
        <h2>柱形图-就业行业</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel line2">
        <h2>折线图-播放量</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pie2">
        <h2>饼状图-地区分布</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </section>
    <!-- 引入flexible.js自适应解决方案 -->
    <script src="./js/flexible.js"></script>
    <!-- 引入echarts.js文件 -->
    <script src="./js/echarts.min.js"></script>
    <!-- 引入jquery.js文件 -->
    <script src="./js/jquery.js"></script>
    <!-- 引入China.js文件 -->
    <script src="./js/china.js"></script>
    <script src="./js/index.js"></script>
  <script>
    // 实时显示当前时间
    function showTime() {
            var date = new Date()
            // 年月日
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            // 时分秒
            var hour = date.getHours()
            var minute = date.getMinutes()
            var second = date.getSeconds()
            // 实时显示
            document.querySelector('.showTime').innerHTML = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
        }
        setInterval('showTime()', 1000)
  </script>
</body>
</html>