JavaScript（三）js插件

文章目录

一、日期组件（laydate）
二、Echarts图表统计（柱形统计图）
三、Echarts图表统计（扇形统计图）
四、Echarts图表统计（折线统计图）

一、日期组件（laydate）

工作中，常用到的日历插件有laydate，因为它属性多，设置方便，还有回调函数可以自定义逻辑处理

（一）导入相关的css和js插件

<head><link rel="stylesheet" type="text/css" href="../js/need/laydate.css" /><link rel="stylesheet" type="text/css" href="../js/skins/default/laydate.css"/><link rel="stylesheet" type="text/css" href="../js/skin/layer.css"/><script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="../js/layer.js" type="text/javascript" charset="utf-8"></script><script src="../js/laydate.js" type="text/javascript" charset="utf-8"></script>
</head>

（二）单日期使用

 <body><input id="start" placeholder="选择日期" /><script type="text/javascript">var start={//定义开始日期相关配置elem:'#start',format:'YYYY-MM-DD',//定义时间格式min:laydate.now(),//设置最小日期为当前日期max:'2019-06-26 23:59:59',//最大日期istime:false,//控制组件是否显示小时、分钟、秒，true表示显示istoday:true,//是否默认是当前的日期}laydate(start);</script></body>

（三）日期组合使用

 <body><input id="start" placeholder="入住日期" /><input id="end" placeholder="离店日期" /><script type="text/javascript">var start={//定义开始入住日期相关配置elem:'#start',format:'YYYY-MM-DD',//定义时间格式min:laydate.now(),//设置最小日期为当前日期max:'2019-06-26 23:59:59',//最大日期istime:false,//控制组件是否显示小时、分钟、秒，true表示显示istoday:true,//是否默认是当前的日期choose:function(datas){end.min=datas;//开始入住日期选好后，重置结束日的最小日期end.start=datas//将结束日期的默认值设置为入住日期}}var end={elem:'#end',format:'YYYY-MM-DD',//定义时间格式min:laydate.now(),//设置最小日期为当前日期max:'2019-06-26 23:59:59',//最大日期istime:false,//控制组件是否显示小时、分钟、秒，true表示显示istoday:true,//是否默认是当前的日期choose:function(datas){start.max=datas;//结束日选好后，重置开始日的最大日期}}laydate(start);laydate(end);</script></body>

二、Echarts图表统计（柱形统计图）

（一）特点
1.echarts.js是国内的IT三巨头之一的百度推出的开源项目
2.Echarts是纯JavaScript的图标库，可以流畅运行自爱PC和移动设备上，兼容绝大部分浏览器
3.底层依赖轻量级的Canvas类库ZRender
4.支持折线图、柱状图、扇形图、雷达图等12种图形

（二）导入echarts.js

<script src="../js/echarts.js" type="text/javascript" charset="utf-8"></script>

（三）条形（柱形）统计图

 <head><style type="text/css">#bar{height:400px;width: 600px;margin: 0 auto;}</style></head><body><div id="bar"></div><script type="text/javascript">var myBarChart=echarts.init(document.getElementById("bar"));myBarChart.showLoading();//加载数据的时候出现动画操作var buildNames=["A栋","B栋","C栋"];var buildRoomCounts=[10,8,15];var renteds=[4,3,6];var solds=[2,3,4];// 开始设置图标统计的相关参数var option={title:{//定义y轴上方的名称text:'数量/间'},tooltip:{//定义悬浮提示信息,此时是默认的},legend:{//设置图例data:['房间总数','已出售','已出租'],//top:100,//left:500},xAxis:{//定义x轴内容//type如果是category,则以类别的形式进行统计;还可以是time,但是该类型一般是在折线统计图中使用(股票等)type:'category',data:buildNames},yAxis:{//定义y轴内容max:20,min:0},//series:系列,统计条//一个series中的每个对象,表示一个类别中的条形的信息series:[{//统计房间总数type:'bar',name:'房间总数',data:buildRoomCounts},{//统计房间的出售数量type:'bar',name:'已出售',data:solds},{//统计房间的出租数量type:'bar',name:'已出租',data:renteds}]};myBarChart.setOption(option);myBarChart.hideLoading();</script></body>

三、Echarts图表统计（扇形统计图）

 <head><script src="../js/echarts.js"></script><style>#pie1{width: 600px;height: 400px;margin: 30px auto;border: 1px solid red ;}</style></head><body><!-- 必须要有个div并且设置样式来显示生成的echarts图表 --><div id='pie1'></div><script type="text/javascript">//初始化echarts图表var pieChart1=echarts.init(document.getElementById("pie1"));var option={//为统计图进行基本的设置title:{//设置标题show:"true",//显示标题,默认显示,可以不设置text:"已出租比例分析",//图标标题文本内容top:"60px",left:"center"//标题的水平方向位置},tooltip:{//设置悬浮提示框//item:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用//axis:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用trigger:'item',formatter:"{a}<br/>{b}:{c}{{d}%}"},series:[{//设置系列name:'已出租比例分析',type:'pie',//统计类型按照扇形比例统计radius:'55%',center:['50%','60%'],data:[{name:"A栋",value:3},{name:"B栋",value:4},{name:"C栋",value:6},{name:"D栋",value:8}]}]};//为echarts对象加载数据pieChart1.setOption(option);</script></body>

四、Echarts图表统计（折线统计图）

 <head><script src="../js/echarts.js"></script><style>#line{width: 600px;height: 400px;margin: 30px auto;border:1px solid red;}</style></head><body><div id="line"></div><script type="text/javascript">var myLine=echarts.init(document.getElementById("line"));var option={// 主要设置的内容是：title:{},tooltip:{},legend:{},toolbox:{},xAxis:[],yAxis:{},series:[]//legend ,toolbox,axisLabel可以没有title:{//设置标题text:'未来一周气温变化',subtext:'摄氏度/℃'},tooltip:{//设置悬浮提示框trigger:'axis'},
//              ,legend:{//设置图例
//              //orient设置布局方式,默认水平布局,有horizontal(水平),vertical(垂直)
//              //orient:'horizontal',
//                  x:'250',
//                  y:'10'
//              }
//              ,toolbox:{//工具框
//                  show:true,
//                  feature:{//工具框的配置
//                      dataView:{show:true,readOnly:false},//数据视图
//                      magicType:{show:true,type:['line','bar']},//其他形状转换
//                      restore:{show:true},//是否显示刷新
//                      saveAsImage:{show:true}//下载
//                  }
//
//              },xAxis:[//x轴{type:'category',boundaryGap:false,//控制折线是否从y轴开始出现data:['周一','周二','周三','周四','周五','周六','周日'],axisLine:{//控制x轴的样式lineStyle:{color:'#912CEE'//设置x轴文字颜色？}}
//                  ,axisLabel:{//设置x轴数据旋转倾斜
//                      rotate:45,//旋转角度
//                      interval:0//设置x轴数据间隔几个显示一个,为0表示都显示
//                  }}],yAxis:{//y轴type:'value',//表示显示的类型是具体数值min:-10,//y轴设置刻度的最小值max:70,//y轴设置刻度的最大值splitNumber:10,//???axisLabel:{formatter:'{value} ℃'}},series:[,//系列,设置折线的相关配置{//最高气温name:'最高气温',type:'line',data:[11,11,15,13,12,13,10],//markPoint和markLine都可以没有markPoint:{//是否重点显示最高和最低data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]},markLine:{//是否显示平均线data:[{type:'average',name:'平均值'}]}},{//最低气温name:'最低气温',type:'line',data:[1,-2,2,5,3,2,0],//markPoint和markLine都可以没有markPoint:{//是否重点显示最高和最低data:[{type:'min',name:'最小值'}// {name:'周最低',value:-2,xAxis:1,yAxis:-1.5}//这种写法是自己写最低值,不能动态变动,不建议使用]},markLine:{//是否显示平均线data:[{type:'average',name:'平均值'}]}}]};myLine.setOption(option);</script></body>

JavaScript（三）js插件相关推荐

Bootstrap入门（三十）JS插件7：警告框
Bootstrap入门(三十)JS插件7:警告框通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...
推荐 7 个 Vue.js 插件，也许你的项目用的上（三）
使用这7个库 Vue.js 库,加快你的项目开发! 当我们可以通过使用库轻松实现相同的结果时,为什么还要编写自定义功能?开发人员最好的朋友和救星就是这些第三方库.我相信一个好的项目会利用一些可用的最佳 ...
（原创）一个JavaScript Function Outliner插件第三个版本让你的JavaScript代码也支持折叠...
今天我为大家带来JavaScript Function Outliner插件的第三个版本,在这个版本里我们也可以对JavaScript的代码进行折叠了不过目前支持折叠的就function 发布前两个 ...
流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流
文章目录瀑布流的定义一.实现效果代码首先是用javascript自己手写代码实现照片瀑布流使用插件Mary.js照片流插件实现照片瀑布流总结瀑布流的定义瀑布流是什么? 1.琳琅满目:整 ...
js实现将页面中的数据表格导出为图片，js实现导出excl表格（内含三个插件）
开发需求:拿到同事代码,同事用 layui 写了一个数据表格,但是表格里的内容是带样式的 button .现在需要将这个表格导出,这着实让我头疼了许久. 找到的插件可以使用:canvas,试过js- ...
js插件---webuploader 使用（lavarel中使用）
js插件---webuploader 使用(lavarel中使用) 一.总结一句话总结: 多去看几个具体使用的实例,很多blog教程都有坑,多看几个交叉印证可以没那么多坑 1.webuploader ...
photoswipe.js插件
PhotoSwipe.js官网:http://photoswipe.com/,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一 ...
Video.js插件切换视频源并操作m3u8格式视频
目录第一章 videojs的配置与简介第二章更改视频源代码与实例第三章 api的部分应用实例第四章视频api补充介绍添加事件事件绑定前言:老师让我修改一个需要播放器的界面,之前的播放 ...
uni-app 项目引入第三方js插件，单个js文件引入成功，调用该插件方法
通过"vue项目引入第三方js插件,单个js文件引入成功,使用该插件方法时报错(问题已解决)"成功移到UNI-APP上方法一: 引用网址:https://www.cnblogs. ...