howler音频插件
配置项及事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/howler.min.js"></script>
</head>
<body>
<script>
//实例化音频
var sound = new Howl({
// 初始化配置
// 资源路径，及多媒介资源
src:"./qb.mp3",
// src : ["./qb.mp3", "./qb.wav", "./qb.ogg"],//让浏览自动识别可以播放的音频文件
// 自动播放: true表示自动播放，false表示不自动播放
autoplay:true,
// 循环播放: true表示循环，false表示不循环
loop:false,
// 音量，在0-1之间，默认为1
volume:1,
// 事件
onload:function(){
console.log("音频就绪");
},
onplay:function(){
console.log("开始播放");
},
onend:function(){
console.log("结束播放");
},
onpause:function(){
console.log("暂停播放");
},
onstop:function(){
console.log("停止播放");
}
});
</script>
</body>
</html>
播放、暂停、停止、状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/howler.min.js"></script>
</head>
<body>
<button id="btn1">播放</button>
<button id="btn2">暂停</button>
<button id="btn3">停止</button>
<button id="btn4">播放状态</button>
<script>
//实例化音频
var sound = new Howl({
// 资源路径
src:"./qb.mp3",
// 事件
onload:function(){
console.log("音频就绪");
},
onplay:function(){
console.log("开始播放");
},
onend:function(){
console.log("结束播放");
},
onpause:function(){
console.log("暂停播放");
},
onstop:function(){
console.log("停止播放");
}
});
// 播放音乐
document.getElementById("btn1").onclick = function(){
sound.play();
};
// 暂停音乐
document.getElementById("btn2").onclick = function(){
sound.pause();
};
// 停止音乐
document.getElementById("btn3").onclick = function(){
sound.stop();
};
// 获取播放状态
document.getElementById("btn4").onclick = function(){
var playing = sound.playing();
// false:停止或暂停、true：播放
console.log(playing);
};
</script>
</body>
</html>
获取和设置静音及音量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/howler.min.js"></script>
</head>
<body>
<button id="btn1">播放</button>
<button id="btn2">暂停</button>
<button id="btn3">静音</button>
<button id="btn4">音量</button>
<script>
//实例化音频
var sound = new Howl({
// 资源路径
src:"./qb.mp3",
});
// 播放音乐
document.getElementById("btn1").onclick = function(){
sound.play();
};
// 暂停音乐
document.getElementById("btn2").onclick = function(){
sound.pause();
};
// 获取和设置音频静音
document.getElementById("btn3").onclick = function(){
// 获取是否静音
var mute = sound.mute();
// false:音量正常、true：静音
console.log(mute);
// 设置静音
if(mute == false){
sound.mute(true);
}else{
sound.mute(false);
}
};
// 获取和设置音频音量
document.getElementById("btn4").onclick = function(){
// 获取音量
var vol = sound.volume();
//音量介于0至1之间
console.log(vol);
// 设置音量
sound.volume(0.2);
};
</script>
</body>
</html>
获取和设置循环播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/howler.min.js"></script>
</head>
<body>
<button id="btn1">播放</button>
<button id="btn2">暂停</button>
<button id="btn3">循环</button>
<script>
//实例化音频
var sound = new Howl({
// 资源路径
src:"./qb.mp3",
});
// 播放音乐
document.getElementById("btn1").onclick = function(){
sound.play();
};
// 暂停音乐
document.getElementById("btn2").onclick = function(){
sound.pause();
};
// 获取和设置循环播放
document.getElementById("btn3").onclick = function(){
// 获取是否循环
var loop = sound.loop();
// false:不循环、true：循坏
console.log(loop);
// 设置循环
if(loop == false){
sound.loop(true);
this.innerText = "不循环";
}else{
sound.loop(false);
this.innerText = "循环";
}
};
</script>
</body>
</html>
获取和设置音频时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/howler.min.js"></script>
</head>
<body>
<button id="btn1">播放</button>
<button id="btn2">暂停</button>
<button id="btn3">音频总时间</button>
<button id="btn4">当前播放时间</button>
<script>
//实例化音频
var sound = new Howl({
// 资源路径
src:"./qb.mp3",
});
// 播放音乐
document.getElementById("btn1").onclick = function(){
sound.play();
};
// 暂停音乐
document.getElementById("btn2").onclick = function(){
sound.pause();
};
// 获取音频总时间，单位：秒
document.getElementById("btn3").onclick = function(){
var dur = sound.duration();
console.log(dur);
};
// 获取和设置音频当前播放时间，单位：秒
document.getElementById("btn4").onclick = function(){
var seek = sound.seek();
console.log(seek);
// 设置当前播放时间
sound.seek(10);
console.log(seek);
};
</script>
</body>
</html>
ECharts图表插件
配置项手册
ECharts教程
图表配置项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/echarts.min.js"></script>
<style type="text/css">
#box{
width: 600px; height: 500px;
border: 1px solid #000000;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 给图表准备一个容器 -->
<div id="box"></div>
<script>
// 给容器初始化图表实例
var myChart = echarts.init(document.getElementById("box"));
// 指定图表配置项和数据
var option = {
// 定义图表标题
title:{
text:"七月第一周汽车销售数据"
},
// 定义x轴
xAxis:{
// 在x轴上与图表数据对应的名称
data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
// 定义y轴
yAxis:{},
//显示图例说明，把图表数据对应的name值显示出来
legend:{},
// 显示数据信息，鼠标移动到某节点时，显示详细数据信息
tooltip:{},
// 系列列表，通过type决定图表类型
series:[{
// 定义图表名称
name:"汽车销量",
//定义图表类型; bar：柱状图、line: 折线图
type:'line',
// 图表数据
data:[10, 15, 12, 14, 18, 20, 25],
}]
};
// 把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>
图表标题配置项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/echarts.min.js"></script>
<style type="text/css">
#box{
width: 600px; height: 500px;
border: 1px solid #000000;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 给图表准备一个容器 -->
<div id="box"></div>
<script>
// 给容器初始化图表实例
var myChart = echarts.init(document.getElementById("box"));
// 指定图表配置项和数据
var option = {
// 定义图表标题
title:{
text:"七月第一周汽车销售数据", //主标题文字
left:10, //标题位置
top:5,
link:"https://blog.csdn.net/UserPython", //标题跳转地址
target:"self", //打开方式
textStyle:{ //主标题样式
color:"#ff0000",
fontSize:20,
},
subtext:"汽车销售", //副标题
// 副标题一样可以像主标题设计样式，需要在属性前加上sub区分
subtextStyle:{ //副标题样式
color:"#0000ff",
fontSize:14,
}
},
// 定义x轴
xAxis:{
// 在x轴上与图表数据对应的名称
data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
// 定义y轴
yAxis:{},
//显示图例说明，把图表数据对应的name值显示出来
legend:{},
// 显示数据信息，鼠标移动到某节点时，显示详细数据信息
tooltip:{},
// 系列列表，通过type决定图表类型
series:[{
// 定义图表名称
name:"汽车销量",
//定义图表类型; bar：柱状图、line: 折线图
type:'line',
// 图表数据
data:[10, 15, 12, 14, 18, 20, 25],
}]
};
// 把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>
图例配置项及调色盘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/echarts.min.js"></script>
<style type="text/css">
#box{
width: 600px; height: 500px;
border: 1px solid #000000;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 给图表准备一个容器 -->
<div id="box"></div>
<script>
// 给容器初始化图表实例
var myChart = echarts.init(document.getElementById("box"));
// 指定图表配置项和数据
var option = {
// 定义图表标题
title:{
text:"七月第一周汽车销售数据", //主标题文字
},
// 定义x轴
xAxis:{
// 定义x轴名称
name:"日期",
// 在x轴上与图表数据对应的名称
data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
// 定义y轴
yAxis:{
// 定义y轴名称
name:"单位: 辆",
},
//显示图例说明，把图表数据对应的name值显示出来
legend:{
right:20, //位置设置
top:10,
textStyle:{ //设置文本样式
color:"#0000ff",
fontSize:14,
},
},
// 定义图例颜色，调色盘列表
color:"#00ff00",
//color:["#00ff00", "#ff0000", "#0000ff"],
// 显示数据信息，鼠标移动到某节点时，显示详细数据信息
tooltip:{},
// 系列列表，通过type决定图表类型
series:[{
// 定义图表名称
name:"汽车销量",
//定义图表类型; bar：柱状图、line: 折线图
type:'bar',
// 图表数据
data:[10, 15, 12, 14, 18, 20, 25],
}]
};
// 把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>
座标轴样式设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/echarts.min.js"></script>
<style type="text/css">
#box{
width: 600px; height: 500px;
border: 1px solid #000000;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 给图表准备一个容器 -->
<div id="box"></div>
<script>
// 给容器初始化图表实例
var myChart = echarts.init(document.getElementById("box"));
// 指定图表配置项和数据
var option = {
// 定义图表标题
title:{
text:"七月第一周汽车销售数据", //主标题文字
},
// 定义x轴
xAxis:{
// 定义x轴名称
name:"日期",
// 定义座标轴名称样式
nameTextStyle:{
color:"#ff9900",
fontSize:20,
},
// 座标轴线的样式
axisLine:{
lineStyle:{
color:"#0000ff",
width:10,
},
},
// 在x轴上与图表数据对应的名称
// data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
// 座标轴数据名称逐个设置样式
data:[
{
value:'周一',
textStyle:{
color:"#000000",
fontSize:20
}
},
{
value:'周二',
textStyle:{
color:"#ff0000",
fontSize:14
}
},
{
value:'周三',
textStyle:{
color:"#00ff00",
fontSize:19
}
},
]
},
// 定义y轴
yAxis:{
// 定义y轴名称
name:"单位: 辆",
},
//显示图例说明，把图表数据对应的name值显示出来
legend:{},
// 显示数据信息，鼠标移动到某节点时，显示详细数据信息
tooltip:{},
// 系列列表，通过type决定图表类型
series:[{
// 定义图表名称
name:"汽车销量",
//定义图表类型; bar：柱状图、line: 折线图
type:'bar',
// 图表数据
data:[10, 15, 12, 14, 18, 20, 25],
}]
};
// 把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>
图表标线设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/echarts.min.js"></script>
<style type="text/css">
#box{
width: 600px; height: 500px;
border: 1px solid #000000;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 给图表准备一个容器 -->
<div id="box"></div>
<script>
// 给容器初始化图表实例
var myChart = echarts.init(document.getElementById("box"));
// 指定图表配置项和数据
var option = {
// 定义图表标题
title:{
text:"七月第一周汽车销售数据", //主标题文字
},
// 定义x轴
xAxis:{
// 定义x轴名称
name:"日期",
// 在x轴上与图表数据对应的名称
data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
// 定义y轴
yAxis:{
// 定义y轴名称
name:"单位: 辆",
},
//显示图例说明，把图表数据对应的name值显示出来
legend:{},
// 显示数据信息，鼠标移动到某节点时，显示详细数据信息
tooltip:{},
// 系列列表，通过type决定图表类型
series:[{
// 定义图表名称
name:"汽车销量",
//定义图表类型; bar：柱状图、line: 折线图
type:'bar',
// 图表数据
data:[10, 15, 12, 14, 18, 20, 25],
// 图表标线
markLine:{
// min:最小值、max:最大值、average:平均值、median:中位数
data:[{type:"average", name:"平均数"}],
lineStyle:{
color:"#00ff00",
width:5
}
}
}]
};
// 把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>
折线图和柱状图切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/echarts.min.js"></script>
<style type="text/css">
.abc{
width: 600px; height: 500px;
border: 1px solid #000000;
margin: 50px auto;
position: relative;
}
#box{
width: 600px; height: 500px;
}
.bt{
width: 150px; height: 30px;
line-height: 30px;
position: absolute; top: 10px; right: 10px;
}
</style>
</head>
<body>
<div class="abc">
<!-- 给图表准备一个容器 -->
<div id="box"></div>
<div class="bt">
<button id="line">折线图</button>
<button id="bar">柱状图</button>
</div>
</div>
<script>
// 给容器初始化图表实例
var myChart = echarts.init(document.getElementById("box"));
// 指定图表配置项和数据
var option = {
// 定义图表标题
title:{
text:"七月第一周汽车销售", //主标题文字
},
// 定义x轴
xAxis:{
// 定义x轴名称
name:"日期",
// 在x轴上与图表数据对应的名称
data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
// 定义y轴
yAxis:{
// 定义y轴名称
name:"单位: 辆",
},
//显示图例说明，把图表数据对应的name值显示出来
legend:{},
// 显示数据信息，鼠标移动到某节点时，显示详细数据信息
tooltip:{},
// 系列列表，通过type决定图表类型
series:[{
// 定义图表名称
name:"汽车销量",
//定义图表类型; bar：柱状图、line: 折线图
type:'bar',
// 图表数据
data:[10, 15, 12, 14, 18, 20, 25],
}]
};
// 把配置项和数据显示出来
myChart.setOption(option);
// 切换到柱状图
document.getElementById("bar").onclick = function(){
option.series[0].type = "bar";
myChart.setOption(option);
};
// 切换到折线图
document.getElementById("line").onclick = function(){
option.series[0].type = "line";
myChart.setOption(option);
};
</script>
</body>
</html>
多套数据设置方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/echarts.min.js"></script>
<style type="text/css">
#box{
width: 600px; height: 500px;
border: 1px solid #000000;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 给图表准备一个容器 -->
<div id="box"></div>
<script>
// 给容器初始化图表实例
var myChart = echarts.init(document.getElementById("box"));
// 指定图表配置项和数据
var option = {
// 定义图表标题
title:{
text:"苦涩汽车销售", //主标题文字
},
// 定义x轴
xAxis:{
// 定义x轴名称
name:"日期",
// 在x轴上与图表数据对应的名称
data:["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
// 定义y轴
yAxis:{
// 定义y轴名称
name:"单位: 辆",
},
//显示图例说明，把图表数据对应的name值显示出来
legend:{},
// 调色盘列表
color:["#ff0000", "#00ff00", "#0000ff"],
// 显示数据信息，鼠标移动到某节点时，显示详细数据信息
tooltip:{},
// 系列列表，通过type决定图表类型
series:[
{
// 定义图表名称
name:"宝X",
//定义图表类型; bar：柱状图、line: 折线图
type:'bar',
// 图表数据
data:[10, 15, 12, 14, 18, 20, 25],
},{
name:"奔X",
type:'bar',
data:[8, 12, 17, 14, 13, 23, 21],
},{
name:"奥X",
type:'line',
data:[13, 16, 12, 13, 25, 29, 15],
}
]
};
// 把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>
饼状图配置方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/echarts.min.js"></script>
<style type="text/css">
#box{
width: 600px; height: 500px;
border: 1px solid #000000;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 给图表准备一个容器 -->
<div id="box"></div>
<script>
// 给容器初始化图表实例
var myChart = echarts.init(document.getElementById("box"));
// 指定图表配置项和数据
var option = {
// 定义图表标题
title:{
text:"汽车销量", //主标题文字
},
//显示图例说明，把图表数据对应的name值显示出来
legend:{top:20},
// 显示数据信息，鼠标移动到某节点时，显示详细数据信息
tooltip:{},
// 系列列表，通过type决定图表类型
series:[{
// 定义图表名称
name:"宝马",
radius:"70%",//设置饼状图大小
//pie:表示图表类型为饼状图
type:'pie',
// 图表数据
data:
[
{name:"周一", value:'10'},
{name:"周二", value:'15'},
{name:"周三", value:'13'},
{name:"周四", value:'18'},
{name:"周五", value:'23'},
{name:"周六", value:'31'},
{name:"周日", value:'40'},
]
}]
};
// 把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>
雷达图配置方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/echarts.min.js"></script>
<style type="text/css">
#box{
width: 600px; height: 500px;
border: 1px solid #000000;
margin: 50px auto;
}
</style>
</head>
<body>
<!-- 给图表准备一个容器 -->
<div id="box"></div>
<script>
// 给容器初始化图表实例
var myChart = echarts.init(document.getElementById("box"));
// 指定图表配置项和数据
var option = {
// 定义图表标题
title:{
text:"汽车销量", //主标题文字
},
//显示图例说明，把图表数据对应的name值显示出来
legend:{},
// 显示数据信息，鼠标移动到某节点时，显示详细数据信息
tooltip:{},
// 雷达座标系组件，只适用于雷达图
radar:{
// 雷达图每个指示器名称的配置项
name:{
textStyle:{
color:"#ffffff",
backgroundColor:"#999999",
padding:[3, 5],
borderRadius:5
}
},
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
indicator:[
{name:"周一", max:20},
{name:"周二", max:40},
{name:"周三", max:50},
{name:"周四", max:50},
{name:"周五", max:50},
{name:"周六", max:30},
{name:"周日", max:30},
]
},
// 系列列表，通过type决定图表类型
series:[{
//radar:表示图表类型为雷达图
type:'radar',
// 图表数据
data:
[
{
name:"奔X",
value:[15, 38, 48, 42, 38, 18, 22]
},{
name:"宝X",
value:[16, 28, 49, 49, 41, 23, 25]
}
]
}]
};
// 把配置项和数据显示出来
myChart.setOption(option);
</script>
</body>
</html>