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>
