多系列柱狀圖大部分與多系列折線圖相似
一、簡單html佈局
簡單的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、繪製網格
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'
}
},
//設置座標軸文字樣式
axisLabel:{
//文字旋轉:正值是逆時針,負值順時針,此處逆時針旋轉45
rotate: 45
},
data:['2019-01','2019-02','2019-03','2019-04','2019-05','2019-06']
},
yAxis:{
type:'value',
//是否顯示y軸
show:true,
axisLine:{
show:true,
lineStyle:{
//軸線顏色
color: '#92adce',
//線型
type:'solid'
}
}
},
3、設置系列
//系列列表
series:[
{
//系列名稱
name:'測試系列1',
//類型:折線圖
type:'bar',
//數據堆疊,同個類目軸上系列配置相同的stack值可以堆疊放置。
// stack:'test',
//在柱體上顯示對應數值
label:{
normal:{
//是否顯示
show:true,
//顯示位置:在標記圖形的上方
position:'top',
//文本顏色:黑色,不設置默認爲系列色
color:'black'
}
},
//柱體樣式
itemStyle:{
normal:{
//柱體顏色
color: 'blue',
//柱體邊框顏色
borderColor:'rgba(153,51,204,0.27)',
//柱體邊框寬度
borderWidth:10,
//圓角設置,(順時針左上:5,右上:5,右下:0,左下:0)
barBorderRadius: [5, 5, 0, 0]
}
},
data: [14,16,19,22,25,30]
},
{
//系列名稱
name:'測試系列2',
//類型:折線圖
type:'bar',
//數據堆疊,同個類目軸上系列配置相同的stack值可以堆疊放置。
stack:'test',
//在標記圖形上顯示對應數值
label:{
normal:{
//是否顯示
show:true,
//顯示位置:在標記圖形的上方
position:'top',
//文本顏色:黑色,不設置默認爲系列色
color:'black'
}
},
//系列之間的間距
// barGap: '-100%',
data: [14,16,19,22,25,30]
}
],
使用數據集(dataset)管理系列要顯示的數值
4、設置圖例組件:展示不同系列的標記,顏色和名字
//圖例組件:
legend:{
data:['測試系列1','測試系列2'],
//統一設置系列樣式
textStyle:{
fontSize:'12',
color:'green'
},
//系列之間的間距
itemGap:50,
//系列標記圖形的寬高
itemWidth:15,
itemHeight:15
}
5、添加提示框組件tooltip
//提示框組件
tooltip:{
//觸發類型:座標軸觸發
trigger:'axis'
},
進一步更改:
//提示框組件
tooltip:{
//觸發類型:座標軸觸發
trigger:'axis',
//座標軸指示器:指示座標軸當前刻度的工具。
axisPointer: {
type: 'shadow',
//可指定顯示哪個軸的axisPointer,這裏指定x軸
axis:'x'
}
},
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',
//座標軸指示器:指示座標軸當前刻度的工具。
axisPointer: {
type: 'shadow',
//可指定顯示哪個軸的axisPointer,這裏指定x軸
axis:'x'
}
},
xAxis:{
//是否顯示x軸
show:true,
//類型:類目軸
type:'category',
//座標軸刻度設置,
axisTick:{
//設置刻度線與標籤對齊
alignWithLabel:true
},
axisLine:{
show:true,
lineStyle:{
//軸線顏色
color: '#92adce',
//線型
type:'solid'
}
},
//設置座標軸文字樣式
axisLabel:{
//文字旋轉:正值是逆時針,負值順時針,此處逆時針旋轉45
rotate: 45
},
data:['2019-01','2019-02','2019-03','2019-04','2019-05','2019-06']
},
yAxis:{
type:'value',
//是否顯示y軸
show:true,
axisLine:{
show:true,
lineStyle:{
//軸線顏色
color: '#92adce',
//線型
type:'solid'
}
}
},
//系列列表
series:[
{
//系列名稱
name:'測試系列1',
//類型:折線圖
type:'bar',
//數據堆疊,同個類目軸上系列配置相同的stack值可以堆疊放置。
// stack:'test',
//在柱體上顯示對應數值
label:{
normal:{
//是否顯示
show:true,
//顯示位置:在標記圖形的上方
position:'top',
//文本顏色:黑色,不設置默認爲系列色
color:'black'
}
},
//柱體樣式
itemStyle:{
normal:{
//柱體顏色
color: 'blue',
//柱體邊框顏色
borderColor:'rgba(153,51,204,0.27)',
//柱體邊框寬度
borderWidth:10,
//圓角設置,(順時針左上:5,右上:5,右下:0,左下:0)
barBorderRadius: [5, 5, 0, 0]
}
},
data: [14,16,19,22,25,30]
},
{
//系列名稱
name:'測試系列2',
//類型:折線圖
type:'bar',
//數據堆疊,同個類目軸上系列配置相同的stack值可以堆疊放置。
stack:'test',
//在標記圖形上顯示對應數值
label:{
normal:{
//是否顯示
show:true,
//顯示位置:在標記圖形的上方
position:'top',
//文本顏色:黑色,不設置默認爲系列色
color:'black'
}
},
//系列之間的間距
// barGap: '-100%',
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>
忘了自己的echarts是什麼版本的可以在控制檯打印:
console.log(echarts.version);