前言：

本篇文章的学习目的:

1、可视化面板布局适配屏幕
2、利用ECharts 实现柱状图展示

实现的技术栈：

基于 flexible.js +rem 智能大屏适配
VScode cssrem插件
Flex布局
Less 使用
基于 Echarts 数据可视化展示
Echarts 柱状图数据设置
Echarts 地图引入

数据可视化简介

数据可视化主要目的: 借助于图形化手段，清晰有效地传达与沟通信息
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理

过程详解：

1.该项目需要具备知识:

div + css 布局
flex 布局
Less
原生js + jquery 使用
rem适配
Echarts基础

2.案例适配方案

设计稿是1920px
flexible.js 把屏幕分为 24 等份
cssrem 插件的基准值是 80px
插件-配置按钮---配置扩展设置--Root Font Size 里面设置，但是别忘记重启vscode软件保证生效

3.基础设置

body 设置背景图，缩放为 100% ，行高1.15
css初始化

安装插件

①px to rem & rpx & vw (cssrem) 进行单位的转换

②安装EasyLess（安装完记得重启）

⭕EasyLess插件不能把less文件自动转变为css文件

文件 —> 首选项— > 设置，在扩展里面找到 EasyLess点一下 setting.json，在json配置中加入less.compile(less配置)

"less.compile": {"compress": false,//是否压缩"sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数"out": true, // 是否输出css文件，false为不输出，千万不要是false"outExt": ".css", // 输出文件的后缀,小程序可以写‘wxss‘
}

1.header 布局

高度为100px
背景图，在容器内显示
缩放比例为 100%
h1 标题部分白色 38像素居中显示行高为 80像素
时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素

// 格式： 当前时间：2020年3月17-0时54分14秒
<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 + "秒";t = setTimeout(time, 1000); //设定定时器，循环运行     }</script>

2.header部分css样式

header {position: relative;height: 1.25rem;background: url(../images/head_bg.png) no-repeat top center;background-size: 100% 100%;h1 {font-size: 0.475rem;color: #fff;text-align: center;line-height: 1rem;}.showTime {position: absolute;top: 0;right: 0.375rem;line-height: 0.9375rem;font-size: 0.25rem;color: rgba(255, 255, 255, 0.7);}
}

3.mainbox 主体模块

需要一个上左右的10px 的内边距

column 列容器，分三列，占比 3：5：3

css样式：

.mainbox {padding: 0.125rem 0.125rem 0;display: flex;.column {flex: 3;}&:nth-child(2) {flex: 5;margin:0 .125rem .1875rem}
}

4.公共面板模块 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 {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;}}
}

5.柱形图 bar 模块(布局)

标题模块 h2 高度为 48px 文字颜色为白色文字大小为 20px
图标内容模块 chart 高度 240px
以上可以作为panel公共样式部分

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

6.中间布局

上面是no 数字模块
下面是map 地图模块

数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
注意中间列 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制作2个小角，边框 2px solid #02a6b5 宽度为 30px 高度为 10px
小竖线给第一个小li after 就可以 1px宽背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可
no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px

/* 声明字体*/
@font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF);
}

7.

ECharts 数据各种图自适应可视化项目过程详解（附完整代码）相关推荐

Win+TexLive2020+TexStudio安装过程详解附ElsevierLatex模板下载并使用
Win+TexLive2020+TexStudio安装过程详解附ElsevierLatex模板下载并使用一.下载并安装Texlive2020 1.下载TexLive2020 2.安装过程解压之后运 ...
Java web 开发的概念、环境配置、创建项目过程详解（Eclipse）
Java Web 开发 Java Web 开发概念搭建过程详解在eclipse创建Dynamic Web Project 创建时选择Tomcat的版本创建项目成功 eclipse环境下如何配置 ...
html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果（通俗易懂附完整代码）...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...
python调用第三方接口获取数据_python调用接口,python接收post请求接口(附完整代码)...
与Scala语言相比,Python有其独特的优势和广泛的应用,python调用接口,因此Spark也推出了PySpark,它在框架上提供了一个使用Python语言的接口,python接收post请求接 ...
二叉树的先序、中序、后序、层序遍历方式详解，由遍历序列构造二叉树过程详解以及C++代码详细实现
二叉树的遍历树与二叉树的定义.性质,二叉树的顺序存储结构.链式存储结构二叉树的遍历是指按某条搜索路径访问树中每个结点,使得每个结点均被访问一次,而且仅被访问一次.由于二叉树是一种非线性结构,每个结 ...
轮播图详解（完整代码在最后）
01 先写出基本标签布局,这里用父级div嵌套子级ul和div标签.ul是存储图片,子级div是圆点导航的父级div.代码如下: <div class="banner"> ...
MATLAB库函数polly2trellis(卷积码生成多项式转网格图描述)的实现过程详解
关注公号[逆向通信猿]更精彩!!! 生成多项式转网格图在MATLAB中,卷积码的维特比(Viterbi)译码实现通常需要先将生成多项式转换成网格图描述,然后才能利用网格图进行维特比译码生成多项式转 ...
vue-cli5脚手架搭建项目过程详解 -vue组件单元测试
简介单元测试是对软件中的最小可测试单元进行测试.(最小可测试单元是要有结果产出的.例如某个方法,单独的某个操作) 单元测试其实是伴随着敏捷开发,它是对更快开发的一种追求.早发现错误比晚发现错误会更好 ...
XPT2046触摸屏实验过程详解与STM32代码解析
触摸屏的简介触摸屏的控制 XPT2046芯片简介 1. XPT2046 的初始化 2. XPT2046 读取 X.Y 值 3. 物理坐标值的数据处理学习目标: 1.复习 STM32 的硬件 SPI ...

ECharts 数据各种图自适应可视化项目过程详解（附完整代码）

前言：

数据可视化简介

过程详解：

1.该项目需要具备知识:

2.案例适配方案

3.基础设置

1.header 布局

2.header部分css样式

3.mainbox 主体模块

4.公共面板模块 panel

5.柱形图 bar 模块(布局)

6.中间布局

7.

ECharts 数据各种图自适应可视化项目过程详解（附完整代码）相关推荐

最新文章

热门文章

ECharts 数据各种图自适应 可视化 项目过程详解（附完整代码）

前言：

数据可视化简介

过程详解：

1.该项目需要具备知识:

2.案例适配方案

3.基础设置

1.header 布局

2.header部分css样式

3.mainbox 主体模块

4.公共面板模块 panel

5.柱形图 bar 模块(布局)

6.中间布局

7. insertAdIfNeeded();

ECharts 数据各种图自适应 可视化 项目过程详解（附完整代码）相关推荐

最新文章

热门文章

ECharts 数据各种图自适应可视化项目过程详解（附完整代码）

7.

ECharts 数据各种图自适应可视化项目过程详解（附完整代码）相关推荐