ECharts(1)

目录

数据可视化

可视化面板介绍

01-使用技术

02- 案例适配方案

04-header 布局

header部分css样式

05-mainbox  主体模块

06-公共面板模块 panel

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

---

数据可视化

数据可视化主要目的

借助图形化手段，清晰有效地传达与沟通信息

数据可视化可以把数据从冰冷的数字转换为图形，揭示蕴含在数据中的规律和道理

可视化面板介绍

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

01-使用技术

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

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

02- 案例适配方案

- 设计稿是1920px 

  1. flexible.js 把屏幕分为 24 等份

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

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

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

 03-基础设置

1.  body 设置背景图 ，缩放为 100%  ， 行高1.15
2.  css初始化

04-header 布局

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

header部分css样式

header {
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
  h1 {
    font-size: 0.475rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
  }
}

05-mainbox  主体模块

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

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

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

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

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

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

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

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

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