echarts基本用法:
一、引入echarts插件
将下载好的echarts放置到自己项目的js文件夹中,在html中引入文件
<script src="./js/jquery-3.1.1.js"></script>
<script src="./js/echarts.min.js"></script>
简单的html如下:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>多系列折线图</title>
</head>
<style type="text/css">
*{
padding: 0;
margin:0 auto;
}
.wrapper{
width: 1100px;
height: auto;
background: white;
}
#container{
width: 960px;
height:500px;
margin-top:5%;
/* background:red; */
}
</style>
<body>
<div class="wrapper">
<div id="container"> </div>
</div>
</body>
<script type = "text/javascript" src="./js/jquery.js"></script>
<script type = "text/javascript" src="./js/echarts.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
}
</script>
</html>
二、实例化echarts对象
$(document).ready(function(){
//实例化echarts对象
var myEcharts = echarts.init(document.getElementById("container"));
//自定义图表配置选项
var option = {
};
//echarts对象绑定配置选项
myEcharts.setOption(option);
});
三、设置图表配置选项option
1、绘制网格
grid用法可以参考博客:https://blog.csdn.net/qq_30264689/article/details/80911974
var option = {
//绘制网格
grid:{
x:'15%',
y:'15%'
}
};
2、绘制x、y轴(写在option对象中,下列步骤同此处)
xAxis:{
//是否显示x轴
show:true,
//类型:类目轴
type:'category',
//坐标轴刻度设置
axisTick:{
//设置刻度线与标签对齐
alignWithLabel:true
},
axisLine:{
show:true,
lineStyle:{
//轴线颜色
color: '#92adce',
//线型
type:'solid'
}
},
data:['01','02','03','04','05','06']
},
yAxis:{
type:'value',
//是否显示y轴
show:true,
axisLine:{
show:true,
lineStyle:{
//轴线颜色
color: '#92adce',
//线型
type:'solid'
}
}
},
3、设置系列
//系列列表
series:[
{
//系列名称
name:'测试系列1',
//类型:折线图
type:'line',
smooth:true,
//每个数据的标记图形:三角形
symbol:'triangle',
//标记图形的大小
symbolSize:10,
//标记图形的旋转角度,负数为顺时针旋转:顺时针旋转45度
symbolRotate:-45,
//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
stack:'test',
//在标记图形上显示对应数值
label:{
normal:{
//是否显示
show:true,
//显示位置:在标记图形的上方
position:'top',
//文本颜色:黑色,不设置默认为系列色
color:'black'
}
},
//标记图形的样式
itemStyle:{
normal:{
//标记图形的颜色
color: 'blue',
//标记图形描边颜色
borderColor:'rgba(153,51,204,0.27)',
//标记图形的描边线宽
borderWidth:10,
//阴影区域颜色
shadowColor:'#fb0000e0',
//阴影大小
shadowBlur:5,
//阴影X轴偏移
shadowOffsetX:4,
//阴影Y轴偏移
shadowOffsetY:4
}
},
data: [14,16,19,22,25,30]
},
{
//系列名称
name:'测试系列2',
//类型:折线图
type:'line',
smooth:true,
//每个数据的标记图形:三角形
symbol:'triangle',
//标记图形的大小
symbolSize:10,
//标记图形的旋转角度,负数为顺时针旋转:顺时针旋转45度
symbolRotate:-45,
//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
stack:'test',
//在标记图形上显示对应数值
label:{
normal:{
//是否显示
show:true,
//显示位置:在标记图形的上方
position:'top',
//文本颜色:黑色,不设置默认为系列色
color:'black'
}
},
//标记图形的样式
itemStyle:{
normal:{
//标记图形的颜色
color: 'blue',
//标记图形描边颜色
borderColor:'rgba(153,51,204,0.27)',
//标记图形的描边线宽
borderWidth:10,
//阴影区域颜色
shadowColor:'#fb0000e0',
//阴影大小
shadowBlur:5,
//阴影X轴偏移
shadowOffsetX:4,
//阴影Y轴偏移
shadowOffsetY:4
}
},
data: [14,16,19,22,25,30]
}
],
4、设置图例组件:展示不同系列的标记,颜色和名字
//图例组件:
legend:{
data:['测试系列1','测试系列2'],
//统一设置系列样式
textStyle:{
fontSize:'12',
color:'green'
},
//系列之间的间距
itemGap:50,
//系列标记图形的宽高
itemWidth:15,
itemHeight:15
},
5、添加提示框组件tooltip
//提示框组件
tooltip:{
//触发类型:坐标轴触发
trigger:'axis'
}
6、完整代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>多系列折线图</title>
</head>
<style type="text/css">
*{
padding: 0;
margin:0 auto;
}
.wrapper{
width: 1100px;
height: auto;
background: white;
}
#container{
width: 960px;
height:500px;
margin-top:5%;
/* background:red; */
}
</style>
<body>
<div class="wrapper">
<div id="container"> </div>
</div>
</body>
<script type = "text/javascript" src="./js/jquery.js"></script>
<script type = "text/javascript" src="./js/echarts.min.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
//实例化echarts对象
var myEcharts = echarts.init(document.getElementById("container"));
//自定义图表配置选项
var option = {
//绘制网格
grid:{
x:'15%',
y:'15%'
},
//提示框组件
tooltip:{
//触发类型:坐标轴触发
trigger:'axis'
},
xAxis:{
//是否显示x轴
show:true,
//类型:类目轴
type:'category',
//坐标轴刻度设置
axisTick:{
//设置刻度线与标签对齐
alignWithLabel:true
},
axisLine:{
show:true,
lineStyle:{
//轴线颜色
color: '#92adce',
//线型
type:'solid'
}
},
data:['01','02','03','04','05','06']
},
yAxis:{
type:'value',
//是否显示y轴
show:true,
axisLine:{
show:true,
lineStyle:{
//轴线颜色
color: '#92adce',
//线型
type:'solid'
}
}
},
//系列列表
series:[
{
//系列名称
name:'测试系列1',
//类型:折线图
type:'line',
smooth:true,
//每个数据的标记图形:三角形
symbol:'triangle',
//标记图形的大小
symbolSize:10,
//标记图形的旋转角度,负数为顺时针旋转:顺时针旋转45度
symbolRotate:-45,
//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
stack:'test',
//在标记图形上显示对应数值
label:{
normal:{
//是否显示
show:true,
//显示位置:在标记图形的上方
position:'top',
//文本颜色:黑色,不设置默认为系列色
color:'black'
}
},
//标记图形的样式
itemStyle:{
normal:{
//标记图形的颜色
color: 'blue',
//标记图形描边颜色
borderColor:'rgba(153,51,204,0.27)',
//标记图形的描边线宽
borderWidth:10,
//阴影区域颜色
shadowColor:'#fb0000e0',
//阴影大小
shadowBlur:5,
//阴影X轴偏移
shadowOffsetX:4,
//阴影Y轴偏移
shadowOffsetY:4
}
},
data: [14,16,19,22,25,30]
},
{
//系列名称
name:'测试系列2',
//类型:折线图
type:'line',
smooth:true,
//每个数据的标记图形:三角形
symbol:'triangle',
//标记图形的大小
symbolSize:10,
//标记图形的旋转角度,负数为顺时针旋转:顺时针旋转45度
symbolRotate:-45,
//数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。
stack:'test',
//在标记图形上显示对应数值
label:{
normal:{
//是否显示
show:true,
//显示位置:在标记图形的上方
position:'top',
//文本颜色:黑色,不设置默认为系列色
color:'black'
}
},
//标记图形的样式
itemStyle:{
normal:{
//标记图形的颜色
color: 'blue',
//标记图形描边颜色
borderColor:'rgba(153,51,204,0.27)',
//标记图形的描边线宽
borderWidth:10,
//阴影区域颜色
shadowColor:'#fb0000e0',
//阴影大小
shadowBlur:5,
//阴影X轴偏移
shadowOffsetX:4,
//阴影Y轴偏移
shadowOffsetY:4
}
},
data: [14,16,19,22,25,30]
}
],
//图例组件:
legend:{
data:['测试系列1','测试系列2'],
//统一设置系列样式
textStyle:{
fontSize:'12',
color:'green'
},
//系列之间的间距
itemGap:50,
//系列标记图形的宽高
itemWidth:15,
itemHeight:15
},
};
//echarts对象绑定配置选项
myEcharts.setOption(option);
});
</script>
</html>