可视化面板 -pc-布局

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

01-使用技术

完成该项目需要具备以下知识：

• div + css 布局

• flex 布局

• Less

• 原生js + jquery 使用

1. rem适配

• echarts基础

02- 案例适配方案

• 设计稿是1920px

  1. flexible.js 把屏幕分为 24 等份(1 rem= 1920/24= 80px)

  2. cssrem 插件的基准值是 80px

                     (为了不进行换算，我们安装这个插件，输入px,会给我们自动转化成rem)

                   插件-配置按钮---配置扩展设置--Root Font Size 里面 设置。

                   但是别忘记重启vscode软件保证生效

 

1 引入flexible.js

 怎么看是否引入成功？ 根据浏览器的大小自动的改变文字的大小

 flexible.js: 

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

03-基础设置

• body 设置背景图 ，缩放为 100% ， 行高1.15

• css初始化

04-header 布局

• 高度为100px

• 背景图，在容器内显示

• 缩放比例为 100%

• h1 标题部分 白色 38像素 居中显示 行高为 80像素

• 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素

// 格式： 当前时间：2020年3月17-0时54分14秒
<script>
            var t = null;
            t = setTimeout(time, 1000);//開始运行
            function time() {
                clearTimeout(t);//清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours();//获取时
                var m = dt.getMinutes();//获取分
                var s = dt.getSeconds();//获取秒
                document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行     
            }
 </script>

1标题

 2 时间

05-mainbox 主体模块

• 需要一个上左右的10px 的内边距

• column 列容器，分三列，占比 3：5：3

     min-width:    小于1024就不放进行缩放了，

 

06-公共面板模块 panel

• 高度为 310px

• 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框

• 有line.jpg 背景图片

• padding为 上为 0 左右 15px 下为 40px

• 下外边距是 15px

• 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5

• 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px

1  添加小盒子

 2 添加四个角

制作上面两个角 大小为 10px 线条为 2px solid #02a6b5

线太小，不用转化rem

 

07-柱形图 bar 模块(布局)

• 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px

• 图标内容模块 chart 高度 240px

• 以上可以作为panel公共样式部分

 ​​​​​​​

 复制div即可

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

/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

 2  分上下两个模块

头部 hd: ul >li 

主题部分 bd

 2.1 

使用字体：

/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

p{

font-family:"electronicFont"

}

 

2.2 添加角

 

2.3 添加竖线

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

 

 2.4 bd:ul>li

 

地图模块制作：

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% 定位到中央 旋转动画 注意是逆时针

----

1 地图模块高度

 

2 球体图片

缩放发现 图片并没有发生变化

解决：

3 旋转1 map 2

 不停的旋转：添加动画

4 旋转2 map3

  @keyframes rotate1 {
    form {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate2 {
    form {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

5 添加地图模块

 

 地图生成以后没有这么大，会露出来

记得这4个要加：   background-size: 100% 100%;