ECharts可视化大屏学习笔记【1】（整个结构布局搭建）

前言：仅作为学习笔记，防止忘掉(；へ：)

本节讲述整个项目基本布局的搭建

一、技术准备

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

• div + css 布局
• flex 布局
• Less
• 原生js + jquery 使用
• rem适配
• echarts基础

二、案例适配方案

设计稿是1920px

1. flexible.js 把屏幕分为 24 等份
2. cssrem 插件的基准值是 80px
   插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。 （但是别忘记重启vscode软件保证生效）

三、基本布局

1.header

基本要求：

• 高度为100px
• 背景图，在容器内显示
• 缩放比例为 100%
• h1 标题部分 白色 38像素 居中显示 行高为 80像素
• 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素

2.mainbox 主体模块

基本要求：

• 需要一个上左右的10px 的内边距
• column 列容器，分三列，占比 3：5：3

css样式：

.mainbox {
  padding: 0.125rem 0.125rem 0;
  display: flex;
  .column {
    flex: 3;
  }
  &:nth-child(2) {
    flex: 5;
  }
}

1）panel公共模块

整体布局：

.panel {
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line\(1\).png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  // 四个角的样式设置
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
}

内容区域：

  h2 {
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
  }
  .chart {
    height: 3rem;
    background-color: pink;
  }

2）中间地图布局

• 上面是no 数字模块
• 下面是map 地图模块

地图模块制作：

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

<div class="column">
      <!-- 上方no模块制作 -->
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>213455</li>
            <li>100000</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>需求人数</li>
            <li>供用人数</li>
          </ul>
        </div>
      </div>
      <!-- 地图模块 -->
      <div class="map">
        <div class="map1"></div>
        <!-- 下面两个是旋转的图形 -->
        <div class="map2"></div>
        <div class="map3"></div>
        <div class="chart">ditu</div>
      </div>
    </div>

.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);
    }
  }
}

四、初步布局效果

接下来会写图表的制作（但是是静态的）