一、学习目标
- 能够说出数据可视化的目的
- 能够说出ECharts
- 能够独立使用echarts完成可视化项目开发
二、目录
- 什么是数据可视化
- 数据可视化项目概述
- ECharts简介
- ECharts的基本使用
- 数据可视化项目开发
1.什么是数据可视化
1.1数据可视化
数据可视化主要目的:借助图形化手段,清晰有效的传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。
1.2数据可视化场景
通用报表, 移动端图标, 大屏可视化, 图编辑&图分析, 地理可视化
1.3常见的数据可视化库
- D3.js 目前Web端评价最高的Javascript可视化工具库(入手难)
- ECharts.js 百度出品的一个开源Javascript数据可视化库
- Highcharts.js 国外的前端数据可视化库,非商用免费
2.数据可视化项目概述
2.1项目展示
2.2项目目的
市场需求:
应对现在数据可视化趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出
学习阶段需求:
承上:复习以前学过的内容;启下:为学习服务器编程做铺垫。
2.3项目技术
- HTML5+CSS3布局
- CSS3动画.渐变
- Jquery库+原生Javascript
- flex布局和rem适配方案
- 图片边框border-image
- ES6模板字符
- ECharts可视化库等等
3.ECharts简介
ECharts是一个javascript插件库,需要引入到页面,底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
4.ECharts基本使用
4.1ECharts使用五部曲
- 下载并引入echarts.js文件
- ECharts 安装 | 菜鸟教程 (runoob.com)
- 准备一个具备大小的DOM容器(生成的图表会放入这个容器内)
-
.box { width: 400px; height: 400px; background-color: pink; }
- 初始化Echarts实例对象(实例化echarts对象)
-
var myChart = echarts.init(document.querySelector('.box'));
- 指定配置项和数据(option)(根据具体需求修改配置选项)
-
var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };
- 将配置项设置给echarts实例对象
myChart.setOption(option);
4.2相关配置讲解
grid:{
containLabel:true;
//当刻度标签溢出的时候,grid区域是否包含坐标轴的刻度标签。如果为true,则显示
//如果left,right等设置为0%刻度标签就会溢出了,此时决定是否显示刻度标签
}
三、数据可视化项目适配方案
3.1项目需求
- 设计稿是1920px
- PC端适配:宽度在1024-1920之间页面元素宽高自适应
- flexible.js把屏幕分为24等份
- cssrem插件的基准值是80px,插件-配置按钮--配置扩展设置--Root Font Size里面设置。但是别忘记重启vscode软件保证生效
- 要把屏幕宽度约束在1024-1920之间有适配,实现代码:
@media screen and (max-width:1024px) {
html {
font-size: 42.66px !important;
}
}
@media screen and (max-width:1920px) {
html {
font-size: 80px !important;
}
}
3.2数据可视化项目开发
项目核心:先布好局,之后利用ECharts填充图标
3.3边框图片
- 边框图片的使用场景(边框是一个样式的,但是无法通过css样式编写,而且大小不一样,只能用边框图片)
- 边框图片的切图原理
- 边框图片的语法规范
为了实现丰富多彩的边框效果,在CSS3中,新增了border-image属性,这个新属性允许指定一幅图像作为元素的边框。
2.边框图片切图原理:(重要)
把四个角切出去(九宫格的由来),中间部分可以铺排、拉伸或者环绕。
3.边框图片的使用语法(重要)
属性 | 描述 |
border-image-source | 用在边框的图片的路径(那个图片?) |
border-image-slice | 图片边框向内偏移。(裁剪的尺寸,一定不加单位,上右下左顺序) |
border-image-width | 图片边框的宽度(需要加单位){不是边框的宽度是边框图片的宽度} |
border-image-repeat | 图片边框是否应平铺(repeat).铺满(round)或拉伸(stretch)默认拉伸 |
步骤:1.现将图片资源引入:border-image-source: url(images/border.jpg);
2.然后将图片的四个角切出去,中间部分将会拉长:border-image-slice: 205 205 205 205;(border-image-slice: 205 ;)
3.设置图片边框的宽度: border-image-width: 30px;(这个属性默认的是border的宽度,但是有区别,这个边框图片的宽度不会挤压文字)
4.设置边框图片的排列方式:border-image-repeat: round;(默认为拉伸状态)
4.公共面板样式开发
出现的错误:当我们给容器设置了边框之后,里面的内容就不会对齐显示。我们可以给一个子容器,通过设置绝对定位(父绝子相),默认的是与内容对齐,我们可以设置top、left、right、bottom扩大范围,与父容器大小相同,再给一个padding值,将其内容归位.
5.通过类名调用字体图标
- HTML页面引入字体图标中css文件
- 标签直接调用图标对应的类名就可。(类名在css文件中标注)
- 引入CSS文件和声明文体图标的时候,一定注意路径问题
6.无缝滚动原理
6.1先克隆marquee里面所有的行(row)
6.2通过CSS3动画滚动marquee
6.3鼠标经过marquee就停止动画;
animation-play-state:paused;