Echarts.js简介

JavaScript04

Echarts.js简介,第1张

在平时开发项目时,免不了需要对数据进行图表显示的需求,比如:趋势图、饼状图、柱形图等。

Echarts.js是来自百度团队研发的图表js插件,利用HTML+js实现折线图、饼状图、热点图、3d图形等等,可在PC和移动端显示,加载速度快,功能丰富。

https://echarts.apache.org/zh/index.html

官网首页有着很多实例以及相关介绍,获取echart.js可以从本人百度网盘获取,包含所有图表组件,可直接引用。

链接: https://pan.baidu.com/s/1IEm8NGwqq4ExgYWp8mz9CA

提取码:aihy

为Echarts放置一个具备宽高的DOM容器

Echarts加载数据

Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸,用原生js开发的,轻量级,包含html跟css,不到8kb。点此链接体验: https://teojs.github.io/clipic/

https://github.com/teojs/clipic

参数说明

width:Number (默认:500) – 裁剪宽度

height:Number (默认:500) – 裁剪高度

ratio:Number (可选) – 裁剪的比例,当传入ratio时width/height将无效

src:String (必传) – 需要裁剪的图片,可以是图片链接,或者 base64

type:String (默认:jpeg) – 裁剪后图片的类型,仅支持 jpeg/png 两种

quality:Number (默认:0.9) – 压缩质量

buttonText:Array (默认:[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本

http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0

本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法。分享给大家供大家参考,具体如下:

推荐一个图片旋转插件,用于浏览相册时,旋转图片。

运行效果截图如下:

点击此处查看在线演示效果。

具体代码如下:

<script

type="text/javascript">

$(document).ready(function

()

{

$("#images").rotate(45)

var

value

=

0

$("#images1").rotate({

bind:

{

mouseover:

function(){

value

+=90

$(this).rotate({

animateTo:value})

}

}

})

$('#button').click(function(){

$("#images1").rotate({animateTo:parseInt($('#angel').val())})

})

function

rotation

(){

$("#images2").rotate({

angle:0,

animateTo:360,

callback:

rotation,

easing:

function

(x,t,b,c,d){

return

c*(t/d)+b

}

})

}

rotation()

})

</script>

上面只是js代码,完整实例代码点击此处本站下载。

更多关于jQuery插件相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。