jQuery插件
jquery功能比较有限,想要更复杂的特效效果,可以借助于jQuery插件完成。
注意
这些插件也是依赖于jQuery来完成,所以必须先引入jQuery文件,因此也称为jQuery插件
jQuery插件常用的网站:
1、jQuery插件库:http://www.jq22.com/
2、jQuery之家 http://www.htmleaf.com/
jQuery插件使用步骤
1、引入相关文件
2、复制相关html、css、js(常用插件)
echarts使用步骤
1、echarts地址
https://echarts.apache.org/
2、获取echarts
从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
在 ECharts 的 GitHub 获取。
通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”
通过 jsDelivr 等 CDN 引入
3、引入echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
引入一个简单的图标
现需要为echarts提供一个具备宽高的容器
<div id="main" style="width: 600px;height:400px;"></div>
var mycharts= echarts.init(document.getElementById("box"));
//配置
var option={
title:{
text:"Echarts条形图"
},
legend: {
data:[{
name:'销量',
icon: 'circle',
textStyle: {
color: 'red'
}
}],
show:true
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
//图标设置
mycharts.setOption(option);