您现在的位置是：首页 > 其他

当前栏目

Echarts5.3.2可视化案例-布局篇

案例布局可视化

2023-09-27 14:27:50 时间

00参考以及效果

参考：https://www.bilibili.com/video/BV1v7411R7mp
最终效果：
在这里插入图片描述

01背景知识

大屏

分辨率：
分辨率…到底是啥？1080p，2k，4k？分辨率越高就越清晰吗？
https://zhuanlan.zhihu.com/p/109817032
大屏设计尺寸规范指南
https://www.shejidaren.com/da-ping-sheji-chicun-guifan-zhinan.html
查看自己电脑的显示器：
个性化-显示设置-分辨率
19寸显示器：1440x900（16:10）
其它常见的尺寸的屏幕对应的最佳分辨率如下：
19寸显示器：1440x900（16:10）
20寸显示器：1600x900（16:9）1600x1200（4:3）
21.5寸显示器：1920x1080（16:9）
22寸显示器：1680x1050（16:10）1920x1080（16:9）1920x1200（16:10）
23寸显示器：1920x1080（16:9）1920x1200（16:10）
23.6寸显示器：1920x1080（16:9）
24寸显示器：1920x1200（16:10）1920x1080（16:9）
25寸显示器：1920x1080（16:9）
26寸显示器：1920x1200（16:10）
27寸显示器：2560x1440（16:9）
30寸显示器：2560x1600（16:10）

flex布局

参考：https://blog.csdn.net/wuyxinu/article/details/107708194
在这里插入图片描述

二个成员：

采用Flex布局的元素为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目(flex item)。

两根轴：

水平主轴 main axis
主轴与边框的左右交叉点 main start/main end
垂直交叉轴 cross axis
交叉轴与边框的上下交叉点 cross start/cross end

项目（flex item）默认沿主轴排列，单项目占据的主轴空间/交叉轴空间 main size/cross size
flex容器属性

flex-direction 决定主轴方向=项目排列方向
flex-wrap 定义如何换行
flex-flow 它是flex-direction和flex-wrap的简写形式，语法糖
justify-content 定义项目在主轴上的对齐方式
align-items 定义项目在交叉轴上的对齐方式
align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。

02 大屏设计

00 项目目录

在这里插入图片描述

01-使用技术

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

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

02- 案例适配方案

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

flexible配置

1.引入flexible

<script src="js/flexible.js"></script>

2.修改flexible配置为24

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

3.前端查看是否引入成功
在这里插入图片描述

cssrem配置

1.安装cssrem插件拓展

extensions搜索cssrem

2.修改cssrem拓展的默认配置
在这里插入图片描述

03-基础设置

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

CSS初始化

引入easyless插件
在css目录下创建index.less

在css目录下创建index.less
执行ctrl+s 保存
会自动编译成index.css文件

在index.less进行css初始化

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

content-box 与 border-box
在这里插入图片描述

在index.html中引入css

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>
<body>
    <div class="box">123</div>
</body>

查看引入之后的效果，

body背景图

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

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

04-header 布局

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

html布局

<header>
        <h1>Echarts - dashboard</h1>
        <div class="showTime"></div>
        <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>
    </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: .475rem;
        text-align: center;
        color: #fff;
        line-height: 1rem;

    }
    .showTime{
        position: absolute;
        right:.375rem;
        top: 0;
        line-height: .9375rem;
        font-size: .25rem;
        color:rgba(255, 255, 255, 0.7)

    }
}

05-mainbox 主体模块

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

html布局

    <section class="mainbox">
        <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div>
    </section>

css样式：

.mainbox{
    min-width: 1024px;
    max-width: 1920px;
    padding: .125rem .125rem 0;
    display: flex;
    background-color: red;
    .column {
        flex: 3;
        &:nth-child(2){
            flex:5;
            margin: 0 .125rem .1875rem;
            overflow: hidden;
        }
    }
}

效果如下：
在这里插入图片描述

06-公共面板模块 panel + bar

高度为 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
标题模块 h2 高度为 48px 文字颜色为白色文字大小为 20px
图标内容模块 chart 高度 240px
以上可以作为panel公共样式部分

Html布局

    <section class="mainbox">
        <div class="column">
            <div class="panel bar">
                <h2>bar chart</h2>
                <div class="chart"> bar Echarts </div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column">2</div>
        <div class="column">3</div>
    </section>

CSS布局


```css
.panel {
    position: relative;
    height: 3.875rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);
    padding: 0 .1875rem .5rem ;
    margin-bottom: .1875rem;
    // 定义左上角的border
    &::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;
        height: 1.25rem;
        // background-color: red;
        left: 0;
        bottom: 0;
        height: 15%;
        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: .6rem;
        color: #fff;
        font-size: .25rem;
        font-weight: 400;

    }
    .chart {
        height: 3rem;
        background-color: beige;
    } 
}

截图：
在这里插入图片描述

07-左右布局

将

			<div class="panel bar">
                <h2>bar chart</h2>
                <div class="chart"> bar Echarts </div>
                <div class="panel-footer"></div>
            </div>

在左右的column中各复制3份即可
效果如下：
在这里插入图片描述

08-中间布局

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

数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
注意中间列 column 有个左右 10px 下 15px 的外边距
no 模块里面上下划分上面是数字（no-hd) 下面是相关文字说明(no-bd)
no-hd 数字模块有一个边框 1px solid rgba(25, 186, 139, 0.17)
no-hd 数字模块里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
no-hd 利用 after 和 before制作2个小角，边框 2px solid #02a6b5 宽度为 30px 高度为 10px
小竖线给第一个小li after 就可以 1px宽背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可
no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px

中间列的no模块布局

html布局

        <div class="no">
          <div class="no-hd">
            <ul>
              <li>125811</li>
              <li>104563</li>
            </ul>
          </div>
          <div class="no-bd">
            <ul>
              <li>前端需求人数</li>
              <li>市场供应人数</li>
            </ul>
          </div>
        </div>

li {
    list-style: none;
  }
  
@font-face {
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
}

.no{
    background-color: 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模块配置

地图模块制作：

地图模块高度为 810px 里面包含4个盒子 chart 放图表模块球体盒子旋转1 旋转2
球体图片模块 map1 大小为 518px 要加背景图片因为要缩放100% 定位到最中央透明度 .3
旋转1 map 2 大小为 643px 要加背景图片因为要缩放100% 定位到中央透明度 .6 做旋转动画利用z-index压住球体
旋转2 map3 大小为 566px 要加背景图片因为要缩放100% 定位到中央旋转动画注意是逆时针

Html布局

        <!-- middle column -->
        <div class="column">
                <div class="no">
                <div class="no-hd">
                  <ul>
                    <li>125811</li>
                    <li>104563</li>
                  </ul>
                </div>
                <div class="no-bd">
                  <ul>
                    <li>前端需求人数</li>
                    <li>市场供应人数</li>
                  </ul>
                </div>
            </div>
              <div class="map">
                <div class="chart"></div>
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
            </div>
        </div>

CSS布局

.map{
    position: relative;
    height: 10.125rem;
    // background-color: #02a6b5;
    .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: cover;
        opacity: 0.3;
        z-index: 1;
    }
    .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);
        }
    }
}

@media screen and (max-width: 1024px) {
    html {
      font-size: 42px !important;
    }
  }
  @media screen and (min-width: 1920) {
    html {
      font-size: 80px !important;
    }
  }

截图：
在这里插入图片描述

猜你喜欢

ubuntu16.04配置tensorflow-gpu环境
go error接口与errors包详解
微软打败了美国政府后者不能强迫微软提供海外数据
用友杨雨春融合是企业互联网化的下一个主旋律
javascript 模块化编程
Windows注册与删除mysql服务
【BZOJ1915】[Usaco2010 Open]奶牛的跳格子游戏 DP+单调队列
scons ------ 基本使用
SQL 通配符
could not execute statement； SQL [n/a]； nested exception is org.hibernate.exception.DataException:
【目录】从苏宁电器到卡巴斯基
针对苹果最新审核要求为应用兼容IPv6
php扩展swoole的安装
CSS一个元素同时使用多个类选择器（class selector）
【焦点】电子级多晶硅实现“中国造”

相关主题

线程池-案例1
Hive案例
GC案例
调优案例1
MVC案例
算法小案例

zl程序教程

当前栏目

Echarts5.3.2可视化案例-布局篇