数据可视化展示案例
1. 展示
2. 知识储备
2.1 边框图片属性
-
作用
为盒子设置边框图片效果
-
属性介绍
-
border-image-source
作用: 设置边框图片路径 例如: border-image-source: url('border.jpg');
-
border-image-slice
作用: 裁切边框图片 裁切方式: 按照 上 右 下 左 顺序裁切 例如: border-image-slice: 165 165 165 165; 注意事项: 1. 裁剪时候不需要设置单位 2. 如果裁切的尺寸大小一样则可以设置一个值
-
border-image-repeat
作用: 设置边框图片默认平铺方式 例如: border-image-repeat: round; 注意事项: 1. border-image-repeat的默认值是: stretch 拉伸 2. repeat 平铺 3. round 铺满
-
border-image-width
作用: 设置边框图片宽度 例如: border-image-width: 20px; 注意事项: 1. border-image-width 只能改变边框图片大小 2. border-image-width 不会影响盒子大小
-
属性合写方式
border-image: border-image-source border-image-slice / border-image-width border-image-repeat 例如: border-image: url('border.png') 50 38 20 127 / 50px 38px 20px 127px round; 注意: 1. 如果没有设置border-image-width, '/' 可以省略 2. 如果设置border-image-width,则必须使用 '/' 隔开,且必须放到 border-image-repeat之前
-
2.2 rem适配
-
原因
1. 当前设计稿件的尺寸是 1920px 2. 在不同的设备中都能够正常完整预览 [1024 - 1920]
-
移动端rem适配过程
- 通过媒体查询的方式,动态计算每种设备中根标签文字大小
☞ 先约定要将设计稿件分为多少等份 ☞ 当前设备宽度 / 等比例的份数 = 根标签文字大小 例如: @media only screen and (max-width: 1366px) { html { /* 1366px / 20 */ font-size: 68px; } } @media only screen and (max-width: 767px) { html { /* 767px / 20 */ font-size: 38px; } } div { width: 2rem; height: 2rem; background-color: red; }
- 使用JS实现rem适配
-
通过js动态获取当前设备的宽度
document.querySelector('html').offsetWidth;
-
通过js动态设置根标签文字大小
document.querySelector('html').style.fontSize = 设备宽度 / 基准值(份数)
-
完整写法
(function(){ function setFont() { //基准值 var baseNum = 80; var client = document.querySelector('html'); //获取当前设备宽度 var width = client.offsetWidth; //设置当前根标签文字大小 if(width >= 1920) { width = 1920; }else if(width <= 1024) { width=1024; } client.style.fontSize=width / baseNum + 'px'; } setFont(); //当窗口发生改变的时候触发的一个事件 window.onresize = function() { setFont(); } })();
2.3 插件动态换算rem值
-
为什么要使用插件换算rem值?
原因: 在进行rem适配的过程中,需要不断的将测量元素的大小设置为rem,所以需要vscode中插件帮助实现
-
步骤
-
先在vscode中搜索
cssrem
插件并安装 -
安装成功后进行配置
"cssrem.rootFontSize": 24, //【计算时的基准值, 最大尺寸 1920 / 80 】 "cssrem.fixedDigits": 3, // 【取三位小数, 计算除不尽的时候,保留3位小数】 "cssrem.autoRemovePrefixZero": false//【是否去除0 例如: 0.5 不能写成 .5】
-
2.4 Echarts库介绍
- Echarts是什么?
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11XQ,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
https://echarts.apache.org/zh/index.html
- Echarts怎么用?
-
先下载
Echarts
Js文件https://github.com/apache/incubator-echarts/tree/4.8.0
-
在网页中引入Echarts文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html> 备注: echarts.min.js 文件在解压缩文件后 dist 文件夹中
-
初体验
<div id="main" style="width: 600px;height:400px;"></div> <script src="echarts.min.js"></script> <script> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: { }, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: { }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>
-
Echarts配置选项介绍
- series
设置当前图表类型的 例如: series : [ { //代表当前是折线图 type: 'line', //与图例配合使用 name: '', //图表要显示的数据 data: [] } ]
-
title
设置当前图表标题 title : { title: '标题' }
-
legend
设置图表图例 legend: { data:['这是图例'] } 注意: 1. 要显示图例,series中必须设置 name 属性 2. legend 中的值必须和 series中 name 属性值一样
-
tooltip
设置鼠标悬停到图表上的提示 tooltip: { trigger : 'axis' //默认值是 item }
-
xAxis
设置图表X轴相关信息 xAxis: { name: 'X轴显示的名称', //设置名称位置 nameLocation: 'end', //设置X轴显示数据 data: [] }
-
yAxis
设置图表Y轴相关信息,与X轴配置类似 yAxis: { name: 'X轴显示的名称', //设置名称位置 nameLocation: 'end', //设置X轴显示数据 data: [] }
-
grid
设置网格 grid: { show: true, borderColor: '#999', }
-
color
//设置图例颜色 color: ['yellow']
3. 数据可视化实现步骤
3.1 准备工作
-
搭建案例目录结构
-
准备样式初始化
body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,p { margin: 0; padding: 0; list-style: none; font-size: 0.583rem; font-family: '微软雅黑'; color: #fff; } a { text-decoration: none; }
-
整个页面设置背景图
html { background: url('../img/bg.jpg') no-repeat; background-size: cover; }
-
准备页面适配js文件
(function(){ function setFont() { //基准值 var baseNum = 80; var client = document.querySelector('html'); //获取当前设备宽度 var width = client.offsetWidth; //设置当前根标签文字大小 if(width >= 1920) { width = 1920; }else if(width <= 1024) { width=1024; } client.style.fontSize=width / baseNum + 'px'; } setFont(); //当窗口发生改变的时候触发的一个事件 window.onresize = function() { setFont(); } })();
-
引入图标字体库CSS文件
-
引入当前页面对应的index.css文件
-
引入Echarts库js文件
-
引入Jquery文件
3.2 网页布局
-
盒子划分
1. 整个页面是一个大盒子 2. 大盒子中分为 左侧盒子(leftBox) 中间盒子(middleBox) 右侧盒子(rightBox) 3. 使用伸缩布局实现盒子一行显示
-
初始化盒子基本样式
-
给当前大盒子设置一个背景图片及其他基础样式
.main_body { //伸缩盒子,让子元素一行显示 display: flex; min-width: 42.667rem; max-width: 80rem; width: 100%; margin: 0 auto; //给当前元素设置一个logo背景图 background: url('../img/logo.png') no-repeat top center; background-size: contain; padding: 3.583rem 0.833rem 0.833rem; box-sizing: border-box; }
-
设置网页中公共样式
- 边框图片公共样式.borderImage() { width: 100%; border: 1px solid transparent; //设置边框图片 border-image-source: url('../img/border.png'); // 分割边框 border-image-slice: 50 38 58 127; // 设置边框的平铺方式 border-image-repeat: round; // 设置边框宽度 border-image-width: 2.083rem 1.583rem 2.417rem 5.292rem; box-sizing: border-box; }
-
具体操作
猛戳下载资源包以及案例代码
-
如有不足,请多指教,
未完待续,持续更新!
大家一起进步!