• 数据可视化ECharts:静态页面制作--主体

    mainbox布局分析 

    通过fix将盒子分成3份，其中中间的占5份

    1. .mainbox{
    2.     display: flex;
    3.     // 让它在同一行显示
    4.     min-width: 1024px;
    5.     max-width: 1920px;
    6.     // 这个是到最小宽度它就不做缩放了
    7.     margin: 0 auto;
    8.     height: 300px;
    9.     background-color: pink;
    10.     padding: .125rem .125rem 0;
    11.     .column{
    12.         flex: 3;
    13.     }
    14.     .column:nth-child(2){
    15.         flex: 5;
    16.     }
    17. }
    1.  <section class="mainbox">
    2.     <div class="column">1</div>
    3.     <div class="column">2</div>
    4.     <div class="column">3</div>
    5.   </section>

    panel盒子公共面板

     

    完成一份直接复制粘贴，后面填写东西就可以了

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>数据可视化</title>
    8.   <link rel="stylesheet" href="css/index.css">
    9. </head>
    10. <body>
    11.   <!-- 头部的盒子 -->
    12.   <header>
    13.     <h1>数据可视化-ECharts</h1>
    14.     <div class="showTime"></div>
    15.     <script>
    16.       var t = null;
    17.       t = setTimeout(time, 1000);//開始运行
    18.       function time() {
    19.           clearTimeout(t);//清除定时器
    20.           dt = new Date();
    21.           var y = dt.getFullYear();
    22.           var mt = dt.getMonth() + 1;
    23.           var day = dt.getDate();
    24.           var h = dt.getHours();//获取时
    25.           var m = dt.getMinutes();//获取分
    26.           var s = dt.getSeconds();//获取秒
    27.           document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
    28.           t = setTimeout(time, 1000); //设定定时器，循环运行     
    29.       }
    30.  
    31. </script>
    32.   </header>
    33.   <!-- 页面主体部分 -->
    34.   <section class="mainbox">
    35.     <div class="column">
    36.       <div class="panel bar">
    37.         <h2>柱形图-就业行业</h2>
    38.         <div class="chart"></div>
    39.         <div class="panel-footer"></div>
    40.       </div>
    41.       <div class="panel line">
    42.         <h2>柱形图-就业行业</h2>
    43.         <div class="chart"></div>
    44.         <div class="panel-footer"></div>
    45.       </div>
    46.       <div class="panel pie">
    47.         <h2>柱形图-就业行业</h2>
    48.         <div class="chart"></div>
    49.         <div class="panel-footer"></div>
    50.       </div>
    51.     </div>
    52.     <div class="column">2</div>
    53.     <div class="column">
    54.       <div class="panel bar">
    55.         <h2>柱形图-就业行业</h2>
    56.         <div class="chart"></div>
    57.         <div class="panel-footer"></div>
    58.       </div>
    59.       <div class="panel line">
    60.         <h2>柱形图-就业行业</h2>
    61.         <div class="chart"></div>
    62.         <div class="panel-footer"></div>
    63.       </div>
    64.       <div class="panel pie">
    65.         <h2>柱形图-就业行业</h2>
    66.         <div class="chart"></div>
    67.         <div class="panel-footer"></div>
    68.       </div>
    69.     </div>
    70.   </section>
    71.   <script src="js/flexible.js"></script>
    72. </body>
    73. </html>

    1. // css初始化
    2. *{
    3.     margin: 0;
    4.     padding: 0;
    5.     box-sizing: border-box;
    6. }
    7. body{
    8.     background: url(../images/bg.jpg) no-repeat top center;
    9.     line-height: 1.15;
    10. }
    11. header{
    12.     position: relative;
    13.     height: 1.25rem;
    14.     background: url(../images/head_bg.png) no-repeat;
    15.     background-size: 100% 100%;   
    16.     h1{
    17.         font-size: .475rem;
    18.     color: #fff;
    19.     text-align: center;
    20.     line-height: 1rem;
    21.     }
    22.     .showTime{
    23.         position: absolute;
    24.         right: .375rem;
    25.         top: 0;
    26.         line-height: .9375rem;
    27.         color: rgba(255, 255, 255, 0.7);
    28.         font-size: 0.25rem;
    29.     }
    30. }
    31. // 页面主体部分盒子
    32. .mainbox{
    33.     display: flex;
    34.     // 让它在同一行显示
    35.     min-width: 1024px;
    36.     max-width: 1920px;
    37.     // 这个是到最小宽度它就不做缩放了
    38.     margin: 0 auto;
    39.     height: 300px;
    40.     // background-color: pink;
    41.     padding: .125rem .125rem 0;
    42.     .column{
    43.         flex: 3;
    44.     }
    45.     .column:nth-child(2){
    46.         flex: 5;
    47.     }
    48.     .panel{
    49.         position: relative;
    50.         height: 3.875rem;
    51.         border: 1px solid rgba(25, 186, 139, 0.17);
    52.         background: url(../images/line\(1\).png)rgba(255, 255, 255, 0.03);
    53.         padding: 0 0.1875rem 0.5rem;
    54.         margin-bottom: 0.1875rem;
    55.     &::before{
    56.         position: absolute;
    57.         top: 0;
    58.         left: 0;
    59.         width: 10px;
    60.         height: 10px;
    61.         border-left: 2px solid #02a6b5;
    62.         border-top: 2px solid #02a6b5;
    63.         content: "";
    64.     }
    65.     &::after{
    66.         position: absolute;
    67.         top: 0;
    68.         right: 0;
    69.         width: 10px;
    70.         height: 10px;
    71.         border-right: 2px solid #02a6b5;
    72.         border-top: 2px solid #02a6b5;
    73.         content: "";
    74.     }
    75.     .panel-footer{
    76.         position: absolute;
    77.         bottom: 0;
    78.         left: 0;
    79.         width: 100%;
    80.         &::before{
    81.             position: absolute;
    82.             bottom: 0;
    83.             left: 0;
    84.             width: 10px;
    85.             height: 10px;
    86.             border-left: 2px solid #02a6b5;
    87.             border-bottom: 2px solid #02a6b5;
    88.             content: "";
    89.         }
    90.         &::after{
    91.             position: absolute;
    92.             bottom:  0;
    93.             right: 0;
    94.             width: 10px;
    95.             height: 10px;
    96.             border-right: 2px solid #02a6b5;
    97.             border-bottom: 2px solid #02a6b5;
    98.             content: "";
    99.         }
    100.     }
    101.     h2{
    102.         height: .6rem;
    103.         color: #fff;
    104.         line-height: .6rem;
    105.         text-align: center;
    106.         font-size: 0.25rem;
    107.         font-weight: 400;
    108.     }
    109.     .chart{
    110.         height:     3rem;
    111.         background-color: pink;
    112.     }
    113.     }
    114.  
    115. }

    08-中间布局

    - 上面是no 数字模块

    - 下面是map 地图模块

    1. 数字模块 no  有个背景颜色  rgba(101, 132, 226, 0.1);  有个15像素的内边距

    2. 注意中间列 column 有个 左右 10px 下 15px 的外边距

    3. no 模块里面上下划分  上面是数字（no-hd)   下面 是 相关文字说明(no-bd)

    4. no-hd 数字模块   有一个边框 1px solid rgba(25, 186, 139, 0.17)    

    5. no-hd 数字模块 里面分为两个小li  每个小li高度为 80px   文字大小为   70px   颜色为 #ffeb7b   字体是图标字体  electronicFont

    6. no-hd 利用 after 和 before制作2个小角，  边框  2px solid #02a6b5  宽度为 30px  高度为 10px

    7. 小竖线 给 第一个小li after 就可以  1px宽 背景颜色为 rgba(255, 255, 255, 0.2);     高度 50%  top 25% 即可

    8. no-bd 里面也有两个小li  高度为 40px   文字颜色为  rgba(255, 255, 255, 0.7)   文字大小为 18px   上内边距为  10px

    ~~~css

    /* 声明字体*/

    @font-face {

      font-family: electronicFont;

      src: url(../font/DS-DIGIT.TTF);

    }

    ~~~

    地图模块制作：

    1. 地图模块高度为 810px  里面包含4个盒子  chart 放图表模块      球体盒子  旋转1  旋转2  

    2. 球体图片模块 map1    大小为 518px  要加背景图片 因为要缩放100%     定位到最中央    透明度 .3  

    3. 旋转1  map 2    大小为 643px 要加背景图片 因为要缩放100%    定位到中央  透明度  .6   做旋转动画   利用z-index压住球体

    4. 旋转2  map3  大小为 566px  要加背景图片 因为要缩放100%    定位到中央 旋转动画 注意是逆时针

    ```html

     

                   

                       

                             

    • 125811

      •                        

    • 104563

      •                    

                   

                   

                       

                             

    • 前端需求人数

      •                        

    • 市场供应人数

      •                    

                   

               

               

                   

                   

                   

                   

               

    ```



     

    中间样式

    ```css

    /* 声明字体*/

    @font-face {

      font-family: electronicFont;

      src: url(../font/DS-DIGIT.TTF);

    }

    .no {

      background: rgba(101, 132, 226, 0.1);

      padding: 0.1875rem;

      .no-hd {

        position: relative;

        border: 1px solid rgba(25, 186, 139, 0.17);

        &::before {

          content: "";

          position: absolute;

          width: 30px;

          height: 10px;

          border-top: 2px solid #02a6b5;

          border-left: 2px solid #02a6b5;

          top: 0;

          left: 0;

        }

        &::after {

          content: "";

          position: absolute;

          width: 30px;

          height: 10px;

          border-bottom: 2px solid #02a6b5;

          border-right: 2px solid #02a6b5;

          right: 0;

          bottom: 0;

        }

        ul {

          display: flex;

          li {

            position: relative;

            flex: 1;

            text-align: center;

            height: 1rem;

            line-height: 1rem;

            font-size: 0.875rem;

            color: #ffeb7b;

            padding: 0.05rem 0;

            font-family: electronicFont;

            font-weight: bold;

            &:first-child::after {

              content: "";

              position: absolute;

              height: 50%;

              width: 1px;

              background: rgba(255, 255, 255, 0.2);

              right: 0;

              top: 25%;

            }

          }

        }

      }

      .no-bd ul {

        display: flex;

        li {

          flex: 1;

          height: 0.5rem;

          line-height: 0.5rem;

          text-align: center;

          font-size: 0.225rem;

          color: rgba(255, 255, 255, 0.7);

          padding-top: 0.125rem;

        }

      }

    }

    .map {

      position: relative;

      height: 10.125rem;

      .chart {

        position: absolute;

        top: 0;

        left: 0;

        z-index: 5;

        height: 10.125rem;

        width: 100%;

      }

      .map1,

      .map2,

      .map3 {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        width: 6.475rem;

        height: 6.475rem;

        background: url(../images/map.png) no-repeat;

        background-size: 100% 100%;

        opacity: 0.3;

      }

      .map2 {

        width: 8.0375rem;

        height: 8.0375rem;

        background-image: url(../images/lbx.png);

        opacity: 0.6;

        animation: rotate 15s linear infinite;

        z-index: 2;

      }

      .map3 {

        width: 7.075rem;

        height: 7.075rem;

        background-image: url(../images/jt.png);

        animation: rotate1 10s linear infinite;

      }

      @keyframes rotate {

        from {

          transform: translate(-50%, -50%) rotate(0deg);

        }

        to {

          transform: translate(-50%, -50%) rotate(360deg);

        }

      }

      @keyframes rotate1 {

        from {

          transform: translate(-50%, -50%) rotate(0deg);

        }

        to {

          transform: translate(-50%, -50%) rotate(-360deg);

        }

      }

    }

  • 相关阅读:
    深度学习中的“钩子“（Hook）：基于pytorch实现了简单例子
    SQL 中delete与truncate的区别
    怎么画出好看的神经网络图,神经元怎么画简笔画
    MySQL——锁
    Mendeley教程（1）中如何输出中文参考文献
    Positive证书：最便宜的SSL证书
    TypeScript（TS）基础内容详细介绍
    63.【c++基础篇.三个文件实现】
    微信小程序开发之路④
    Windows 通过注册表添加：鼠标右键文件夹内空白处，提示打开 Cmd、Powershell
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/127501281