首页 前端知识 使用 Echarts 做数据可视化智能大屏1

使用 Echarts 做数据可视化智能大屏1

2024-03-20 11:03:46 前端知识 前端哥 863 9 我要收藏

1. 使用技术

  • 基于flexible.js + rem 智能大屏适配
  • VScode cssrem 插件:快速生成rem单位
  • Flex布局
  • Less
  • div + css布局 
  • 原生js + jquery
  • 基于echarts数据可视化展示
  • Echarts柱状图数据设置
  • Echarts地图引入

数据可视化主要目的:借助于图像化手段,清晰有效地传达与沟通信息

2.案例适配方案:

  1. flexible.js 把屏幕分为 24 等份
  2. cssrem插件的基准值是 80px

先引入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 / 10
      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))

屏幕展示效果为1920px 

flexible.js默认将屏幕划分为10等份,1920/10=192px,相当于1rem=192px

这里修改为24等份,1924/24=80,相当于1rem=80px

 cssrem 插件配置将基准值设置为 80

 改完之后就会自动转换为 80px=1rem

3. 基础设置

  • body 设置背景图,缩放100%,行高1.15
  • css初始化
// css初始化
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;  //padding和border的值就不会在影响元素的宽高    
}
body{
    background: url(../images/bg.jpg)   //背景图
    no-repeat top center;   //不会出现平铺或者重复的现象,位于上部的居中位置
    line-height: 1.15;   //行高

}

4. header布局

  • 高度100px
  • 背景图,在容器内显示
  • 缩放比例为100%
  • h1标题部分,白色,38px,居中显示,行高为80px
  • 时间模块showTime,定位右侧,right为30px,top为0,行高为75px,文字颜色为rgba(255,255,255,0.7),文字大小20px  (子绝父相)
    <!-- 头部的盒子 -->
    <header>
        <h1>数据可视化-Echarts</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 + "秒"
                // document.querySelector(".showTime").innerHTML=dt
                t = setTimeout(time, 1000)  //设置定时器,循环运行
            }
        </script>
    </header>
header{
    position: relative;
    height: 1.25rem;
    background: url(../images/head_bg.png)
    no-repeat;
    background-size: 100% 100%;  //缩放 水平100% 垂直100%
    h1{
        font-size: .475rem;   
        color: #fff;
        text-align: center;    //文字居中
        line-height: 1rem;     //行高
    }
    .showTime{
        position: absolute;   //绝对位置 (子绝父相)
        right: .375rem;
        top: 0;
        line-height: .9375rem;
        color: rgba(255,255,255,0.7);
        font-size: .25rem;  
    }
}

5.1. 页面主题模块

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

div、section、article,语义上从无到有,逐渐增强; div无任何语义,仅仅用作样式化或者脚本化,对于一段主题性的内容,比较适用section,而假设这段内容是可以脱离上下文,作为完整的结构体独立存在的一段内容,那么就适合用article

    <section class="mainbox">
        <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div>
    </section>
// 页面主题盒子
.mainbox{
    display: flex;   
    min-width: 1024px;
    max-width: 1920px;
    // height: 300px;
    margin: 0 auto;  //居中对齐
    background-color: pink;
    padding: .125rem .125rem 0;  //上左右10px
    .column{
        flex: 3;    //每个盒子占3份
        &:nth-child(2){  //给第二个盒子占5份
            flex: 5;
        }
    }
    // .column:nth-child(2){  //给第二个盒子占5份
    //     flex: 5;
    // }
}

5.2. 公共面板模块panel

  • 高度为310px
  • 1px的边框 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
 <div class="column">
     <div class="panel">
         <div class="panel-footer"></div>
     </div>
 </div>
.mainbox{
    .panel{
        position: relative;
        height: 3.875rem;
        // background-color: pink;
        border:1px solid rgba(25, 186, 139, 0.17);
        padding: 0 .1875rem .5rem ;
        margin-bottom: .1875rem;
        background: url(../images/line.png) 
        rgba(255, 255, 255, 0.03);
        &::before{
            position: absolute;
            top:0;
            left:0;
            width: 10px;
            height: 10px;
            border-left: 2px solid #e3ebeb;
            border-top: 2px solid #e3ebeb   ;
            content: "";
        }
        &::after{
            position: absolute;
            top:0;
            right:0;
            width: 10px;
            height: 10px;
            border-right: 2px solid #e3ebeb;
            border-top: 2px solid #e3ebeb   ;
            content: "";
        }
        .panel-footer{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            &::before{
                position: absolute;
                bottom:0;
                left:0;
                width: 10px;
                height: 10px;
                border-left: 2px solid #e3ebeb;
                border-bottom: 2px solid #e3ebeb   ;
                content: "";
            }
            &::after{
                position: absolute;
                bottom:0;
                right:0;
                width: 10px;
                height: 10px;
                border-right: 2px solid #e3ebeb;
                border-bottom: 2px solid #e3ebeb   ;
                content: "";
            }

        }
    }
}

5.3. 柱形图bar模型

  • 标题模块h2  高度48px  文字颜色为白色  文字大小为20px
  • 图标内容模块 chart  高度240px
  • 以上可以作为panel公共样式部分
<div class="column">
    <div class="panel bar">
        <h2>柱形图-就业行业</h2>
        <div class="chart">图标</div>
        <div class="panel-footer"></div>
    </div>
    <div class="panel line">
        <h2>折线图-就业行业</h2>
        <div class="chart">图标</div>
        <div class="panel-footer"></div>
    </div>
    <div class="panel pie">
        <h2>饼形图-就业行业</h2>
        <div class="chart">图标</div>
        <div class="panel-footer"></div>
    </div>
</div>
.mainbox{ 
    .panel{    
        h2{
            height: .6rem;
            color: #fff;
            line-height: .6rem;
            text-align: center;
            font-size: .25rem;
            font-weight: 5rem;
        }
        .chart{
            height: 3rem;
            background-color: pink;
        }
    }
}

6.1. 中间布局--数字与文字模块

  • 上面是no 数字模块,背景颜色rgba(101,132,226,0.1) ,内边距padding15px
  • 中间列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制作两个小角,边框 2px solid #02a6b5,宽度为30px,高度为10px
  • 下面是map 地图模块

把li的小圆点去掉

声明图标字体

 

  <!-- 中间 -->
        <div class="column">
            <!-- no模块制作 -->
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>需求人数</li>
                        <li>供应人数</li>
                    </ul>
                </div>
            </div>
        </div>

// no数字模块
.no{
    background: rgba(101, 132, 226, 0.1);
    padding: .1875rem;
    .no-hd{
        position: relative;
        border: 1px solid rgba(25,186,139,0.17);
        &::before{
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 30px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
        }
        &::after{
            position: absolute;
            bottom: 0;
            right: 0;
            content: "";
            width: 30px;
            height: 10px;
            border-bottom: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
        }
        ul{
            display: flex;
            li{
                position: relative;
                flex:1;    //水平分布
                line-height: 1rem;
                font-size: .875rem;
                color: #ffeb7b;
                text-align: center;
                font-family: "electronicFont";
                &:nth-child(1){     //给第一个li设置小竖线
                    &::after{   
                        content:"";
                        position:absolute;
                        top: 25%;
                        height: 50%;
                        right: 0;
                        width: 1px;
                        background: rgba(255,255,255,0.2);
                    }
                }
                
            }
        }
    }
    //文字模块
    .no-bd{
        ul{
            display: flex;
            li{
                flex:1;
                text-align: center;
                color: rgba(255,255,255,0.7);
                font-size: .225rem;
                height: .5rem;
                line-height: .5rem;
                padding-top: .125rem;
            }
        }
    }
}

 6.2. 地图模块

  • 地圈模块高度为 810px,里面包含4个盒子,chart 放图表模块,球体盒子,旋转1,旋转2
  • 球体图片模块map1,大小为 518px, 要加背景图片, 因为要缩放100%,定位到最中央,透明度.3
  • 旋转1map2, 大小为 643px, 要加背景图片, 因为要缩放100%, 定位到中央, 透明度.6 ,做旋转动画 
  • 旋转2map3, 大小为 566, 要加背景图片, 因为要缩放100%, 定位到中央, 旋转动画, 注意是逆时针 
 <!-- 地图模块 -->
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart"></div>
            </div>
.map{
    position: relative;
    height: 10.125rem;
    .map1{
        width: 6.475rem;
        height: 6.475rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);   //保持水平居中,垂直居中
        background: url(../images/map.png);
        background-size: 100% 100%;   //保证一起缩放
        opacity: .3;    //透明度
    }
    .map2{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 8.0375rem;
        height: 8.0375rem;
        background: url(../images/lbx.png);
        background-size: 100% 100%;   //保证一起缩放
        animation: rotate1 15s linear infinite;  // 调用旋转
        opacity: .6;
    }
    @keyframes rotate1 { //定义旋转动画
        from{
            transform: translate(-50%,-50%)   //保留原来位置
            rotate(0deg);
        }
        to{
            transform: translate(-50%,-50%) 
            rotate(360deg);
        }
    }
    .map3{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 7.075rem;
        height: 7.075rem;
        background: url(../images/jt.png);
        background-size: 100% 100%;   //保证一起缩放
        animation: rotate2 10s linear infinite;  // 调用旋转
        opacity: .6;
    }
    @keyframes rotate2 { //定义旋转动画
        from{
            transform: translate(-50%,-50%)   //保留原来位置
            rotate(0deg);
        }
        to{
            transform: translate(-50%,-50%) 
            rotate(-360deg);    //逆时针
        }
    }
    .chart{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 10.125rem;
    }

}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3993.html
标签
评论
发布的文章

JQuery操作DOM

2024-04-13 23:04:28

jQuery库

2024-04-13 23:04:28

【无标题】

2024-04-13 23:04:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!