Layui的轮播事件和echarts插件事件

开发工具与关键技术：VS layui和 echarts
作者：沈金凤
年级：18级（4）班
撰写日期：2019年5月03日

一、在layui中主要适用于跑马灯/轮播等交互场景，layui它并非单纯地为焦点图而生，类型内容的轮播试切换操作，更可以胜任FullPage(全屏上下轮播)的需求，简洁而不是强劲，灵活而优雅，模块加载名称：carousel，用layui来实现轮播效果当然要用到layui的插件啦！首先是layui的css的插件下图的第一行就是，layui的js的插件是倒数第十二行就是。如下是几个常见的轮播事例：

在HTML结构中，只需要简单地注意两项:
1、 外层元素的class = “layui-carousel” 用来标识为一个轮播容器（来装轮播里面所需要的代码，如上图所示）
2、内层元素的属性 carousel-item用开标识条目（在标识条目中加上你所需要轮播样式：如文字列表啊，图片等任意内容，而我就是在标识条目中添加了几张图片来让它更加体现到轮播的效果），而Id则用于carousel模块建造实例的元素指向
上面是通过layui轮播的核心方法来完成的：carousel.render(options)来对轮播设置基本参数，也可以通过：carousel.set(options)来设置全局基础参数。上图所用过的参数有：
Elem: 是指容器选择器，也可以是DOM对象，width：是设置轮播的宽度（支持像素和百分比），anim:是轮播的切换方式，可选值有（.default: 左右切换，.updown：上下切换，.fade:渐隐渐显切换），还有arrow:是指切换箭头默认显示的状态，可选值有（.hover: 悬停显示，.always:始终显示，.none:始终都不显示）。下面就是轮播的效果图：

=》

上图就我所做出来的效果图第一张是轮播的第一张图片接着是第二张以此类推，由上图我们可以看到有两个箭头的按钮用来实现轮播图片的切换，还有几个圆点是轮播中的高亮按钮也可以用来切换轮播图片，有着高亮的效果每当你点击下一张图片时它也跟着切换到下一个圆点同时会出现它的高亮效果，每个圆点都有对应着不同的轮播图片。

二、ECharts:是个单纯的Javascript 的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表，在ECharts 3 中我们能更是加入来了解更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
ECharts 3 开始独立出了“坐标系”的概念，支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo）。图表可以跨坐标系存在，例如折、柱、散点等图可以放在直角坐标系上，也可以放在极坐标系上，甚至可以放在地理坐标系中。
下面是一个折线图在极坐标系上的例子：首先是要定一个变量，接着用for循环来变量所需要的大小和数量，然后就是绘制图表了，用option(是提示框的组件)中包含着：title（标题组件）、legend（图例组件）、polar（极坐标系，可以用于散点图和折线图，每个极坐标系拥有一个角度轴和一个半径轴）、tooltip(提示框组件)、angleAxis和radiusAxis都是（极坐标系的角度轴）、series（系列列表。每个系列通过 type 决定自己的图表类型）、animationDuration（初始动画的时长）。如下图所示：

其中title中又包含着text（标题内容），legend中又包含着data（图例的数据数组），polar中又包含着center（中心（圆心tooltip）坐标，数组的第一项是横坐标，第二项是纵坐标）tooltip中有包含着trigger（数据项图形触发）和axisPointer（坐标轴指示器配置项）中又包含着type（指示器类型），angleAxis中有包含着type（坐标轴类型）和startAngle（其实刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方），radiusAxis中有包含着min（坐标轴刻度最小值，在类目轴中无效），series中又包含着coordinateSystem（使用极坐标系，通过 polarIndex 指定相应的极坐标组件）、name（系列名称，用于tooltip的显示，legend 的图例筛选）、type（折线图）、showSymbol（false：标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）、data，还有最后一个animationDuration（初始化动画的时长）。如下图所示：

接着是效果图如下：

当你的鼠标移进出的时候会显示出如下图的效果：每当你移动一下它都会有不同的变化