使用 Echarts 做数据可视化智能大屏1_echarts大屏如何布局

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