ECharts可视化大屏学习笔记【1】(整个结构布局搭建)
2020-07-09 19:04
441 查看
前言:仅作为学习笔记,防止忘掉(;へ:)
本节讲述整个项目基本布局的搭建
一、技术准备
完成该项目需要具备以下知识:
- div + css 布局
- flex 布局
- Less
- 原生js + jquery 使用
- rem适配
- echarts基础
二、案例适配方案
设计稿是1920px
- flexible.js 把屏幕分为 24 等份
- cssrem 插件的基准值是 80px
插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。 (但是别忘记重启vscode软件保证生效)
三、基本布局
1.header
基本要求:
- 高度为100px
- 背景图,在容器内显示
- 缩放比例为 100%
- h1 标题部分 白色 38像素 居中显示 行高为 80像素
- 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为:rgba(255, 255, 255, 0.7) 而文字大小为 20像素
2.mainbox 主体模块
基本要求:
- 需要一个上左右的10px 的内边距
- column 列容器,分三列,占比 3:5:3
css样式:
.mainbox { padding: 0.125rem 0.125rem 0; display: flex; .column { flex: 3; } &:nth-child(2) { flex: 5; } }
1)panel公共模块
整体布局:
.panel { position: relative; height: 3.875rem; border: 1px solid rgba(25, 186, 139, 0.17); background: url(../images/line\(1\).png); padding: 0 0.1875rem 0.5rem; margin-bottom: 0.1875rem; // 四个角的样式设置 &::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; left: 0; bottom: 0; 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: 0.6rem; line-height: 0.6rem; text-align: center; color: #fff; font-size: 20px; font-weight: 400; } .chart { height: 3rem; background-color: pink; }
2)中间地图布局
- 上面是no 数字模块
- 下面是map 地图模块
地图模块制作:
- 地图模块高度为 810px 里面包含4个盒子 chart 放图表模块 球体盒子 旋转1 旋转2
- 球体图片模块 map1 大小为 518px 要加背景图片 因为要缩放100% 定位到最中央 透明度 .3
- 旋转1 map 2 大小为 643px 要加背景图片 因为要缩放100% 定位到中央 透明度 .6 做旋转动画 利用z-index压住球体
- 旋转2 map3 大小为 566px 要加背景图片 因为要缩放100% 定位到中央 旋转动画 注意是逆时针
<div class="column"> <!-- 上方no模块制作 --> <div class="no"> <div class="no-hd"> <ul> <li>213455</li> <li>100000</li> </ul> </div> <div class="no-bd"> <ul> <li>需求人数</li> <li>供用人数</li> </ul> </div> </div> <!-- 地图模块 --> <div class="map"> <div class="map1"></div> <!-- 下面两个是旋转的图形 --> <div class="map2"></div> <div class="map3"></div> <div class="chart">ditu</div> </div> </div> .map { position: relative; height: 10.125rem; .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: 100% 100%; opacity: 0.3; } .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); } } }
四、初步布局效果
接下来会写图表的制作(但是是静态的)
相关文章推荐
- ECharts可视化大屏学习笔记【6】(地图)
- ECharts可视化大屏学习笔记【2】(ECharts基本使用)
- ECharts可视化大屏学习笔记【3】(柱状图)
- ECharts可视化大屏学习笔记【4】(折线图)
- ECharts可视化大屏学习笔记【5】(饼图)
- MVC项目结构搭建及单个类的实现学习笔记1
- 【学习笔记+实践】网页简单布局之结构与表现分离
- 深度学习笔记——matlab程序结构与可视化
- JVM学习笔记(1、 基本结构;2、Java代码编译和执行的整个过程3、内存管理和垃圾回收 4、 内存调优 )
- 【web】CodeIgniter框架学习笔记 之 使用ajax连接数据库实现Echarts动态数据可视化
- 深度学习Caffe实战笔记(15)CNN网络结构可视化
- 【深度学习】笔记1_Ubuntu14.04下caffe环境的搭建,无GPU版本以及python可视化环境的配置
- MVC项目结构搭建及单个类的实现学习笔记1
- 学习笔记:从0开始学习大数据-37.数据可视化大屏
- Hadoop源码学习笔记之NameNode启动流程分析一:源码环境搭建和项目模块及NameNode结构简单介绍
- Servlet与JSP学习笔记(一) 搭建环境
- css布局学习笔记之max-width
- JVM学习笔记(一)------ 基本结构
- Flex学习笔记作用域与布局约束
- 26、首先通过javascript包的异步加载来学习echarts包的结构