signed

QiShunwang

“诚信为本、客户至上”

ECharts数据可视化项目经验

2021/6/24 15:21:48   来源:

ECharts数据可视化项目

  • 一、适配方案
    • 1.项目需求
    • 2.适配方案
    • 3.移动端
    • 4.pc端
  • 二、项目开发
    • 1.项目准备
    • 2.边框图片border-image
    • 3.字体图标类名调用
    • 4.立即执行函数
    • 5.无缝滚动原理

一、适配方案

1.项目需求

  • 设计稿:1920px
  • pc端适配:宽度在1024-1920之间页面元素宽高自适应

2.适配方案

  • flexible.js + rem单位 + flex布局
  • 检测浏览器宽度,修改html文字大小
  • 页面元素根据rem适配大小,配合cssrem插件
  • 页面快速布局

3.移动端

①. flexible.js把屏幕分成10等份
②. 移动端效果图是750px
③. cssrem插件的基准值是75px
④.rem值自动生成

4.pc端

①. flexible.js把屏幕分成10等份
②. PC端的效果图是1920px
③. cssrem插件的基准值是192px
④. rem自动生成
⑤.屏幕宽度约束在1024-1920之间有适配

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

二、项目开发

1.项目准备

  • css fonts images js html 文件
  • 自动刷新浏览器插件:preview on web server

2.边框图片border-image

盒子大小不一,但边框样式相同时,此时需要使用边框图片来完成。
边框图片切割原理:把四个角切出去,中间部分可以铺排、拉伸或环绕,切割顺序:上右下左

属性描述
border-image-source用在边框的图片的路径(哪个图片)
border-inage-slice图片边框向内偏移(裁剪的尺寸,一定不加单位,上右下左)
border-image-width图片边框的宽度(加单位)
border-image-repeat图片边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)默认拉伸

三层结构:

  • 父级:设置图片边框
  • 子元素:定位占据位置
  • panel面板:布局,写内容
 .father {
     position: relative;
     width: 200px;
     height: 50px;
     border: 10px solid #fff;
     border-width: 51px 38px 21px 132px;
     border-image-source: url(../03-项目/images/border.png);
     border-image-slice: 51 38 21 132;
     border-image-repeat: round;
 }
 /*  绝对定位没有设置宽高,只设置上下左右定位,也会显示大小 */    
 .son {
     position: absolute;
     top: -51px;
     right: -38px;
     bottom: -21px;
     left: -132px;
     box-sizing: border-box;
     padding: 20px;
 }
 .panel {
     height: 100%;
     background-color: blue;
        }

3.字体图标类名调用

①. html页面引入字体图标中css文件

<link rel="stylesheet" href="fonts/style.css">

②. 标签直接调用图标对应的类名即可

<span class="icon-angellist"></span>

4.立即执行函数

js中,会有大量的变量命名,为防止变量名冲突(变量污染),采用立即执行函数

(function(){ })  ()  

多个立即执行函数中间必须加分号隔开

5.无缝滚动原理

①. 先克隆marquee里面所有的行(row)
②. 通过css3动画滚动marquee
③. 鼠标经过marquee就停止动画 animation-play-state:paused

$('.marquee').each(function() {
    let copy = $(this).children('.row').clone();
    $(this).append(copy);
});

CSS样式:
@keyframes move {
    0% {
        transform: translateY( 0);
    }
    100% {
        transform: translateY(-50%);
    }
}
.marquee {
    animation: move 5s linear infinite;
}
.marquee:hover {
    animation: paused;//鼠标悬停,动画停止
}