一：数据可视化项目
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)
2136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
