• Echarts学习（一）

    Echarts学习（一）

    1.使用技术

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

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

    安装easy less插件，使得可以编译less文件。在css文件夹下创建less文件就可以自动生成css文件
    安装cssrem插件

    2.案例适配方案

    • 设计稿是1920px

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

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

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

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

    3.基础设置

    • body 设置背景图 ，缩放为 100% ， 行高1.15
    • css初始化
    //css初始化
* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

body{
    background: url(../images/bg.jpg);
    line-height: 1.15;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    4.header部分

    index.less:

    //css初始化
* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

body{
    background: url(../images/bg.jpg) no-repeat top center;
    line-height: 1.15;
}

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    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>数据可视化title>
    <link rel="stylesheet" href="./css/index.css">
head>
<body>
    <header>
        <h1>Echarts数据可视化h1>
        <div class="showTime">当前时间：2020年3月17-0时54分14秒div>
        <script src="./js/showtime.js">script>
    header>
    
    <script src="./js/flexible.js">script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这里插入图片描述

    5.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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    6.公共面板模块 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

    ::before与::after
    CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
    例子：

    q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    结果图：
    在这里插入图片描述
    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;
      }
    }
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    7.柱形图 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;
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    在这里插入图片描述

    8.中间布局

    • 上面是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

    地图模块制作：

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

    在这里插入图片描述

  • 相关阅读:
    POI及EasyExcel
    白骑士的Matlab教学基础篇 1.3 控制流
    软件测试/校招推荐丨鼎捷软件股份有限公司岗位开放
    leetcode 977有序数组的平方（附容器未初始化的问题）
    【体系结构】计算机体系结构知识点清单
    算法-堆/多路归并-查找和最小的 K 对数字
    【云原生之Docker实战】使用docker部署Wiznote私人笔记系统
    vue页面菜单权限问题解决
    基于ssm实验室管理系统
    MySQL基础语法
  • 原文地址：https://blog.csdn.net/weixin_44026026/article/details/126424382