jQuery插件
jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jquery有着丰富的插件，使用这些插件能给jquery提供一些额外的功能。
1、jquery.color.js的使用
(1)、引入js文件
jquery中的animate动画本身不支持变色，但是jquery.color.js弥补了这一缺陷。
.color.js依赖于jQuery.所以需要先引用jqueryjs：
<scriptsrc="jquery.min.js"></script>
<scriptsrc="jquery.color.js"></script>解决了jQuery .Animate中不能改变背景色的问题
2、jquery.lazyload.js的使用
(1)、引入js文件
懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。它可以延迟加载长页面中的图片在浏览器可视区域外，图片不会被载入，直到用户将页面滚动到它们所在的位置。
<scriptsrc="jquery.min.js"></script>
<scriptsrc="jquery.lazyload.js"></script>
$("img").lazyload();
3、jquery.ui.js的使用
(1)、jQueryUI是什么？
jQueryUI是建立在jQueryJavaScript库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的Web应用程序还是仅仅向窗体控件添加一个日期选择器，jQueryUI都是一个完美的选择。jQueryUI包含了许多维持状态的小部件（Widget），因此，它与典型的jQuery插件使用模式略有不同。所有的jQueryUI小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。
(2)、引入
<linkrel="stylesheet"href="jquery-ui-1.12.1/jquery-ui.css"/>
<scriptsrc="js/jquery-1.11.1.min.js"></script>
<scriptsrc="jquery-ui-1.12.1/jquery-ui.min.js"></script>
(3)、操作日期选择器
一旦您引用了这些必要的文件，您就能向您的页面添加一些jQuery小部件。比如，要制作一个日期选择器（datepicker）小部件，您需要向页面添加一个文本输入框，然后再调用.datepicker()，如下所示：
<inputtype="text"name="date"id="date"/>
$("#date").datepicker();
(4)、拖动
允许鼠标拖动元素，在任意的DOM元素上启用draggable功能。通过鼠标点击并在视区中拖动来移动draggable对象。
$(function(){
$("#draggable").draggable();
});
4、jquery.ui.js的使用
(1)、ECharts是什么？
ECharts是一个使用JavaScript实现的开源可视化库，涵盖各行业图表，满足各种需求。
(2)、ECharts特性
1、丰富的可视化类型:提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图，仪表盘，并且支持图与图之间的混搭。
2、多种数据格式无需转换直接使用:内置的dataset属性（4.0+）支持直接传入包括二维表，key-value等多种格式的数据源，此外还支持输入TypedArray格式的数据。
3、据的前端展现
4、移动端优化
5、多渲染方案，跨平台使用
6、动态数据:数据的改变驱动图表展现的改变。
7、绚丽的特效:针对线数据，点数据等地理数据的可视化提供了吸引眼球的特效。
(3)、ECharts安装
1、官网下载然后引入
完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。
常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。
精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。
2、使用CND方法
StaticfileCDN（国内）:https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js （引入）
(4)、配置语法
第一步：创建HTML页面
创建一个HTML页面，引入echarts.min.js：
<!DOCTYPEhtml><html><head>
<metacharset="utf-8">
<!--引入ECharts文件-->
<scriptsrc="echarts.min.js"></script></head></html>
第二步:为ECharts准备一个具备高宽的DOM容器
实例中id为main的div用于包含ECharts绘制的图表:
<body>
<!--为ECharts准备一个具备大小（宽高）的DOM-->
<divid="main"style="width:600px;height:400px;"></div></body>
第三步:设置配置信息
ECharts库使用json格式来配置。
echarts.init(document.getElementById('main')).setOption(option);
这里option表示使用json数据格式的配置来绘制图表。步骤如下：
1、标题
为图表配置标题：
title:{
text:'第一个ECharts实例'}
2、提示信息
配置提示信息：
tooltip:{},
3、图例组件
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend:{
data:[{
name:'系列1',
//强制设置图形为圆。
icon:'circle',
//设置文本为红色
textStyle:{
color:'red'
}
}]
}
4、X轴
配置要在X轴显示的项:
xAxis:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"
]}
5、Y轴
配置要在Y轴显示的项。
yAxis:{}
6、系列列表
每个系列通过type决定自己的图表类型:
series:[{
name:'销量',//系列名称
type:'bar',//系列图表类型
data:[5,20,36,10,10,20]//系列中的数据内容
}]
每个系列通过type决定自己的图表类型：
记：
type:'bar'：柱状/条形图
type:'line'：折线/面积图
type:'pie'：饼图
type:'scatter'：散点（气泡）图
type:'effectScatter'：带有涟漪特效动画的散点（气泡）
type:'radar'：雷达图
type:'tree'：树型图
type:'treemap'：树型图
type:'sunburst'：旭日图
type:'boxplot'：箱形图
type:'candlestick'：K线图
type:'heatmap'：热力图
type:'map'：地图
type:'parallel'：平行坐标系的系列
type:'lines'：线图
type:'graph'：关系图
type:'sankey'：桑基图
type:'funnel'：漏斗图
type:'gauge'：仪表盘
type:'pictorialBar'：象形柱图
type:'themeRiver'：主题河流
type:'custom'：自定义系列
浙公网安备 33010602011771号