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（初始化动画的时长）。如下图所示：

接着是效果图如下：

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

Layui的轮播事件和echarts插件事件相关推荐

Bootstrap 轮播（Carousel）插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
layui框架轮播图实现轮播图片自适应视口缩放
一点JS也不懂,利用layui现成的框架轮播组件,简单的实现了layui框架轮播图自适应视口而缩放效果. 以下是代码: <section><div class="layui ...
echarts世界地图组件轮播、鼠标移入移出事件
[问题]:地图在轮播的时候toolTips的位置显示不正确 [原因]:出现问题的是美国.法国,发现原来在地图上还有很小很小很小的位置,比较难发现 [解决]:翻文档发现,position使用回调函数的形 ...
layui的轮播图片自适应大小_解决Layui 表格自适应高度的问题
解决Layui 表格自适应高度的问题鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css .layu ...
layui(八)——轮播图常见用法总结
carousel 是 layui 2.0 版本中新增的全新模块,主要适用于跑马灯/轮播等交互场景.它可以满足任何类型内容的轮播式切换操作,更可以胜任 FullPage (全屏上下轮播)的需求,简洁而不 ...
移动端touch事件---利用bootstrap实现轮播图手指左右滑动事件
还记的我上篇文章实现了图片响应式滑动,如果不知道怎样实现图片在超宽屏幕居中显示,且也不知道怎样实现图片的响应式效果(专门针对移动端的),可以再继续看看我写的这篇文章.狠狠地点击这里那么针对移动端,如 ...
android ViewPager实现无限轮播和设置监听事件
ViewPager的无限轮播,主要以实现为主.代码如下首先定义activity_viewpager.xml: <LinearLayout android:layout_width=" ...
layui下的图片轮播图效果代码收藏
以下展示在layui table表格列表中展示图片集,并使用layui图片轮播效果. <script> layui.use(['table', 'tree', 'layer','jquer ...

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

Layui的轮播事件和echarts插件事件相关推荐

最新文章

热门文章