一:数据可视化项目
1.1:目标
- 能够说出数据可视化的目的
- 能够说出ECharts的基本使用步骤
- 能够独立使用ECharts完成可视化项目开发
1.2: 目录
什么是数据可视化
数据可视化项目概述
EChats简介
EChats的基本使用
数据可视化项目开发
1.3: 什么是数据可视化
1: 数据可视化
- 数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
- 数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。
2:数据可视化的场景
目前互联网公司通常有这么几大类的可视化需求:
3: 常见的数据可视化库
- D3.js目前Web端评价最高的Javascript可视化工具库(入手难)
- ECharts.js百度出品的一个开源Javascript数据可视化库
- Highcharts.js国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
- AntV蚂蚁金服全新一代数据可视化解决方案
- 等等
Highcharts和Echarts就像是Office和WPS的关系
4: 小结
- 数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息
- 数据可视化在我们互联网公司中经常用于通用数据报表,移动端图表,大屏可视化,图编辑等
- 数据可视化库有很多,接下来我们重点学习ECharts
1.4: 数据可视化项目概述
1: 项目展示
2: 项目目的
市场需求:
应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。
学习阶段需求:
项目对我们同学来说,起着承上启下作用。
3: 项目技术
- HTML5 + CSS3布局
- CSS3动画、渐变
- jQuery库+原生JavaScript
- flex布局和rem适配方案
- 图片边框border-image
- ES6模板字符
- ECharts可视化库等等
4: 小结
数据可视化项目展示
学习这个项目的目的:市场需求和学习阶段需求
项目用到的技术:以前学习过的技术和新技术
- CSS3动画、渐变
- jQuery库+原生JavaScript
- flex布局和rem适配方案
- 图片边框border-image
- ES6模板字符
- ECharts可视化库等等
Highcharts和Echarts就像是Office和WPS的关系
1.5: ECharts简介
ECharts是一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
官网地址:https://www.echartsjs.com/zh/index.html
快速上手 - Handbook - Apache ECharts
- 丰富的可视化类型
- 多种数据格式支持
- 流数据的支持
- 移动端优化
- 跨平台使用
- 绚丽的特效
- 详细的文档说明
1.6: ECharts的基本使用
1: ECharts使用五步曲
注意:这里只要求同学们记住Echarts使用的步骤,具体修改定制稍后会讲。
2: 选择不同类型图表
3: 相关配置讲解
- title:标题组件
- tooltip:提示框组件
- legend:图例组件
- toolbox: 工具栏
- grid:直角坐标系内绘图网格
- xAxis:直角坐标系 grid 中的 x 轴
- yAxis:直角坐标系 grid 中的 y 轴
- series: 系列列表。
- color:调色盘颜色列表
先了解以上9个配置的作用,其余配置还有具体细节我们查阅文档:文档菜单—配置项手册学echarts关键在于学会查阅文档,根据需求修改配置
series: 系列列表
type:类型 (什么类型的图表) 比如 line 是折线 bar柱形等
name: 系列名称,用于tooltip的显示,legend的图例筛选变化
stack: 数据堆叠。如果设置相同值,则会数据堆叠。
数据堆叠:第二个数据值= 第一个数据值+ 第二个数据值
第三个数据值= 第二个数据值+ 第三个数据值…. 依次叠加
如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠
先了解以上9个配置的作用,其余配置还有具体细节我们查阅文档:文档菜单—配置项手册学echarts关键在于学会查阅文档,根据需求修改配置
4:小结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echarts体验</title>
<!-- 1:引入echart.js文件 -->
<script src="echart.mini.js"></script>
<style>
.box {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 2: 准备一个盒子用来装生成的图表 注意:这个盒子必须具备大小 -->
<div class="box"></div>
<script>
// 3: 初始化echarts 实例对象
var myChart = echarts.init(document.querySelector('.box'));
// 4: 指定配置项和数据(想要什么图形就在文档中找到对应的代码,复制更换这一步即可)
var option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 5: 将配置项设置给echarts实例对象
myChart.setOption(option);
</script>
</body>
</html>
二: 数据可视化项目
2.1: 目录
数据可视化项目适配方案
数据可视化项目开发
2.2: 数据可视化项目适配方案
1: 项目需求
- 设计稿是1920px
- PC端适配:宽度在 1024~1920之间页面元素宽高自适应
2: 适配方案
要把屏幕宽度约束在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;
}
}
步骤:
0: 屏幕默认分成10等份,但是根据项目,改成24等份更精准
1: 引入flexible.js文件,把10等份改成24等份 ,把插件的基准值改为80,重启vscode
2: 要把屏幕宽度约束在1024 ~ 1920之间有适配
2.3: 数据可视化项目开发
步骤:
1: 引入css, echarts.min.js , flexible.js. , jquery.min.js 文件
2: 安装preview on web server 插件
3: html + css搭建结构,再通过echarts.js等填写图表等内容
4: 给body指定背景图片,
5: 网页布局 父盒子里面有三个盒子
6: 设置父盒子宽高 ,背景图片(contain:一个图片完全显示出来;cover:铺满整个盒子)
7: 分别给三个盒子里面装小盒子就可以了
8: 发现每个盒子都有相似的边框,添加背景图片不能实现,因为每个盒子的大小不一样;就通过边框图片来实现;
公共面板样式:
9: 每个图片的边框都一样,可以把这个统一封装,需要的时候进行调用;写一个公共的面板样式;
10: 准备公共面板样式 panel---需要的盒子进行调用
- 给盒子添加边框,因为给盒子制定边框的宽度,就不用给盒子指定边框图片的宽度了(因为边框图片的宽度默认就和边框的宽度一样) ,就给边框四个不同的边;
- 给边框一个背景图片 border- image - source
- 给边框图片进行切割 border-image-slice;
- 注意:边框的宽度需要转换成rem,因为它随着屏幕大小改变的;但是边框切割不带单位,不需要转换;
- 输入的内容,在盒子的右下,因为设置了盒子边框的宽度 ;如何让内容往左,上一点显示? 给内容专门新建立一个盒子,并且添加绝对定位,但内容盒子还是只会沿着盒子边框,也不会往上,左(也不会压住盒子边框)。可以把内容盒子拉伸 (top,left,right, bottom),拉伸后可以覆盖掉边框的宽度 ; 但别压的太紧了,可以给内容盒子设置内边距;
- 而且每个盒子(公共面板)都有一个 下外边距 20px 转换成rem
通过类名调用字体图标:
11: 每个盒子都有图标,用图片做不太合适 ,需要用字体图标来做比较合适(之前有学),现有一种新的方式来做字体图标 ,通过类名来调用字体图标
疑问:
1: .viewpoint给了背景图片,但是也给了padding,为啥背景图片没有移动;
2: 需要更加深入了解图片切割
1: 项目基础布局
2: 边框图片
1. 边框图片的使用场景
盒子大小不一,但是边框样式相同,此时就需要边框图片来完成
为了实现丰富多彩的边框效果,在CSS3中,新增了 border-image属性,这个新属性允许指定一幅图像作为元素的边框。
2. 边框图片的切割原理(重要)
把四个角切出去(九宫格的由来),中间部分可以铺排、拉伸或者环绕。(按照上右下左顺序切割)
九宫格切图的原理:就是把四个角切完整;切的顺序是上右下左
3. 边框图片语法规范(重要)
border-image-slice:这个是指上右下左切的高度;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框图片</title>
<style>
div {
width: 400px;
height: 300px;
border: 15px solid pink;
border-image-source: url();
/* 上下左右切 */
border-image-slice: 30 30 30 30;
/* 这个属性默认的是 border的宽度 但是 有区别 ,这个是 边框图片的宽度 不会挤压文字 */
border-image-width: 30px;
border-image-repeat: round;
}
</style>
</head>
<body>
<div>加油吧</div>
</body>
</html>
3: 通过类名调用字体图标
icommon字体图标文件---复制style.css和 fonts 放到代码文件目录中(style.css放在fonts文件夹了,打开style.css,原本是url需要经过fonts的,但放入fonts文件夹中,就删除fonts)