热门标签
热门文章
- 1Python爬虫教程第3篇-解决使用reqeusts遇到的ProxyError异常
- 2web python template injection_攻防世界-Web_python_template_injection详解
- 3又到毕业季了，给大家一些简历模板，免费的_毕业简历模板csdn
- 4python下载spacy2.0.9教程_spacy包下载
- 5mysql8.0 ssl_MySQL8开启ssl加密
- 6并行CRC计算HDL代码生成工具的秘密（六字真言）_并行crc在线计算
- 7三秒4张图！让 Stable Diffusion 出图速度暴增的新一代生成模型LCM！_stable加快出图速度
- 8黑马微信小程序开发自学笔记——Day1小程序入门_黑马程序员微信小程序
- 9第八章：AI大模型的安全与伦理 8.2 模型安全_ai安全大模型
- 10解决文件传输难题：如何绕过Gitee的100MB上传限制_gitee上传文件大小限制
当前位置: article > 正文
ECharts数据可视化项目-大屏数据可视化【持续更新中】_echarts可视化大屏开源项目_echarts数据可视化大屏
作者：寸_铁 | 2024-07-13 22:57:16
赞
踩
echarts数据可视化大屏
- div+css布局
- flex布局
- Less
- 原生js+jquery使用
- rem适配
- echarts基础
2.项目准备初始化：
- index.html首页文件
- css文件夹
- js文件夹
- font图标字体文件夹
- images图片文件夹
下载插件（Easy LESS）
此插件会将我们写的less文件生成一份css文件，在index.html引入css文件即可
3.案例适配方案：
- 设计稿是1920px
- flexible.js把屏幕分为24等份
- cssrem插件的基准值是80px，插件-配置按钮-配置扩展设置-Root Font Size里面设置。但是你别忘记重启vscode软件保证生效
引入flexible.js
▼flexible.js源码(可以直接新建一个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 / 24; //划分的等份，可以根据自己的需求进行更改 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);
- 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
▲上方手动设置分成24等份，设计稿是1920px，每一份就是80px
下载插件（px to rem & rpx & vw (cssrem)）
下载好，根据需要进行基准设置，这样可以更好的帮助我们进行设计
4.基础设置：
- body设置背景图，缩放为100%，行高1.15
- css初始化
基础设置css代码
// css初始化
\*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
// 基础设置
body{
//body 设置背景图，缩放为 100% ，行高1.15
background: url(../images//bg.jpg) no-repeat top center;
line-height: 1.15;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
body背景图(可以右键下载，也可私我要全部素材和源码)
基础设置完成(效果图)
5.可视化项目头部制作：
UI图
header布局：
- 高度为100px
- header背景图，在容器内显示
- 缩放比例为100%
- h1标题部分 白色 38像素 居中显示 行高为80像素
- 时间模块 showTiime 定位右侧 right为30px 行高为75px 文字颜色为rgba(255,255,255,0.7) 而文字大小为20像素
header布局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>数据可视化</h1> <div class="showTime">111</div> </header> <!-- 引入flexible.js --> <script src="js/flexible.js"></script> <!-- 引入showTime.js时间 --> <script src="js/showTime.js"></script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
header布局less代码
// css初始化 \*{ margin: 0; padding: 0; box-sizing: border-box; } // 基础设置 body{ //body 设置背景图，缩放为 100% ，行高1.15 background: url(../images//bg.jpg) no-repeat top center; line-height: 1.15; } // header 布局 header{ position: relative; // 高度为100px height: 1.25rem; // 背景图，在容器内显示 缩放比例为 100% background: url(../images/head\_bg.png) no-repeat; background-size: 100% 100%; h1{ // h1 标题部分 白色 38像素 居中显示 行高为 80像素 font-size: .475rem; color: white; text-align: center; line-height: 1rem; } .showTime{ // 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素 position: absolute; right: .375rem; top: 0; line-height: .9375rem; color:rgba(255, 255, 255, 0.7); font-size: .25rem; } }
- 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
header布局js代码
格式： 当前时间：2020年3月17-0时54分14秒 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); //设定定时器，循环运行 }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
header布局完成(效果图)
6.mainbox布局分析：
UI图
mainbox 主体模块布局：
- 需要一个上左右10px的内边框
- column列容器，分三列，占比 3 : 5 ：3
mainbox布局html代码和header同级
<!-- mainbox页面主体部分 -->
<section class="mainbox">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
mainbox布局less代码
// mainbox页面主题盒子 .mainbox{ min-width: 1024px; max-width: 1920px; height: 300px; margin: 0 auto; display: flex; background-color: rgb(171, 247, 95); // 需要一个上左右的10px 的内边距 padding: .125rem .125rem 0; .column{ flex: 3; } .column:nth-child(2){ flex: 5; } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
mainbox布局完成(效果图)
7.公共面板模块 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
panel公共面板模块布局html代码
<!-- mainbox页面主体部分 -->
<section class="mainbox">
<div class="column">
<!-- panel公共面板 -->
<div class="panel">
<div class="panel-footer"></div>
</div>
</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
panel公共面板模块布局css代码
.panel{ position: relative; //高度为310px height: 3.875rem; // 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框 border:1px solid rgba(25, 186, 139, 0.17); //有line.jpg背景图片 background: url(../images/line.png) rgba(255, 255, 255, 0.04); // padding为 上为 0 左右 15px 下为 40px padding: 0 .1875rem .5rem; //下外边距是 15px margin-bottom: .1875rem; &::before{ // 左上角边框 // 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5 content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-top: 2px solid #02a6b5 ; border-left: 2px solid #02a6b5 ; } &::after{ // 右上角边框 content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-top: 2px solid #02a6b5 ; border-right: 2px solid #02a6b5 ; } .panel-footer{ position: absolute; bottom: 0; left: 0; width: 100%; &::before{ // 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px // 左上角边框 content: ''; position: absolute; bottom: 0; left: 0; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5 ; border-left: 2px solid #02a6b5 ; } &::after{ // 右上角边框 content: ''; position: absolute; bottom: 0; right: 0; 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
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
panel公共面板模块布局完成(效果图)
8.panel盒子完成(图表模块布局)：
- 标题模块h2高度为48px 文字颜色为白色 文字大小为20px
- 图标内容模块chart高度为240px
- 以上可以作为panel公共样式部分
图表模块布局html代码
<!-- mainbox页面主体部分 --> <section class="mainbox"> <div class="column"> <!-- panel公共面板 --> <div class="panel bar"> <!-- 柱形图bar模块 --> <h2>柱形图-就业行业</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> <div class="panel bar"> <!-- 折线图line模块 --> <h2>折线图-就业行业</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> <div class="panel bar"> <!-- 饼图图pe模块 --> <h2>饼图-就业行业</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> </div> <div class="column">2</div> <div class="column"> <!-- panel公共面板 --> <div class="panel bar"> <!-- 柱形图bar模块 --> <h2>柱形图-就业行业</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> <div class="panel bar"> <!-- 折线图line模块 --> <h2>折线图-就业行业</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> <div class="panel bar"> <!-- 饼图图pe模块 --> <h2>饼图-就业行业</h2> <div class="chart">图表</div> <div class="panel-footer"></div> </div> </div> </section>
- 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
图表模块布局less代码
// mainbox页面主题盒子 .mainbox{ min-width: 1024px; max-width: 1920px; height: 300px; margin: 0 auto; display: flex; // 需要一个上左右的10px 的内边距 padding: .125rem .125rem 0; .column{ flex: 3; } .column:nth-child(2){ flex: 5; } //panel公共面板 .panel{ position: relative; //高度为310px height: 3.875rem; // 1像素的 1px solid rgba(25, 186, 139, 0.17) 边框 border:1px solid rgba(25, 186, 139, 0.17); //有line.jpg背景图片 background: url(../images/line.png) rgba(255, 255, 255, 0.04); // padding为 上为 0 左右 15px 下为 40px padding: 0 .1875rem .5rem; //下外边距是 15px margin-bottom: .1875rem; &::before{ // 左上角边框 // 利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5 content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-top: 2px solid #02a6b5 ; border-left: 2px solid #02a6b5 ; } &::after{ // 右上角边框 content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-top: 2px solid #02a6b5 ; border-right: 2px solid #02a6b5 ; } .panel-footer{ position: absolute; bottom: 0; left: 0; width: 100%; &::before{ // 新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px // 左上角边框 content: ''; position: absolute; bottom: 0; left: 0; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5 ; border-left: 2px solid #02a6b5 ; } &::after{ // 右上角边框 content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5 ; border-right: 2px solid #02a6b5 ; } } // 图表模块(布局) h2{ // 标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px height: .6rem; color: white; line-height: .6rem; text-align: center; font-size: .25rem; font-weight: 400; } } .chart{ height: 3rem; background-color: pink; } }
- 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
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
图表模块布局完成(效果图)
9.数字模块no布局制作：
uii图
中间布局
- 上面是no数字模块
- 下面是map地图模块
- 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
- 注意中间列 column 有个 左右 10px 下 15px 的外边距
.数字模块no布局html代码
<div class="column">
<!-- no模块制作 -->
<div class="no">这是数字模块</div>
</div>
- 1
- 2
- 3
- 4
- 5
.数字模块no布局less代码
// no数字模块
.no{
// 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1);
background-color: rgba(101, 132, 226, 0.1); ;
// 有个15像素的内边距
padding: .1875rem;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
== 注意中间列 column less代码==
.数字模块no布局完成(效果图)
10.数字模块no-hd布局制作：
uii图
no 模块里面上下划分 上面是数字（no-hd) 下面 是 相关文字说明(no-bd)
no-hd布局方案
- 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-hd布局html代码
<div class="column">
<!-- no模块制作 -->
<div class="no">
<div class="no-hd">
<ul>
<li>23856</li>
<li>67239</li>
</ul>
</div>
<div class="no-bd">文字</div>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
.no-hd布局less代码
// no数字模块 .no { // 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); background-color: rgba(101, 132, 226, 0.1); ; // 有个15像素的内边距 padding: .1875rem; .no-hd { // no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17) border: 1px solid rgba(25, 186, 139, 0.17); position: relative; // 左上角 &::before { // no-hd 利用 after 和 before制作2个小角 content: ''; position: absolute; top: 0; left: 0; // 宽度为 30px width: 30px; // 高度为 10px height: 10px; // 边框 2px solid #02a6b5 border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; } // 右下角 &::after { // no-hd 利用 after 和 before制作2个小角 content: ''; position: absolute; bottom: 0; right: 0; // 宽度为 30px width: 30px; // 高度为 10px height: 10px; // 边框 2px solid #02a6b5 border-bottom: 2px solid #02a6b5; border-right: 2px solid #02a6b5; } ul { display: flex; } li { flex: 1; // no-hd 数字模块 里面分为两个小li 每个小li高度为80px 文字大小为70px 颜色为 #ffeb7b 字体是图标字体 electronicFont text-align: center; line-height: 1rem; font-size: .875rem; color: #ffeb7b; font-family: "electronicFont"; position: relative; &::after { // 小竖线 给 第一个小li after 就可以 content: ''; position: absolute; // 1px宽 width: 1px; // top 25% top: 25%; right: 0; // 高度 50% height: 50%; //背景颜色为 rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2); } } } }
- 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
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
.no-hd布局数字声明less代码
/\* 声明字体\*/
@font-face {
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF);
}
- 1
- 2
- 3
- 4
- 5
- 6
.数字模块no-hd布局完成(效果图)
11.数字模块no-bd布局制作：
no-bd布局方案
- no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px
.no-bd布局html代码
<div class="column"> <!-- no模块制作 --> <div class="no"> <div class="no-hd"> <ul> <li>23856</li> <li>67239</li> </ul> </div> <div class="no-bd"> <ul> <li>前端需求人数</li> <li>市场供应人数</li> </ul> </div> </div> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
.no-bd布局less代码
// no数字模块 .no { // 数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); background-color: rgba(101, 132, 226, 0.1); ; // 有个15像素的内边距 padding: .1875rem; .no-hd { // no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17) border: 1px solid rgba(25, 186, 139, 0.17); position: relative; // 左上角 &::before { // no-hd 利用 after 和 before制作2个小角 content: ''; position: absolute; top: 0; left: 0; // 宽度为 30px width: 30px; // 高度为 10px height: 10px; // 边框 2px solid #02a6b5 border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; } // 右下角 &::after { // no-hd 利用 after 和 before制作2个小角 content: ''; position: absolute; bottom: 0; right: 0; // 宽度为 30px width: 30px; // 高度为 10px height: 10px; // 边框 2px solid #02a6b5 border-bottom: 2px solid #02a6b5; border-right: 2px solid #02a6b5; } ul { display: flex; } li { flex: 1; // no-hd 数字模块 里面分为两个小li 每个小li高度为80px 文字大小为70px 颜色为 #ffeb7b 字体是图标字体 electronicFont text-align: center; line-height: 1rem; font-size: .875rem; color: #ffeb7b; font-family: "electronicFont"; position: relative; &::after { // 小竖线 给 第一个小li after 就可以 content: ''; position: absolute; // 1px宽 width: 1px; // top 25% top: 25%; right: 0; // 高度 50% height: 50%; //背景颜色为 rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2); } } } .no-bd{ // no-bd 里面也有两个小li ul{ display: flex; li{ flex: 1; // 高度为 40px height: .5rem; line-height: .5rem; // 文字大小为 18px font-size: .225rem; text-align: center; // 上内边距为 10px上内边距为 10px padding-top: .125rem; //文字颜色为 rgba(255, 255, 255, 0.7) 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
- 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
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
.数字模块no-bd布局完成(效果图)
12.地图模块(map)布局制作：
地图模块布局方案
- 地图模块(map)高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子(map1) 旋转盒子1(map2) 旋转盒子2(map3)
map1球体模块制作
UI图
map1球体模块布局方案
- 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
map1素材图
map+map1布局html代码
<!-- 地图模块盒子(map)-->
<div class="map">
<!-- 球体盒子(map1) -->
<div class="map1"></div>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
map+map1布局less代码
// map地图模块 .map{ position: relative; // 地图模块高度为 810px height: 10.125rem; // map1球体盒子模块 .map1{ // 大小为 518px width: 6.475rem; height: 6.475rem; // 要加背景图片 background: url(../images/map.png); background-size: 100%; // 透明度 0.3 opacity: 0.3; // 定位到最中央 position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
map+map1模块布局完成(效果图)
旋转盒子1(map2)*
map2旋转盒子1模块布局方案
- 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
map2素材图
map2布局html代码
<div class="map">
<!-- 球体盒子(map1) -->
<div class="map1"></div>
<!-- map2旋转盒子1模块 -->
<div class="map2"></div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
map2布局less代码
// map2旋转盒子1模块 .map2{ //大小为 643px width: 8.0375rem; height: 8.0375rem; background: url(../images/lbx.png); background-size: 100%; // 定位到中央 position:absolute ; top:50%; left: 50%; transform: translate(-50%,-50%); // 透明度 .6 opacity: .6; // 使用旋转动画rotate1 animation: rotate1 15s linear infinite; // linear匀速 无限循环 } // map2旋转盒子1做旋转动画 @keyframes rotate1 { from{ transform: translate(-50%,-50%) rotate(0deg); } to{ transform: translate(-50%,-50%) rotate(360deg); } }
- 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
map2模块布局完成(效果图)
旋转箭头盒子2(map3)
map3旋转箭头盒子2(模块布局方案
- 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
map3素材图
map3布局html代码
<!-- 地图模块盒子(map)-->
<div class="map">
<!-- 球体盒子(map1) -->
<div class="map1"></div>
<!-- map2旋转盒子1模块 -->
<div class="map2"></div>
<!-- map3旋转箭头盒子2模块 -->
<div class="map3"></div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
map3布局less代码
// map3旋转箭头盒子2模块 .map3 { //大小为 643px width: 7.075rem; height: 7.075rem; background: url(../images/jt.png); background-size: 100%; // 定位到中央 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); // 透明度 .6 opacity: .6; // 使用旋转动画rotate1 animation: rotate2 15s linear infinite; // linear匀速 无限循环 } // map3旋转箭头盒子2做旋转动画 @keyframes rotate2 { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
- 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
map2模块布局完成(效果图)
地图模块(chart)
chart地图模块html代码
<!-- 地图模块盒子(map)-->
<div class="map">
<!-- 球体盒子(map1) -->
<div class="map1"></div>
<!-- map2旋转盒子1模块 -->
<div class="map2"></div>
<!-- map3旋转箭头盒子2模块 -->
<div class="map3"></div>
<!-- 地图模块 -->
<div class="chart"></div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
chart地图模块less代码
.chart{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10.125rem;
background-color: #ffeb7b;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
chart模块布局完成(效果图)
这里只做了布局，后期会导入地图
页面布局完成
五、Echarts开源可视化图表库
1.常见的数据可视化库：
- D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
- ECharts.js 百度出品的一个开源 Javascript 数据可视化库，目前已经被Apache托管
- Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
- AntV 蚂蚁金服全新一代数据可视化解决方案 等等
- Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
2.Echarts 简介
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
特点：
2.Echarts体验使用：
使用步骤：
- 步骤1：下载并引入echarts.js文件
图表依赖这个js库 - 步骤2：准备一个具备大小的DOM容器
生成的图表会放入这个容器内 - 步骤3：初始化echarts实例对象
算法
-
冒泡排序
-
选择排序
-
快速排序
-
二叉树查找: 最大值、最小值、固定值
-
二叉树遍历
-
二叉树的最大深度
-
给予链表中的任一节点，把它删除掉
-
链表倒叙
-
如何判断一个单链表有环
由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
d-color: #ffeb7b;
}
chart模块布局完成(效果图) **这里只做了布局，后期会导入地图**  ##### 页面布局完成 --- ### 五、Echarts开源可视化图表库 ##### 1.常见的数据可视化库： * D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) * ECharts.js 百度出品的一个开源 Javascript 数据可视化库，目前已经被Apache托管 * Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 * AntV 蚂蚁金服全新一代数据可视化解决方案 等等 * Highcharts 和 Echarts 就像是 Office 和 WPS 的关系 ##### 2.Echarts 简介 [☞官网地址]( ) > > ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 [ZRender]( )，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 > > > **特点：** * 是一个JS插件 * 性能好可流畅运行PC与移动设备 * 兼容主流浏览器 * 提供很多常用图表，且可**定制**。 + [折线图]( )、[柱状图]( )、[散点图]( )、[饼图]( )、[K线图]( ) ##### 2.Echarts体验使用： **使用步骤：** * 步骤1：下载并引入echarts.js文件 图表依赖这个js库 * 步骤2：准备一个具备大小的DOM容器 生成的图表会放入这个容器内 * 步骤3：初始化echarts实例对象 ## 算法 1. 冒泡排序 2. 选择排序 3. 快速排序 4. 二叉树查找: 最大值、最小值、固定值 5. 二叉树遍历 6. 二叉树的最大深度 7. 给予链表中的任一节点，把它删除掉 8. 链表倒叙 9. 如何判断一个单链表有环 [外链图片转存中...(img-LnUzxlUo-1718552627029)] >由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
- 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
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签
