笔记栈

# jQuery

# 1. 核心知识点

  • 能够说出什么是jQuery
  • 能够说出jQuery的优点
  • 能够简单的使用jQuery
  • 能够说出DOM对象和jQuery对象的区别 (面试)
  • 能够使用JQuery选择器
  • 能够通过JQuery操作样式

# 2. 学习目标

# 3. 开始学习

# 1. JQuery概述

# 1.1 概念

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

  • 举例说明

    例如: 点击按钮实现页面元素显示效果
//原生DOM版本
var btn = document.querySelector('button');
btn.onclick = function() {
var divs = document.querySelectorAll('div');
	for(var i = 0; i < divs.length; i++) {
	 	divs[i].style.display = 'block';
	 }
}
//JQ版本
$('button').click(function(){
	 $('div').show();
     //$('div').show(1000);
})

  • 概念详解

    • 什么叫 JavaScript 库

      ☞仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

☞JavaScript库：是一个封装好的特定的集合包大量的方法。从封装函数的角度理解库，就是在JavaScrip库中，封装了很多预先定义好的函数在里面

☞简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

JQuery就是这样的一个js文件: 本质上就是对我们之前原生js代码封装后的一个js文件

//备注: j 代表js  Query 代表查询

  • jQuery优点

    • 轻量级。核心文件才几十kb，不会影响页面加载速度
    • 跨浏览器兼容。基本兼容了现在主流的浏览器
    • 链式编程、隐式迭代
    • 对事件、样式、动画支持，大大简化了DOM操作
    • 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
    • 免费、开源

# 1.2 使用

  • 下载

    官网地址: https://jquery.com/
版本地址: https://code.jquery.com/

  • 版本介绍

    1. jQuery目标最新的版本是 v3.5.1【该版本不兼容IE6，7，8但是官网主要维护更新的版本】
2. jQuery v2版本 【不兼容IE6,7,8，不再维护】
3. jQuery v1版本 【兼容IE6,7,8,不再维护】

//Download the compressed, production jQuery 3.5.1       用于生产环境压缩后的文件
//Download the uncompressed, development jQuery 3.5.1    用于开发环境没有经过压缩

  • 引用

    1. 新建HTML页面
2. 在HTML页面中引用JQ文件 
例如:
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jQuery.js"></script>
	//或者
	<script type="text/javascript" src="jQuery.min.js"></script>
</head>
3. 使用

# 1.4 入口函数

  • DOM中如果在HTML结构之前写JS代码,需要设置加载事件,获取HTML元素

    <script type="text/javascript">
	window.onload = function() {
		var div = document.querySelector('div');
		console.log(div);
	}
</script>

  • JQ如果在HTML结构之前写js代码,需要设置加载事件(入口函数)

    $(function(){
	var div = document.querySelector('div');
	console.log(div);
})

//或者
$(document).ready(function(){ 
    var div = document.querySelector('div');
	console.log(div);
});

备注:
// 如果将JQ代码写到HTML结构后面,则可以设置入口函数也可以不用设置

  • JQ入口函数与js中的load事件区别

    ☞ js中的load事件是整个页面都加载完成后包括外部的资源文件都加载完毕后才执行
☞ jQuery中的入口函数是整个文档加载完成后就立即执行代码

☞ js中的load事件只能写一个,如果写多个会被覆盖掉
☞ Jquery中的入口函数可以写多个

# 1.4 $ 介绍

  • $ 就是JQuer的一个别名

    $(function(){}) 

// 可以写成如下写法:

jQuery(function(){
	var div = document.querySelector('div');
	console.log(div);
})

  • $ 是JQ中的顶级对象

    ☞ 在原生js中,顶级对象是window
☞ 在Jq中,顶级对象是 $, 本质就是通过JQ的方式将 window 对象转化为JQ对象
//例如:
$(function(){
	console.dir($);
})

# 1.5 DOM对象和JQ对象转化

  • JQ就是对JS的封装,可以通过原生的JS获取页面元素,那么也可以通过JQ获取页面元素

  • 体验通过JQ获取页面元素,并设置样式

    //通过JQ方式隐藏页面中的div标签
var div = $('div');
div.hide();

//提问: 通过jQ的方式能够获取div,可以给div调用 hide()方法隐藏,那么通过DOM获取div能否调用hide()隐藏呢?

  • DOM对象

    通过 document 方式获取到的元素都叫DOM对象

  • JQ对象

    通过 $ 方式获取到的元素都叫 JQ对象

//结论:
//1 .JQ对象中的方法或者属性原生DOM对象是不能使用的,反过来原生DOM对象中的方法或者属性JQ对象也无法使用

//例如:
var div = $('div');
div.style.display = 'none';

  • 将JQ对象转为DOM对象方式一:

    var div = $('div');
console.log(div);

//通过$获取到的div就是一个JQ对象,那么JQ对象本质上就是一个伪数组,这个数组中存储的就是DOM对象

//第一种转化方式:  JQ对象[索引]

//代码演示:
var div = $('div');
    div = div[0];
div.style.display = 'none';

  • 将JQ对象转化为DOM对象方式二:

    //语法:  JQ对象.get(索引)

//例如:
var div = $('div');
	div = div.get(0);
div.style.display = 'none';

  • 将DOM对象转化为JQ对象

    // 语法:  $(dom对象)
// 例如:
var div = document.querySelector('div');
	div = $(div);
div.hide();

# 2. JQ获取页面元素API

# 1.1基础选择器

  • 语法

    $('选择器');
注意: 选择器就是CSS选择器

  • ID选择器

    $('#id名')

  • 通配符选择器

    $('*');

  • 标签选择器

    $('标签名');

  • 并集选择器

    $('选择器, 选择器..');

  • 交集选择器

    $('标签名.class');

# 1.2层级选择器

  • 子代选择器

    $('选择器 > 选择器');

  • 后代选择器

    $('选择器 选择器');

# 1.4 结构选择器

  • :first

    $('选择器:first');   //获取第一个元素

  • :last

    $('选择器:last');	  //获取最后一个元素

  • eq(index)

    $('选择器:eq(值)');    //获取第n个元素,从0开始,

  • odd

    $('选择器:odd');     //获取索引是奇数的元素

  • even

    $('选择器:even');    //获取索引是偶数的元素

# 1.5通过方法筛选

  • parent() 或者 parents(选择器)

    $('元素').parent();      //获取当前元素的直接父元素

//例如:
var p = $('span').parent();
console.log(p);


$('元素').parents([选择器]);    //获取所有的父元素或者指定父元素
//例如:
var p = $('span').parents();
console.log(p);

var p = $('span').parents('div');
console.log(p);

  • children([选择器])

    $('元素').children([选择器]);    // 获取当前元素的直接子元素,子代选择效果一样

  • find(选择器)

    $('元素').find(选择器);	    //获取当前元素下所有满足条件的子元素, 后代选择器
例如:
var res = $('div').find('span');
console.log(res);

  • siblings(选择器)

    $('元素').siblings([选择器]);    //获取当前元素的所有同级兄弟元素或者指定兄弟元素

//例如:
var res = $('a').siblings();   //获取当前a标签所有兄弟元素
console.log(res);


var res = $('a').siblings('p');  //只获取当前元素的兄弟元素p
console.log(res);

  • nextAll([选择器])

    $('元素').nextAll([选择器]);    // 获取当前元素后面所有同级兄弟元素或者指定兄弟元素

//例如:
var res = $('a').nextAll();   //获取当前a标签后面所有兄弟元素
console.log(res);


var res = $('a').nextAll('h4'); //获取当前a标签后面的h4兄弟元素
console.log(res);

  • prevAll([选择器])

    $('元素').prevAll([选择器]);	  //获取当前元素前面所有同级兄弟元素或者指定元素

例如:
var res = $('a').prevAll();
console.log(res);

  • hasClass(类名)

    $('元素').hasClass('类名');   //判断当前元素是否有对应的类名,如果有返回true,否则返回false

例如:
var res = $('a').hasClass('nav');
console.log(res);

  • eq(值)

    $('元素').eq(值);		   //获取第几个元素, 从0开始

例如:
var res = $('span').eq(1);
console.log(res);

# 3. JQ方式元素注册事件

# 1.1 直接注册事件

语法:
JQ对象.事件名称(function(){
     处理程序
})

例如:
<input type="button" value="按钮">
$('input').click(function(){
	alert(123);
})

//补充事件名称:
点击事件: click
鼠标进入事件: mouseenter
鼠标离开事件: mouseleave

# 1.2隐式迭代

<input type="button" value="btn1">
<input type="button" value="btn2">
<input type="button" value="btn3">

//注册事件
var btns = $('input');
btns.click(function(){
	console.log(this.value);
})

//补充: 获取每一个元素的索引位置  JQ对象.index();

//分析: 获取页面中的所有按钮后,给按钮注册事件,JQ不需要我们手动遍历注册,自己内部就可以遍历注册事件

//隐式迭代: JQ内部自动遍历DOM元素的过程

# 4. JQ方式操作元素样式

# 1.1 通过.css方式操作样式

  • .css设置单个样式

    语法:
$('元素').css('属性', 值);

//例如:
$('div').css('background-color','red');

//注意:
1. 这种写法只能给元素设置一个样式
2. 这种写法本质上就是通过行内样式给标签设置样式

//思考: 如果页面中有多个元素,通过这种方式能否给所有的标签都设置样式?
<div></div>
<div></div>
$('div').css('background-color','red');

//代码验证: 是可以的, 因为这里面有隐式迭代

  • 课堂案例-导航隐藏显示

    <div class="nav">
	 	<div class="w">
	 		<ul class="ul1">
		 		<li><a href="javascript:;">首页</a></li>
		 		<li><a href="javascript:;">关于我们</a></li>
		 		<li>
		 			<a href="javascript:;">联系我们</a>
		 			<ul class="u2">
		 				<li><a href="javascript:;">邮件联系</a></li>
		 				<li><a href="javascript:;">电话联系</a></li>
		 				<li><a href="javascript:;">微信联系</a></li>
		 			</ul>
		 		</li>
		 	</ul>
	 	</div>
</div>

//鼠标进入:
$('.ul1 > li:last').mouseenter(function(){
    //备注: 这里必须写$(this). 因为 find是JQ对象中的方法,必须将DOM对象转化为JQ对象
	var ul = $(this).find('.u2');
	ul.css('display','block');
});
//鼠标离开:
$('.ul1 > li:last').mouseleave(function(){
	 $('.u2').css('display', 'none');
});

  • 导航隐藏显示案例-链式编程写法

    $('.ul1 > li:last').mouseenter(function(){
	var ul = $(this).find('.u2');
	ul.css('display','block');
}).mouseleave(function(){
	$('.u2').css('display', 'none');
})

//总结:
1. 给元注册事件,可以在当前元素后面连着继续写
2. 链式编程核心,给具体的对象设置,如果不是一个对象,则不能使用链式编程写法

  • .css设置多个样式

    语法:
$('元素').css({
   '属性': '值',
   '属性': '值',
    ...
})
    
例如:
$('div').css({
	'width': '200px',
	'height': 200,
	'background-color': 'red'
})
//注意:
1. 如果设置的值是数字,可以不用带有引号
2. 如果属性是按照CSS的属性方式设置,需要带有引号 . 例如 'background-color' 或者 backgroundColor

  • 课堂案例淘宝

    1. 获取元素索引位置

      //DOM版本
var divs = document.querySelectorAll('div');
for(var i = 0; i < divs.length; i++) {
	divs[i].index = i;
	divs[i].onclick = function() {
		alert(this.index);
	}
}
//JQ版本 通过 index()方法获取
$('div').click(function(){
	console.log($(this).index());
})

    2. 排他思想实现

      //DOM实现排他思想, 点击div设置文字颜色
var divs = document.querySelectorAll('div');
for(var i = 0; i < divs.length; i++) {
	divs[i].onclick = function() {
		for(var j = 0; j < divs.length; j++) {
			divs[j].style.color = '#000';
		}
		this.style.color = 'red';
	}
}
//JQ实现排他思想
$('div').click(function(){
	$(this).css('color', 'red').siblings().css('color','#000');
})

    3. 实现淘宝案例

      //每一个item注册一个鼠标进入事件
$('.item').mouseenter(function(){
	//当前元素设置背景图片
	$(this).css({
		'background-image': 'url(imgs/abg.gif)',
		'color' : '#fff'
	})
	 //当前元素对应的图片显示
	 var index = $(this).index();
     
     //根据当前index显示对应的内容
	 $('img').eq(index).css({
		'display': 'block'
	  }).siblings().css({
		'display' : 'none'
	  })
    
}).mouseleave(function(){
	$(this).css({
		'background-image' : 'linear-gradient(to bottom, #fff, pink)',
		 'color' : '#000'
	})
})

    4. 改进版淘宝案例写法

      • hover方法介绍

        语法:
hover(function(){}, function(){});

//代码演示:
$('div').hover(function(){
	console.log('鼠标进入');
}, function(){
	console.log('鼠标离开');
})

介绍:
1. 第一个参数回调函数,表示鼠标进入时候触发的事件 (mouseenter)
2. 第二个参数回调函数,表示鼠标离开时候触发的事件 (mouseleave);

      • 改版后淘宝案例

        $('.item').hover(function(){
	$(this).css({
		'background-image': 'url(imgs/abg.gif)',
		'color' : '#fff'
	})
	//当前元素对应的图片显示
	var index = $(this).index();
	//根据当前index显示对应的内容
	$('img').eq(index).css({
		 'display': 'block'
	}).siblings().css({
		 'display' : 'none'
	})
},function(){
	$(this).css({
		'background-image' : 'linear-gradient(to bottom, #fff, pink)',
		'color' : '#000'
	})
})

# 1.2 通过添加类方式操作样式

  • addClass('类名')

    语法:
$('元素').addClass('类名');

//注意:
1. addClass中设置的是类名,不是类选择器

2. 通过addClass如果需要设置多个类名可以调用多次,如下代码:
$('input').click(function(){
	$('div').addClass('box');
	$('div').addClass('br');
})

3. 设置多个类名还可以如下写法
$('input').click(function(){
	$('div').addClass('box br');
})

  • removeCLass('类名')

    语法:
$('元素').removeClass('类名');

//例如:
$('input').click(function(){
	$('div').removeClass('box')
})

$('input').click(function(){
	$('div').removeClass('box br');
})

$('input').click(function(){
	$('div').removeClass('box');
	$('div').removeClass('br');
})

$('input').click(function(){
	$('div').removeClass('box').removeClass('br');
})

  • toggleClass('类名')

    语法:
$('元素').toggleClass('类名');

//例如:
$('input').click(function(){
	$('div').toggleClass('br');
})

$('input').click(function(){
	$('div').toggleClass('br box');
})

  • 课堂案例-tab栏切换

    $('li').mouseenter(function(e){
	$(this).addClass('active').siblings().removeClass('active');
	let index = $(this).index();
	$('.item').eq(index).show().siblings().hide();
}).mouseleave(function(){
	$('.item').hide();
	$(this).removeClass('active');
});

# 1. 核心知识点

  • JQuery动画
  • JQuery自定义动画
  • JQuer操作元素

# 2. 学习目标

  • 能够使用JQuery定义动画
  • 能够使用JQuery操作元素属性

# 3.开始学习

# 1. JQuery动画

# 1.1 显示-隐藏动画

  • show()

    语法: 
$(对象).show([speed, [easing], [fn]])
//参数介绍:
1. show() 方法中的3个参数可以不用设置, 显示元素没有动画效果
2. 第一个参数表示动画速度,可以设置 'slow' , 'normal', 'fast' 或者表示动画的时长毫秒
3. 第二个参数表示动画切换效果, 默认 'swing[摇动摆动,由快到慢]' 或者 设置 'linear'
4. 第三个参数表示动画完成后执行的函数(回调函数)

//代码演示1,未设置任何参数,控制元素显示,没有动画效果
var btn = $('input');
var div = $('div');
btn.click(function(){
	div.show();
})

//代码演示2,设置第一个参数,元素按照动画显示
var btn = $('input');
var div = $('div');
btn.click(function(){
	div.show('fast');
})

//代码演示3,设置两个参数,元素实现切换效果
btn.click(function(){
	div.show('normal','swing');
})

//代码4演示,设置第三个参数,动画执行完后回调函数
btn.click(function(){
	div.show('normal','swing', function(){
		alert('动画完成');
	});
})

  • hide()

    语法:
$(对象).hide([speed, [easing], [fn]);
//参数介绍:
1. 参数可以省略,隐藏元素没有动画效果
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行
//代码演示同上

  • toggle()

    语法:
$(对象).toggle([speed], [easing], [fn])
//参数介绍
1. 参数可以省略, 如果元素显示则切换为隐藏的,如果元素隐藏的则切换为显示的
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行
//代码演示同上

  • 课堂案例-好友列表案例

# 1.2 滑动动画

  • slideDown()

    介绍: slideDown()  显示元素(通过改变元素高度)
语法:
// $(对象).slideDown([speed],[easing],[fn]);

参数介绍:
1. 参数可以省略
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

//代码演示1:
$('input').click(function(){
	$('div').slideDown();
})

//代码演示2
$('input').click(function(){
	$('div').slideDown('fast');
})

//代码演示3
$('input').click(function(){
	$('div').slideDown('fast', 'linear');
})

//代码演示4
$('input').click(function(){
	$('div').slideDown('fast', 'linear', function(){
		alert('动画完成')
	});
})

  • slideUp()

    介绍: 通过高度变化（向上减小）来动态地隐藏所有匹配的元素
语法:
// $(对象).slideUp([speed,[easing],[fn]])

参数介绍:
1. 参数可以省略
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

//代码演示:
$('input').click(function(){
	$('div').slideUp('fast', 'linear', function(){
		console.log('动画完成')
	});
})

  • slideToggle()

    语法:
// $(对象).slideToggle([speed],[easing],[fn])

参数介绍:
1. 参数可以省略
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

//代码演示:
$('input').click(function(){
	$('div').slideToggle('fast', 'linear', function(){
		 console.log('动画完成')
	});
})

  • 小米课堂案例

    //1. 鼠标进入大盒子显示内容区域,鼠标离开隐藏内容区域
$('.nav').hover(function(){
	$('.content').slideDown('fast');
	//2.给每一项设置鼠标进入事件
	$(this).find('a').mouseenter(function(){
		$(this).css('color', 'red').parent().siblings().find('a').css('color', '#888');
		//获取索引
	 	var index = $(this).parent().index();
	 	 //显示内容区域
	 	 $('.item').eq(index).show().siblings().hide();
	});
}, function(){
	 $('.content').slideUp();
	 $('a').css('color', '#888');
})

# 1.3 淡入淡出动画

  • fadeIn()

    介绍: 通过透明度的变化来实现所有匹配元素的淡入效果[显示]
语法: 
// $(对象).fadeIn([speed],[easing],[fn])

参数介绍:
1. 参数可以不用设置
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

//代码演示1:
$('input').click(function(){
	$('div').fadeIn();
})

//代码演示2
$('input').click(function(){
	$('div').fadeIn('fast');
})

//代码演示3
$('input').click(function(){
	 $('div').fadeIn('fast', 'linear');
})

//代码演示4
$('input').click(function(){
	$('div').fadeIn('fast', 'linear', function() {
	 	alert('动画完成');
    });
})

  • fadeOut()

    介绍: 通过透明度的变化来实现所有匹配元素的淡出效果[隐藏]
语法:
// $(对象).fadeOut([speed],[easing],[fn])

参数介绍:
1. 参数可以不用设置
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

  • fadeToggle()

    介绍: 通过透明度的变化来开关所有匹配元素的淡入和淡出效果
语法:
//  $(对象).fadeToggle([speed,[easing],[fn]])

参数介绍:
1. 参数可以不用设置
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

  • fadeTo()

    介绍:  可以自定义透明度动画效果
语法:
//  $(对象).fadeTo([[speed],opacity,[easing],[fn]])

参数介绍:
1. speed 表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间  [必须设置]
2. opacity 表示透明度, 0 - 1 之间必须设置
3. easing 表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. fn 表示回调函数,动画完成后执行

//代码演示:
$('input').click(function(){
    $('div').fadeTo(1000, 0.1);
})

  • 课堂高亮显示案例

    $('.item').hover(function(){
	$(this).fadeTo('fast', 1, 'linear').siblings().fadeTo('fast', 0.5, 'linear');
},function(){
	$('.item').fadeTo('fast', 1);
})
// 问题: 当鼠标无限次晃动,动画会一直排队执行

// 解决: 通过stop()停止动画排队,必须写到动画前
$('.item').hover(function(){
	$(this).stop().fadeTo('fast', 1, 'linear').siblings().stop().fadeTo('fast', 0.5, 'linear');
},function(){
	$('.item').stop().fadeTo('fast', 1);
})

# 1.5自定义动画

  • animate()

    介绍: 用于创建自定义动画的函数。
语法:
// $(对象).animate(params,[speed],[easing],[fn]);

参数介绍:
1.params 一组包含作为动画属性和终值的样式属性和及其值的集合   [必须设置]
2.speed  三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
3.easing 默认jQuery提供"linear" 和 "swing".
4.fn:在动画完成时执行的函数

//代码演示1
$('input').click(function(){
	$('div').animate({
		'left': '500px'
	})
})

//代码演示2
$('input').click(function(){
	$('div').animate({
		'left': '500px'
	}, 'fast')
})

//代码演示3
$('input').click(function(){
	$('div').animate({
		'left': '500px'
	}, 'fast', 'linear')
})

//代码演示4
$('input').click(function(){
	$('div').animate({
		'left': '500px'
	}, 'fast', 'linear', function(){
		alert('动画完成')
	})
})

//注意: 
1. animate自定义动画,无法实现颜色动画效果,如果需要改变颜色,需要单独下载插件实现
2. 无法直接实现css中转化效果,如果需要实现,则可以通过添加类名得的方式实现
3. 单独的属性,可以使用驼峰命名法 ('marginLeft' 替代 'margin-left')

https://www.runoob.com/jquery/eff-animate.html

  • 课堂案例-手风琴案例

    • 步骤

      1. 搭建HTML结构

        <div class="box">
	<ul>
        <!--注意这里写结构的时候不需要加类名current-->
	 	<li class="current">
	 	 	<img src="imgs/c1.jpg" alt="" class="small">
	 	 	<img src="imgs/c.png" alt="" class="big">
	 	 </li>
	 	 <li>
	 	 	<img src="imgs/h1.jpg" alt="" class="small">
	 	 	<img src="imgs/h.png" alt="" class="big">
	 	 </li>
	</ul>
</div>

      2. 设置CSS样式

        .box {
	width: 773px;
	background: url('imgs/bg.png') no-repeat;
	padding: 10px;
	margin: 50px auto;
}
.box ul {
	overflow: hidden;
}
.box li {
	width: 70px;
	height: 70px;
	float: left;
	position: relative;
	margin-right: 5px;
}
.box li img {
	position: absolute;
}
.small {
	width: 70px;
	height: 70px;
}
.big {
	display: none;
}
.box .current .big {
	display: block;
}
.box .current .small{
	display: none;
}
.box .current {
	width: 224px;
}

      3. 设置JS代码

        • 鼠标移动到当前元素(li)上,修改当前li的宽度及兄弟元素的宽度

          $(this).animate({'width':224}).siblings().animate({'width':70})

        • 设置当前元素中的大图片显示,小图片隐藏

          $(this).find('.big').fadeIn().siblings().fadeOut();

        • 设置当前元素兄弟元素中大图片隐藏,小图片显示

          $(this).siblings().find('.big').fadeOut().siblings().fadeIn();

        • 注意: 在所有动画前加 stop()方法停止动画排队

# 2. 动画综合案例

//给当前白云设置一个带有动画效果的类名
$('.cloud').addClass('add_animation');

//点击向下继续按钮
$('.down').click(function(){
	//沙发图片向下移动
	$('.sofaImg').stop().animate({		
		'top': '-55px'		
	}, 2000, 'linear', function(){
        //沙发回调函数中购物车移动
		$('.cart').stop().animate({
			'marginLeft': '900px'
		},'slow', 'linear', function(){
		//购物车回调函数中,显示文字
			$('.test2').fadeIn();
			setTimeout(function(){
				//显示收货地址
				$('.address').fadeIn();
			}, 1000)	 
		}) 
	})
})

# 3.JQ操作元素属性

# 1.1 回顾webAPI中操作标签属性

  • 操作标签内置系统属性

    • getAttribute(属性名)
    • setAttribute(属性名, 值)
    • removeAttribute(属性名)

  • 操作标签自定义属性

    • getAttribute(属性名) setAttribute(属性名, 值) removeAttribute(属性名)

    • DOM.dataset

      DOM.dataset  返回的是一个对象
☞ 获取自定义属性值:   DOM.dataset.属性名
☞ 设置自定义属性值:   DOM.dataset.自定义属性名 = 值;

# 1.2 JQ操作元素属性

  • 获取标签内置系统属性

    语法:
$(对象).prop('属性名');

//代码演示:
var div = $('div');
var res = div.prop('class');
console.log(res);

  • 设置标签内置系统属性

    语法:
$(对象).prop('属性名', 值);

//代码演示:
var div = $('div');
var res = div.prop('class', 123);

//备注如果设置多个可以通过对象的方式设置,例如:
$('input').prop({
    'id': 'test',
    'name': 'abc'
});

  • 获取标签自定义属性

    语法:
$(对象).attr(自定义属性名);

//代码演示:
var div = $('div');
var res = div.attr('data-myname');

  • 设置标签自定义属性

    语法:
$(对象).attr(自定义属性名, 值);

//代码演示:
var div = $('div');
var res = div.attr('myAge', 18);

  • 备注

    $(对象).attr() 既可以操作标签自定义属性也可以操作标签内置属性

# 1.3课堂案例-全选功能

  • 全选案例1步骤

    1. 搭建HTML结构

    2. 实现全选效果

    3. 实现改变背景颜色效果

      //获取当前选择框选中状态
let state = $(this).prop('checked');

//获取其他选择框
$('.item input[type="checkbox"]').prop('checked', state);

//设置背景颜色如果是选中状态,添加否则移除
state ? $('.item').addClass('active') : $('.item').removeClass('active');

# 4. JQ操作标签中的值

# 1.1 获取/设置表单控件中的值

  • 获取

    语法:
$(对象).val()

  • 设置

    语法:
$(对象).val(值);

# 1.2获取/设置普通标签中的值

  • 获取

    语法:
$(对象).text();     // 特点与原生js中的innerText一样

$(对象).html();	  // 特点与原生js中的innerHTML一样

  • 设置

    语法:
$(对象).text(值);   // 特点与原生js中的innerText一样

$(对象).html(值); 	 // 特点与原生js中的innerHTML一样

# 1.3 课堂案例-小计功能

  • 步骤:

    1. 设置HTML结构

    2. 设置CSS样式

    3. 实现具体功能

      1. 点击加号/减号修改输入框中的值

        //获取输入框中的值: 当前按钮的兄弟元素
var num_v = $(this).siblings('input').val();

// 将当前值增加1
num_v++;

//将当前值赋值给输入框
$(this).siblings('input').val(num_v);

      2. 点击加号/减号计算小计总价

        补充: 价格保留2位小数  toFixed(2)

例如:  var num = 123;
      num = num.toFixed(2);

        //计算总价: 当前商品数量 * 商品单价
var money = num_v * $(this).parent().siblings('.sprice').find('strong').text();

//将当前总价设置给总价标签
$(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));

      3. 用户修改输入框中的值计算小计总结

        $('.num1 input').change(function(){

//获取当前输入框中的值
var num_v = $(this).val();

//计算总价: 当前商品数量 * 商品单价
var money = num_v * $(this).parent().siblings('.sprice').find('strong').text();
			 
  //将当前总价设置给总价标签
  $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));

})

# 1.4课堂案例-商品总数-总价功能

  • 步骤

    1. 设置HTML结构

    2. 设置CSS样式

    3. 实现功能

      1. JQ遍历对象,获取对象中的值

        <ul>
  <li>12</li>
  <li>12</li>    
  <li>12</li>    
</ul>
如何获取li标签中的值? 需要遍历li    //注意:隐式迭代只能在事件中使用,默认遍历不能依靠隐式迭代

语法:
$对象.each(function(index, item){ })

参数介绍:
1. index 伪数组中的索引值
2. item 伪数组中的每一个DOM对象

注意:
1. each遍历后item是一个dom对象不是JQ对象

      2. JQ遍历方式二

        //语法:
$.each(数组对象, function(index, item){ })

//参数介绍:
index  数组中索引值
item   数组中的每一个值

      3. 实现总数求和功能

        var num_sum = 0;
//数量求和: 获取页面中的每一个input标签中的值累加
$('.num1 input').each(function(index,item){
	num_sum += parseInt($(item).val());
})
//将总和设置给对应的标签
$('.product_num strong').text(num_sum);

      4. 实现总计求和功能

        var money_sum = 0;
$('.t_price strong').each(function(i, item){
	money_sum += Number($(item).text());
})
//将总价设置给对应的标签
$('.product_money strong').text(money_sum.toFixed(2));

# 5. JQ删除元素

# 1.1 删除元素/元素中内容

  • remove()

    语法:
$对象.remove();

// 特点: 从页面中将当前标签删除

  • empty()

    语法:
$对象.empty();
// 特点: 将标签中的所有内容清空,当前标签依然保存

  • html()

    语法:
$对象.html('');
//特点: 将标签中的所有内容清空,当标签标签依然保留

# 1.2 课堂案例-删除功能

# 6.JQ创建元素

# 1.1 创建元素

  • $对象.html(标签)

    语法:
$对象.html('html标签名');

例如:
$('div').html('<h1>我是标题标签</h1>');

特点:
与原生js中 innerHTML的效果一样

  • $(html标签)

    语法:
$('html标签');

返回: JQ标签对象

例如:
var  span = $('<span></span>');

# 1.2 添加元素

  • 父元素末尾添加元素

    语法:
$父元素.append(元素);

例如:
var p = $('<p>我是创建的p</p>');
$('div').append(p);

  • 父元素开始位置添加元素

    语法;
$父元素.prepend(元素);

例如:
var p = $('<p>我是创建的p</p>');
$('div').prepend(p);

  • 设置为当前元素前一个兄弟元素

    语法:
$对象.before(元素);

例如:
var p = $('<p>我是创建的p</p>');
$('div').before(p)

  • 设置为当前元素后一个兄弟元素

    语法:
$对象.after(元素)

例如:
var p = $('<p>我是创建的p</p>');
$('div').after(p)

# 1.3 综合案例-弹幕效果

# 1. 核心知识点

  • JQ设置缓存数据
  • JQ实现实绑定事件
  • JQ实现解绑事件
  • JQ获取元素大小和位置

# 2. 学习目标

  • 能够说出4种常见的事件注册方式
  • 能够说出on绑定事件的优势
  • 能够说出jQuery委派的方式及优点
  • 能够说出绑定事件和解绑事件

# 3. 开始学习

# 1.JQ设置缓存数据

# 1.1 回顾程序中保存数据的方式

  • 变量,数组,对象,本地存储,属性,自定义属性..

# 1.2JQ通过data方法设置/获取数据

  • 语法

    $对象.data('键', '值');    //设置
$对象.data('键');  	 // 获取

代码演示:
$('div').data('myage', 18);
console.log($('div').data('myage'));

  • 与attr区别

    1. attr是将值通过自定义属性的方式将值保存到标签上
2. data是将值保存到标签上,但是在标签上无法体现

# 2.JQ方式获取元素大小和位置

# 1.1 JQ获取元素大小

  • 获取元素大小

    • $对象.width()

      语法:
$对象.width();   //获取当前元素大小,只包含内容区域大小

代码演示:
console.log($('div').width());

    • $对象.height()

      语法:
$对象.height();  //获取当前元素高度,只包含内容区域高度

代码演示:
console.log($('div').height());

    • $对象.innerWidth()

      语法:
$对象.innerWidth();    //获取当前元素宽度 = 内容区域大小 + 内边距

代码演示:
console.log($('div').innerWidth());

    • $对象.innerHeight()

      语法:
$对象.innerHeight();  //获取当前元素高度 = 内容区域大小 + 内边距

代码演示:
console.log($('div').innerHeight());

    • $对象.outerWidth([booloean])

      语法:
$对象.outerWidth();   //获取当前元素宽度 = 内容区域大小 + 内边距 +边框

代码演示:
console.log($('div').outerWidth(false));

//注意,默认是false,可以不用写

    • $对象.outerHeight([boolean])

      语法:
$对象.outerHeight(true);  //获取当前元素高度= 内容区域大小 + 内边距 +边框 + 外边距

代码演示:
console.log($('div').outerHeight(true));

  • 设置元素大小

    • $对象.width(值) $对象.height(值)

      代码演示:
$('div').width('200').height('200');

//注意:
1. 在设置值的时候可以带单位px也可以不用带单位px

    • $对象.innerWidth(值) $对象.innerHeight(值)

      代码演示:
$('div').innerWidth('200').innerHeight('200');

//注意:
1. 此时设置的值中已经包含内边距,内边距默认为0,如果在css中给当前元素设置内边距,则元素大内容区域大小会发生改变

    • $对象.outerWidth(值) $对象.outerHeight(值)

      代码演示:
$('div').outerWidth('200', true).outerHeight('200', true);

//注意
1. 此时设置的值是包含外边距的,如果通过css给当前元素设置外边距,则元素内容区域大小会发生改变

# 1.2JQ获取元素位置

  • offset()

    语法:
$(对象).offset(); 

//总结:
1. $对象.offset() 返回的是一个对象
2. $对象.offset() 返回对象中包含 left 属性 和 top属性
3. 获取当前元素的位置是相对整个页面,不是相对父元素        
4. 类似于固定定位(相对视口或者文档)

//代码演示:
$('.one').offset().left
$('.one').offset().top

  • position()

    语法:
$(对象).position(); 

//总结:
1. $对象.position() 返回的是一个对象
2. $对象.position() 返回对象中包含 left 属性和 top属性
3. 获取当前元素的位置,如果当前父元素没有定位,相对整个页面,如果父元素有定位,参照父元素 
4. 类似于绝对定位

//代码演示:
$('.one').position().left
$('.one').position().top

  • scrollTop()

    语法:
$(对象).scrollTop();
$(对象).scrollleft();
//总结:
1. 获取当前元素(内容)滚动出去的距离
2. 如果希望在程序中获取当前距离大小,需要在scroll事件中获取

//代码演示:
$('.box').scroll(function(){
	console.log($(this).scrollTop());
});

# 1.3 课堂案例-返回顶部案例

# 1.4 课堂案例-电梯案例

# 3.JQ方式注册事件

# 1.1 通过常规方式注册事件

事件源.事件类型(function(){});

//代码演示:

$('.box').click(function(){
	$(this).css('background','pink');
});
$('.box').mouseenter(function(){
	$(this).css('background','blue');
});
$('.box').mouseleave(function(){
	$(this).css('background', 'red')
});

特点:
1. 只能给事件源注册一个事件
2. 如果注册多个事件,重复设置,不符合JQ的特性(do more do less)

# 1.2 通过on方式注册事件

事件源.on('事件类型', function(){});

//代码演示:
$('.box').on('click', function(){
	 console.log(123);
})


事件源.on({
    事件类型 : function(){},
    事件类型 : function(){}
})

//代码演示:
$('.box').on({
	click: function(){
	 	$(this).css('background','blue');
	},
	mouseenter: function(){
	 	$(this).css('background', 'pink');
	}
})


//如果事件中的代码相同还可以这样写:
$('.box').on('click mouseenter mouseleave', function(){
	console.log(123);
})

# 1.3 通过委托方式注册事件

父事件源.on('事件类型', '子选择器', function(){})

// 代码演示:
$('.box').on('click', '.one', function(){
	console.log(123);
})
// 注意:
// 1. 如果页面中的元素是动态创建的,给元素注册事件,需要使用委托的方式
//代码演示:
$('.box').on('click', '.one', function(){
	console.log(123);
})
$('<div class="one"></div>').appendTo('.box');

# 1.4课堂案例-发布微博案例

1594695224614

# 1.5 解绑事件

  • off()

    $对象.off([事件名]);

//代码演示1:
$('.box').click(function(){
	alert(123);
})
$('.box').off();

//代码演示2:
$('div').on('click', function(){
	alert(123);
})
$('.box').off();

// 如果元素身上有很多事件如何解绑?
$('.box').on({
	click: function() {
		alert(123);
	},
	mouseenter: function() {
		alert(789);
	}
})
$('.box').off();
或者:
$('.box').off('mouseenter');
// 总结
1. 如果off() 中没有设置任何参数,代表将所有的事件移除
2. 如果要移除对应的事件,在off方法中设置对应的方法名称即可

  • off()解绑委托事件

    $父元素对象.off('事件类型', '选择器');

// 代码演示:
$('.box').on('click', '.one', function(){
	console.log(123);
})
$('.box').off('click', '.one');

  • one()

    $对象.one('事件类型', function(){})

//总结
1. 通过one方式给元素注册事件,只能执行一次

# 4. 自动触发事件

# 1.1 事件类型()

$对象.事件类型();

//原生写法
var div = document.querySelector('div');
div.onclick = function(){
	this.style.background = 'pink';
}
div.click();

//JQ方式
var div = $('div');
div.click(function(){
	$(this).css('background','pink');
})
div.click();

# 1.2 trigger方式

$对象.trigger('事件类型');

var div = $('div');
div.click(function(){
	$(this).css('background','pink');
})
div.trigger('click');

# 5. JQ事件对象参数

# 1.1 绍事件对象参数

//原生:获取鼠标点击位置
var div = document.querySelector('div');
div.onclick = function(e){
	var x = e.clientX;
	console.log(x);
}

//JQ方式;
var div = $('div');
div.click(function(e){
	console.dir(e);
	var x = e.clientX;
	console.log(x);
})

//总结: JQ中事件对象参数与DOM中的事件对象参数操作方式一样

//备注:  
// 1.阻止事件冒泡  e.stopPropagation();
// 2.阻止默认行为: e.preventDefault()

# 6. JQ拷贝

# 1.1 extend

语法:
$.extend([deep], targetObject, currentObject);

参数介绍:
1. deep : 布尔类型 默认值是 false, 
   false 代表是浅拷贝 (浅拷贝中如果遇到对象,将对象的地址赋值)
   true  代表深拷贝 (深拷贝中如果遇到对象,将对象直接拷贝赋值)
2. targetObject:  拷贝后赋值的对象
3. currentObject: 被拷贝的对象


//代码演示浅拷贝 : 浅拷贝遇到对象的时候,是将对象对应的内存地址进行拷贝复制
var obj1 = {
	uname: '张三',
	uage : 28,
	msg : {
		uheight: 180
	}
}
var obj2 = {};
obj2 = $.extend(obj2, obj1);
obj2.uname = '李四';
console.log(obj2);
console.log(obj1);

1594701546013

// 代码演示深拷贝:  深拷贝的时候遇到对象,是将对象的值重新复制一份,然后将新的内存地址赋值给另外一个变量
var obj1 = {
	uname: '张三',
	uage : 28,
	msg : {
		uheight: 180
	}
}
var obj2 = {};
obj2 = $.extend(true,obj2, obj1);
obj2.msg.uheight = '190';
console.log(obj2);
console.log(obj1);

1594701797471

# 7. 扩展部分

# 1.1 插件介绍

  • 作用

    提高代码效率

  • 全屏切换插件

    1. 案例网页: https://browser.360.cn/ee/ (opens new window)

    2. 插件地址: https://github.com/alvarotrigo/fullPage.js

    3. 中文地址: http://www.dowebok.com/demo/2014/77/

    4. 使用步骤

      • 下载插件

      • 设置html结构

        <div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

      • 引用文件

        //JQ插件依赖于jQ,第一步必须先引用jQ插件
<script type="text/javascript" src="jQuery.min.js"></script>

//引用插件文件
<script type="text/javascript" src="fullpage.min.js"></script>

//引用插件样式表
<link rel="stylesheet" href="fullpage.css">

      • 设置入口函数

        $(function(){
    $('#fullpage').fullpage();
});

      • 基本配置

        $(function(){
    $('#fullpage').fullpage({
        // 设置背景颜色
        sectionsColor : ['#ccc', 'red', 'blue', 'green'],
        //显示导航
        navigation: true,
        //导航位置
        navigationPosition: 'right',
         //是否循环
         loopTop: true,
        loopBottom: true
    });
});

  • 懒加载插件

    1. 插件地址: http://www.jq22.com/jquery-info11629

    2. 使用步骤

      • 下载插件

      • 设置HTML结构

        <img data-lazy-src="..." />

注意: 图片路径属性必须设置如上方式

      • 引用文件

        <script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript" src="EasyLazyload.min.js"></script>

注意:
1. 懒加载js文件必须放到html结构后面引用

      • 调用函数

        lazyLoadInit({
	// 显示时间
	showTime: 0
});

# 1.2 其他JQ插件库

 http://www.jq22.com/

# 8. 综合案例

# 1.1 在线演示地址

http://www.todolist.cn/

# 1.2 知识点-引用

  • 本地存储

    • 设置

      localStorage.setItem(key, value);

    • 获取

      localStorage.getItem(key);

    • 总结

      1. 在保存数据的时候,需要将对象转化为字符串进行保存
      2. 得到的数据也是一个字符串,如果希望继续操作则需要将字符串转化为对象

  • 对象转字符串

    JSON.stringify(对象);

  • 字符串转对象

    JSON.parse(字符串);

  • 从数组中删除值

    数组.splice(索引,个数)

# 1.3 实现添加操作

  • 功能一:

    1. 给输入框注册键盘事件

    2. 获取输入框中的值添加到本地存储中

      ☞: 如果本地存储有值,则将数据更新到原来的数据中
☞: 如果本地存储中没有值,则直接创建一条新的数据到本地存储中

    3. 获取本地存储数据,更加数据数量,动态创建li标签添加到 ol标签中

    4. 默认加载数据

    1594722076460

  • 功能二:

    1. 点击复选框,修改状态

    2. 将已完成的数据动态加载到ul列表中

      注意:
1.先给ol标签中的复选框注册事件
2.当前复选框的索引与其父元素的索引位置一样,所以在遍历父元素的时候,将父元素的索引值保存到当前标签上
3.加载数据的时候,要按照是否完成的状态动态显示对应的数据,既要通过条件判断实现
4.给ul动态创建元素的时候,记得要给ul标签先清空内容
5.最后同样给ul标签中的input标签注册点击事件

      1594724920399

  • 功能三:删除

    1594725582888

# 数据可视化展示案例一

# 1. 案例展示

1598160280392

# 2. 知识储备

# 2.1 边框图片属性

  • 作用

    为盒子设置边框图片效果

    1598161598854

  • 属性介绍

    • 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适配过程

    1. 通过媒体查询的方式,动态计算每种设备中根标签文字大小
    ☞ 先约定要将设计稿件分为多少等份
☞ 当前设备宽度 / 等比例的份数 = 根标签文字大小

例如:
@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;
}
    1. 使用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中插件帮助实现

  • 步骤

    1. 先在vscode中搜索 cssrem插件并安装

      1598164737767

    2. 安装成功后进行配置

      1598164868729

      1598164912734

      1598164974278

      "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怎么用?

  1. 先下载 Echarts Js文件

    https://github.com/apache/incubator-echarts/tree/4.8.0

  2. 在网页中引入Echarts文件

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

备注: echarts.min.js 文件在解压缩文件后 dist 文件夹中

  3. 初体验

    <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配置选项介绍

    1. series
    设置当前图表类型的
例如:
series : [
    {  
        //代表当前是折线图
        type: 'line',
        //与图例配合使用
        name: '',
        //图表要显示的数据
        data: []
    }
]

    1. title

      设置当前图表标题
title : {
    title: '标题'
}

    2. legend

      设置图表图例

legend: {
	data:['这是图例']
}

注意:
1. 要显示图例,series中必须设置 name 属性
2. legend 中的值必须和 series中 name 属性值一样

    3. tooltip

      设置鼠标悬停到图表上的提示
tooltip: {
	 trigger : 'axis'
	 //默认值是 item
}

    4. xAxis

      设置图表X轴相关信息

xAxis: {
	name: 'X轴显示的名称',
	//设置名称位置
	nameLocation: 'end',
	//设置X轴显示数据
	data: []
}

    5. yAxis

      设置图表Y轴相关信息,与X轴配置类似

yAxis: {
    name: 'X轴显示的名称',
	//设置名称位置
	nameLocation: 'end',
	//设置X轴显示数据
	data: []
}

    6. grid

      设置网格

grid: {
	show: true,
	borderColor: '#999',
}

    7. color

      //设置图例颜色
color: ['yellow']

# 3. 数据可视化实现步骤

# 3.1 准备工作

  • 搭建案例目录结构

    1598170719866

  • 准备样式初始化

    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. 使用伸缩布局实现盒子一行显示

    代码如下:

    <div class="main_body">
        <!-- 左侧区域 -->
        <div class="left_viewport"></div>


        <!-- 中间区域 -->
        <div class="middle_viewport"></div>


        <!-- 右侧区域 -->
        <div class="right_viewport"></div>
</div>

  • 盒子位置及大小设置

    前提: 使用伸缩盒子实现
左侧大盒子占比为: 3  中间大盒子占比为: 4   右侧大盒子占比为: 3
// 主体盒子
.main_body {
    //伸缩盒子,让子元素一行显示
    display: flex;

    //左侧区域
    .left_viewport {
        flex: 3;
    }

    //中间区域
    .middle_viewport {
        flex: 4;
    }

    //右侧区域
    .right_viewport {
        flex: 3;
    }
}

  • 初始化盒子基本样式

    1. 给当前大盒子设置一个背景图片及其他基础样式

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

    2. 设置网页中公共样式

      • 边框图片公共样式

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

# 3.3 数据可视化左侧盒子

  • 左侧上部盒子 HTML结构

     <!-- 左侧盒子 -->
        <div class="leftBox">
            <!-- 左侧第一个盒子 -->
            <div class="l_topBox">
                <div class="item">
                    <strong>2,190</strong>
                    <p>
                       <span class="icon-dot"></span>
                       设备总数
                    </p>
                </div>
                <div class="item">
                    <strong>2,190</strong>
                    <p>
                        <span class="icon-dot colo1"></span>
                        季度新增
                    </p>
                </div>
                <div class="item">
                    <strong>2,190</strong>
                    <p>
                        <span class="icon-dot colo1"></span>
                        运营设备
                    </p>
                </div>
                <div class="item">
                    <strong>2,190</strong>
                    <p>
                        <span class="icon-dot colo2"></span>
                        异常设备
                    </p>
                </div>
            </div>
        </div>

    // 左侧区域-顶部盒子
// 第一个盒子
    .leftBox {
        flex: 3;
        // 左侧第一个盒子
        .l_topBox {
            width: 100%;
            height: 4.458rem;
            padding: 0 1.458rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .borderImg();
            .item {
                strong {
                    color: #fff;
                }
                p { 
                    margin-top: 0.417rem;
                    font-size: 0.75rem;

                    .colo1 {
                        color: #6acca3;
                    }

                    .colo2 {
                        color: #ed3f35;
                    }
                }
            }
            
        }
    }

  • 左侧中间盒子

    html结构
 <div class="l_midBox">
                <!-- 标题 -->
                <div class="title">
                    <a href="javascript:;" class="active" data-msg="list1">故障设备</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-msg="list2">异常设备监控</a>
                </div>
                <!-- 提示 -->
                <div class="tips">
                    <span>故障时间</span>
                    <span>设备地址</span>
                    <span>异常代码</span>
                </div>

                <!-- 内容区域 -->
                <div class="content">
                    <ul class="list1">
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                        <li>
                            <span>20201111</span>
                            <span>北京昌平建材城西路金燕龙...</span>
                            <span>10086</span>
                        </li>
                    </ul>
                    <ul class="list2">
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                        <li>
                            <span>20191111</span>
                            <span>北京顺义马坡黑马程序员...</span>
                            <span>10010</span>
                        </li>
                    </ul>
                </div>

            </div>

     .l_midBox {
            width: 100%;
            height: 19.792rem;
            margin: 0.833rem 0;
            .borderImg();

            // 标题
            .title {
                height: 2.5rem;
                line-height: 2.5rem;
                padding: 0 1.25rem;
                font-size: 0.833rem;
                display: flex;
                .line {
                    width: 0.167rem;
                    height: 0.833rem;
                    background-color: #00f2f1;
                    margin-top: 0.833rem;
                    margin-left: 1.083rem;
                    margin-right: 1.083rem;
                }
                .active {
                    color: #fff;
                }
            }

            //提示区域
            .tips {
                height: 1.583rem;
                line-height: 1.583rem;
                background-color: rgba(255,255,255,.2);
                display: flex;
                font-size: 0.583rem;
                padding: 0 1.25rem;
                color: #68d8fe;

                span:nth-child(1) {
                    width: 5.958rem;
                }
                span:nth-child(2) {
                    width: 11.042rem;
                }
                span:nth-child(3) {
                    width: 3.333rem;
                }
            }

            //列表内容区域
            .content {
                padding: 0 1.25rem;
                height: 14.583rem;
                overflow: hidden;
                ul {
                    animation: move 10s linear infinite;
                    &:hover {
                        animation-play-state: paused;
                    }
                }
                li {
                    height: 1.458rem;
                    line-height: 1.458rem;
                    font-size: 0.5rem;
                    display: flex;
                    span:nth-child(1) {
                        width: 5.958rem;
                    }
                    span:nth-child(2) {
                        width: 11.042rem;
                    }
                    span:nth-child(3) {
                        width: 3.333rem;
                    }
                }
                .list2 {
                    display: none;
                }
            }
            //动画
            @keyframes move {
                0% {
                    transform: translateY(0);
                }
                100% {
                    transform: translateY(-14.583rem);
                }
            }

        }

    // 监控设备对应的js代码功能
(function () { 
    //点击切换
    $('.l_midBox .title a').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        //获取对应的内容区域显示和隐藏
        var className = $(this).attr('data-msg');
        //设置对应的内容隐藏和显示
        $('.' + className).show().siblings().hide();
    });
    //动态克隆元素,要克隆所有的li
    $('.list1 li, .list2 li').each(function (index, item) {
        var result = $(item).clone();
        $(item).parent().append(result);
    });
})();

  • 左侧底部盒子

    html结构

<div class="l_botBox">
                <div class="title">点位分布统计</div>
                <div class="content">
                    <!-- 左侧饼状图 -->
                    <div class="leftPie"></div>
                    <!-- 右侧数据展示 -->
                    <div class="rightMsg">
                        <div class="item">
                            <strong>320,11</strong>
                            <p>
                                <span class="icon-dot colo1"></span>
                                点位总数
                            </p>
                        </div>
                        <div class="item">
                            <strong>418</strong>
                            <p>
                                <span class="icon-dot colo2"></span>
                                本月新增
                            </p>
                        </div>
                    </div>
                </div>
            </div>

    css样式

 .l_botBox {
            width: 100%;
            height: 13.958rem;
            .borderImg();

            //标题
            .title {
                height: 2.833rem;
                line-height: 2.833rem;
                padding: 0 1.333rem;
                font-size: 0.833rem;
                color: #fff;
            }

            //内容
            .content {
                padding: 0 1.333rem;
                display: flex;
                justify-content: space-between;
                //左侧饼状图
                .leftPie {
                    width: 13.208rem;
                    height: 9.917rem;
                }
                //右侧数据展示
                .rightMsg {
                    width: 6.958rem;
                    height: 9.917rem;
                    background: url('../img/rect.png') no-repeat;
                    background-size: cover;
                    padding: 1.667rem 1.208rem 0;
                    box-sizing: border-box;

                    strong {
                        font-size: 0.917rem;
                        color: #fff;
                    }
                    p {
                        font-size: 0.667rem;
                    }

                    .colo1 {
                        color: #ed3f35;
                    }
                    .colo2 {
                        color: #dcc41b;
                    }

                    .item {
                        margin-bottom: 1.667rem;
                    }
                }
            }
        }

    饼状图配置选项:

(function () { 
    var option = {
        tooltip: {
            trigger: 'item',
        },
        series: [{
            name: '面积模式',
            type: 'pie',
            //设置圆半径
            radius: [10, 60],
            //当前圆位置
            center: ['50%', '50%'],
            roseType: 'area',
            data: [{
                    value: 100,
                    name: '湖北',
                },{
                    value: 50,
                    name: '云南',
                },{
                    value: 55,
                    name: '北京',
                },{
                    value: 75,
                    name: '山东',
                },{
                    value: 60,
                    name: '上海',
                },{
                    value: 95,
                    name: '贵州',
                },{
                    value: 60,
                    name: '河北',
                },{
                    value: 80,
                    name: '四川',
                }
            ],
            //设置引导线长度
            labelLine: {
                length: 10,
                length2: 10
            },
            //设置颜色
            color: ['#1d9dff', '#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#9fe6b8', '#32c5e9', '#0096ff']
        }]
    };
    var mychart = echarts.init(document.querySelector('.left_view_bottomBox .content .pie'));
    mychart.setOption(option);
})();

# 3.4 数据可视化中间盒子

  • 中间大盒子

    • HTML结构

       <div class="middleBox">
    <div class="m_top_title"></div>
    <div class="m_top_map"></div>
    <div class="m_bot_line"></div>
</div>

    • CSS样式

      .middleBox {
        flex: 4;
        margin-top: 1.333rem;
        margin-left: 0.833rem;
        margin-right: 0.833rem;
}

  • 顶部地图盒子

    • HTML结构

      
<!-- 顶部盒子 -->
             <div class="m_top_title">
                <p>
                    <span class="icon-cube"></span>
                    设备数据统计
                </p>
            </div>

    • CSS样式

       //顶部盒子
.m_top_title {
            width: 100%;
            height: 2.167rem;
            line-height: 2.167rem;
            p {
                color: #fff;
            }
            span {
                color: #68d8fe;
            }
        }

.m_top_map {
            width: 100%;
            height: 21.667rem;
            background: rgba(255,255,255,.2);
        }
      • js部分
      //需要修改的部分
geo: {
        map: 'china',
        //设置地图默认大小
        zoom: 1.2,
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            //正常默认地图颜色
            normal: {
                //地图颜色
                areaColor: '#142957',
                //选中边框颜色
                borderColor: '#0692a4'
            },
            //鼠标选中颜色
            emphasis: {
                areaColor: '#0b1c2d'
            }
        }
    },
        
        
        
步骤:
1. 需要引用china.js文件(获取全国地理坐标)
2. 案例地址:
https://gallery.echartsjs.com/editor.html?c=x2Ei_JbHZb


社区地址:
https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

  • 底部柱状图盒子

    • HTML结构

      <!-- 下盒子 -->
<div class="m_bot_line">
                <div class="title">全国用户数据统计</div>
                <div class="content">
                    <div class="left_line"></div>
                    <div class="rightMsg">
                        <div class="item">
                            <strong>120,899</strong>
                            <p>
                                <span class="icon-dot colo1"></span>
                                用户总产量
                            </p>
                        </div>
                        <div class="item">
                            <strong>248</strong>
                            <p>
                                <span class="icon-dot colo2"></span>
                                本月新增
                            </p>
                        </div>
                    </div>
                </div>
            </div>

    • CSS样式

       //底部盒子

        .m_bot_line {
            width: 100%;
            height: 13.958rem;
            margin-top: 0.833rem;
            .borderImg();

            //标题
            .title {
                padding: 0 1.333rem;
                height: 2.5rem;
                line-height: 2.5rem;
                font-size: 0.833rem;
                color: #fff;
            }
            //内容区域
            .content {
                padding: 0 1.333rem;
                display: flex;
                justify-content: space-between;

                .left_line {
                    width: 20.417rem;
                    height: 9.917rem;
                }

                .rightMsg {
                    width: 6.958rem;
                    height: 9.917rem;
                    background: url('../img/rect.png') no-repeat;
                    background-size: cover;
                    padding: 1.667rem 1.208rem 0;
                    box-sizing: border-box;

                    strong {
                        font-size: 0.917rem;
                        color: #fff;
                    }

                    p {
                        font-size: 0.667rem;
                    }

                    .colo1 {
                        color: #ed3f35;
                    }

                    .colo2 {
                        color: #dcc41b;
                    }

                    .item {
                        margin-bottom: 1.667rem;
                    }
                }
            }
        }

    • JS代码

      //全国用户总量统计
(function () { 

    var item1 = {
        value: 1300,
        itemStyle: {
            color: '#254065'
        }
    };
    var item2 = {
        value: 1200,
        itemStyle: {
            color: '#254065'
        }
    };
    var item3 = {
        value: 1100,
        itemStyle: {
            color: '#254065'
        }
    };
    var option = {
        xAxis: {
            type: 'category',
            data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
            axisLine: {
                show: false
            },
            //隐藏刻度线
            axisTick: {
                 show: false
            },
            //刻度线文字颜色
            axisLabel: {
                color: '#4389e1'
            }
        },
        yAxis: {
            type: 'value',
            //设置Y轴分割线
            splitLine: {
                lineStyle: {
                    color: '#005668'
                }
            },
            //隐藏Y轴线
            axisLine: {
                show: false
            },

            //隐藏Y轴刻度
            axisTick: {
                show: false
            },

            //刻度线文字颜色
            axisLabel: {
                color: '#4389e1'
            }
        },
        series: [{
            data: [2100, 1900, 1700, 1560, 1400, item1, item2, item3, 900, 750, 600, 480, 240],
            type: 'bar',
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#00fbfa' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#0064cf' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            }
        }],
        //设置网格
        grid: {
            show: true,
            left: '0%',
            top: '5%',
            right: '2%',
            bottom: '0%',
            borderColor: '#005668',
            // 文字溢出显示
            containLabel: true
        },
        //设置鼠标悬停提示
        tooltip: {
            trigger: 'item'
        }
    };

    var mychart = echarts.init(document.querySelector('.middle_view_botBox .leftBar'));

    mychart.setOption(option);
})();

# 3.5 数据可视化右侧盒子

  • 第一个盒子HTML结构

     <!-- 右侧区域-顶部盒子 -->
             <div class="r_topBox">
                <div class="title">
                    <a href="javascript:;" class="active" data-msg="year">365天</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-msg='month3'>90天</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-msg='month'>30天</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-msg='hour'>24小时</a>
                </div>
                <div class="content">
                    <div class="item year">
                        <div class="left_item">
                            <strong>6,987</strong>
                            <p>
                                <span class="icon-dot colo1"></span>
                                订单量
                            </p>
                        </div>
                        <div class="right_item">
                            <strong>5,987</strong>
                            <p>
                                <span class="icon-dot colo2"></span>
                                订单量
                            </p>
                        </div>
                    </div>
                    <div class="item month3" style="display: none">
                        <div class="left_item">
                            <strong>5,987</strong>
                            <p>
                                <span class="icon-dot colo1"></span>
                                订单量
                            </p>
                        </div>
                        <div class="right_item">
                            <strong>4,987</strong>
                            <p>
                                <span class="icon-dot colo2"></span>
                                订单量
                            </p>
                        </div>
                    </div>
                    <div class="item month" style="display: none">
                        <div class="left_item">
                            <strong>4,987</strong>
                            <p>
                                <span class="icon-dot colo1"></span>
                                订单量
                            </p>
                        </div>
                        <div class="right_item">
                            <strong>3,987</strong>
                            <p>
                                <span class="icon-dot colo2"></span>
                                订单量
                            </p>
                        </div>
                    </div>
                    <div class="item hour" style="display: none">
                        <div class="left_item">
                            <strong>2,987</strong>
                            <p>
                                <span class="icon-dot colo1"></span>
                                订单量
                            </p>
                        </div>
                        <div class="right_item">
                            <strong>1,987</strong>
                            <p>
                                <span class="icon-dot colo2"></span>
                                订单量
                            </p>
                        </div>
                    </div>
                </div>
            </div>

  • 第一个盒子CSS样式

    //右侧区域
    .r_topBox {
            width: 100%;
            height: 6rem;
            .borderImg();

            //标题
            .title {
                padding: 0 1.333rem;
                display: flex;
                height: 2.5rem;
                line-height: 2.5rem;
                .line {
                    width: 0.167rem;
                    height: 0.833rem;
                    background-color: #00f2f1;
                    margin: 0.833rem 0.667rem;
                }
                a {
                    font-size: 0.75rem;
                }
                .active {
                    color: #fff;
                }
            }
            //内容
            .content {
                padding: 0 1.333rem;

                .item {
                    display: flex;

                    .left_item {
                        strong {
                            font-size: 1rem;
                            color: #fff;
                        }

                        p {
                            font-size: 0.667rem;
                        }

                        width: 10rem;
                    }

                    .right_item {
                        strong {
                            font-size: 1rem;
                            color: #fff;
                        }
                        p {
                             font-size: 0.667rem;
                        }
                    }

                    .colo1 {
                        color: #ed3f35;
                    }
                    .colo2 {
                        color: #eacf19;
                    }
                }
            }
        }

  • 第一个盒子JS代码

    //订单量
(function () { 

    $('.r_topBox .title a').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        var className = $(this).attr('data-msg');
        $('.' + className).show().siblings().hide();
    });
})();

  • 第二个盒子HTML结构

     <!-- 右侧区域-销售统计 -->
            <div class="r_midBox1">
                
                <div class="title">
                    <a href="javascript:;">销售额统计</a>
                    <div class="line"></div>
                    <a href="javascript:;" class="time active" data-msg="year">年</a>
                    <a href="javascript:;" class="time" data-msg="ji">季</a>
                    <a href="javascript:;" class="time" data-msg="month">月</a>
                    <a href="javascript:;" class="time" data-msg="week">周</a>
                </div>

                <div class="content">
                    <div class="linebox"></div>
                </div>
            </div>

  • 第二个盒子CSS代码

    //右侧区域-销售统计
         .r_midBox1 {
            width: 100%;
            height: 10.125rem;
            .borderImg();
            margin: 0.833rem 0;

            //标题
            .title {
                padding: 0 1.333rem;
                height: 2.5rem;
                line-height: 2.5rem;
                display: flex;
                font-size: 0.833rem;
                align-items: center;
                .line {
                    width: 0.125rem;
                    height: 0.833rem;
                    background-color: #00f2f1;
                    margin: 0 1.042rem;
                }

                .time {
                    padding: 0.167rem;
                    margin-right: 0.625rem;
                    height: 1rem;
                    height: 1rem;
                    line-height: 1rem;
                    border-radius: 0.125rem;
                }
                .active {
                    background-color: #4c9bfd;
                    color: #fff;
                }
            }

            //内容区域
            .content {
                .linebox {
                    width: 100%;
                    height: 7.625rem;
                }
            }
        }

  • 第二个盒子JS代码

    (function () {

    var option = {
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                show: false
            },
             //隐藏刻度
             axisTick: {
                 show: false
            },
             //设置刻度文字颜色
             axisLabel: {
                 color: '#438be6'
             }
        },
        yAxis: {
            //设置名称
            name: '单位万',
            //设置名称位置
            nameTextStyle: {
                verticalAlign: 'middle',
                color: '#4996f5'
            },
            type: 'value',
            //隐藏y轴线
            axisLine: {
                show: false
            },
            //设置分割线颜色
            splitLine: {
                lineStyle: {
                    color: '#012b48'
                }
            },
            //隐藏刻度
            axisTick: {
                show: false
            },
            //设置刻度文字
            axisLabel: {
                color: '#438be6'
            }
        },
        series: [{
            name: '预期销售额',
            data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            type: 'line',
            smooth: true
        }, {
            name: '实际销售额',
            data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
            type: 'line',
            smooth: true
            }
        ],
        color: ['#00f2f1', '#e73f36'],
        //显示网格
        grid: {
            show: true,
            left: '6%',
            top: '25%',
            right: '5%',
            bottom: '0%',
            //文字移除显示
            containLabel: true,
            //设置边框颜色
            borderColor: '#012b48'
        },
        legend: {
            data: ['预期销售额', '实际销售额'],
            right: '5%',
            top: '5%',
            //图例文字颜色
            textStyle: {
                color: '#458de8'
            }
        }
    };
    var mychart = echarts.init(document.querySelector('.right_view_total .linebar'));
    mychart.setOption(option);

    var data = {
        // 年
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],

        // 季度
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        // 月份
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        //周
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    };
    //设置点击事件
    $('.right_view_total .title a').click(function () { 
        $(this).addClass('active').siblings().removeClass('active');
        //获取对应的数据
        var mydata = $(this).attr('data-item');
        // 动态从数据中获取对应的值
        var ary = data[mydata];

        // 将数据动态设置给option中
        option.series[0].data = ary[0];
        option.series[1].data = ary[1];
        //重新加载数据
        mychart.setOption(option);
    });
})();

  • 第三个盒子HTML结构

     <div class="r_midBox2">
                <div class="public r_leftBox">
                    <div class="title">渠道分布</div>
                    <div class="content">
                        <div class="item">
                            <p>
                                <strong>39%</strong>
                                <a href="javascript:;">
                                    <span class="icon-plane"></span>
                                    机场
                                </a>
                            </p>
                            <p>
                                <strong>28%</strong>
                                <a href="javascript:;">
                                    <span class="icon-bag"></span>
                                    商场
                                </a>
                            </p>
                        </div>
                        <div class="item">
                            <p>
                                <strong>20%</strong>
                                <a href="javascript:;">
                                    <span class="icon-train"></span>
                                    地铁
                                </a>
                            </p>
                            <p>
                                <strong>13%</strong>
                                <a href="javascript:;">
                                    <span class="icon-bus"></span>
                                    火车站
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="public r_rightBox">
                    <div class="title">一季度销售进度</div>
                    <div class="content">

                        <!-- 饼状图 -->
                        <div class="pieBox"></div>

                        <h4>75%</h4>

                        <div class="items">
                            <p>
                                <strong>1,321</strong>
                                <span class="icon-dot"></span>
                                销售额万元
                            </p>
                            <p>
                                <strong>150%</strong>
                                <span class="icon-dot"></span>
                                同比增长
                            </p>
                        </div>
                    </div>
                </div>
            </div>

  • 第三个盒子CSS样式

      .r_midBox2 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: 0.833rem 0;

            //盒子公共样式
            .public {
                width: 11.083rem;
                height: 9.5rem;
                .borderImg();
                margin-right: 0.833rem;
                &:last-child {
                    margin-right: 0;
                }

                .title {
                    padding: 0 1.333rem;
                    height: 2.5rem;
                    line-height: 2.5rem;
                    font-size: 0.833rem;
                    color: #fff;
                }

                .content {
                    padding: 0 1.333rem;
                    .item {
                        display: flex;
                        margin-bottom: 1.042rem;
                        p:nth-child(1) {
                            width: 5rem;
                        }
                        strong {
                            font-size: 1.042rem;
                            display: block;
                            color: #fff;
                        }
                        a {
                            display: block;
                            font-size: 0.583rem;
                        }
                    }
                }
            }


            .r_rightBox {
                
                //饼状图
                .pieBox {
                    height: 3.333rem;
                }
                .content {
                    position: relative;
                }
                h4 {
                    position: absolute;
                    left: 50%;
                    top: 1.458rem;
                    transform: translateX(-50%);
                    color: #fff;
                }
                .items {
                    margin-top: 0.417rem;
                    display: flex;
                    justify-content: space-between;
                    p {
                        strong {
                            font-size: 0.833rem;
                            display: block;
                            color: #fff;
                        }
                        font-size: 0.5rem;
                    }
                }
            }
        }

  • 第三个盒子JS代码

    (function () { 
    
    var option = {
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['130%', '150%'],
            center: ['48%', '85%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            labelLine: {
                show: false
            },
           data: [{
                   value: 100,
                   name: '直接访问',
                   itemStyle: {
                       color: '#12274d'
                   }
               },{
                   value: 200,
                   name: '邮件营销',
                   itemStyle: {
                       color: 'transparent'
                   }
               },{
                   value: 100,
                   name: '联盟广告',
                   itemStyle: {
                       color: '#00c2de'
                   }
               }
           ],
            //设置鼠标悬停不放大
            hoverOffset: 0
        }]
    };
    var mychart = echarts.init(document.querySelector('.right_view_progress .rightBox .pie'));
    mychart.setOption(option);
})();

  • 第四个盒子HTML结构

     <!-- 右侧区域-全国热榜 -->
           <div class="r_botBox">

                <div class="title">
                    <span>全国热榜</span>
                    <span>各省热销</span>
                    <span>//近30日//</span>
                </div>

                <div class="content">
                    <ul class="list1_box">
                        <li><span class="cup icon-cup1"></span>可爱多</li>
                        <li><span class="cup icon-cup2"></span>可爱多</li>
                        <li><span class="cup icon-cup3"></span>可爱多</li>
                    </ul>
                    <ul class="list2_box">
                        <li><span>北京</span><span>25179</span><span class="icon-up"></span></li>
                        <li><span>河北</span><span>15179</span><span class="icon-down"></span></li>
                        <li><span>上海</span><span>14179</span><span class="icon-up"></span></li>
                        <li><span>南京</span><span>12179</span><span class="icon-down"></span></li>
                        <li><span>广东</span><span>10179</span><span class="icon-up"></span></li>
                    </ul>

                    <ul class="list3_box">
                        <li><span>八喜</span><span>6080</span><span class="icon-up"></span></li>
                        <li><span>可乐</span><span>6080</span><span class="icon-down"></span></li>
                        <li><span>雪碧</span><span>6080</span><span class="icon-up"></span></li>
                        <li><span>喜之郎</span><span>6080</span><span class="icon-down"></span></li>
                        <li><span>娃哈哈</span><span>6080</span><span class="icon-up"></span></li>
                        <li><span>娃哈哈</span><span>6080</span><span class="icon-up"></span></li>
                    </ul>
                </div>
            </div>

  • 第四个盒子CSS代码

     //右侧区域-热榜
        .r_botBox {
            width: 100%;
            height: 11.583rem;
            .borderImg();


            .title {
                padding: 0 1.333rem;
                height: 2.5rem;
                line-height: 2.5rem;
                font-size: 0.833rem;
                display: flex;
                span:nth-child(1) {
                    width: 7rem;
                    color: #fff;
                }
                span:nth-child(2) {
                    width: 9.583rem;
                     color: #fff;
                }
                span:nth-child(3) {
                    font-size: 0.583rem;
                }
            }

            .content {
                padding: 0 1.333rem;
                display: flex;
                .list1_box {
                    margin-top: 0.667rem;
                    font-size: 0.667rem;
                    width: 6.875rem;
                    li {
                        margin-bottom: 1.25rem;
                    }
                    .cup {
                        font-size: 1.458rem;
                        vertical-align: middle;
                        margin-right: 0.417rem;
                    }

                    .icon-cup1 {
                        color: #ed3f35;
                    }

                    .icon-cup2 {
                        color: #68d8fe;
                    }

                    .icon-cup3 {
                        color: #4c9bfd
                    }

                    
                }

                .list2_box {
                    font-size: 0.583rem;
                    li {
                        height: 1.667rem;
                        line-height: 1.667rem;
                        display: flex;
                        padding: 0 0.417rem;
                        span:nth-child(1) {
                            width: 3.125rem;
                        }
                        span:nth-child(2) {
                            width: 1.875rem;
                        }

                        span:nth-child(3) {
                            line-height: 1.667rem;
                            margin-left: 0.208rem;
                        }
                    }

                    li:hover {
                        background-color: rgba(255,255,255,.3);
                        cursor: pointer;
                    }
                }

                .list3_box {
                    width: 6.667rem;
                    background-color: rgba(255,255,255,.3);
                    font-size: 0.5rem;
                    padding: 0 0.417rem;
                    box-sizing: border-box;
                    li {
                        height: 1.458rem;
                        line-height: 1.458rem;

                        display: flex;
                        span:nth-child(1) {
                            width: 3.333rem;
                        }
                        span:nth-child(2) {
                            width: 1.5rem;
                        }

                        span:nth-child(3) {
                            line-height: 1.458rem;
                            margin-left: 0.208rem;
                        }
                    }
                }
            }

        }

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​