使用echarts畫多維柱狀圖

摘要： 前言 在此之前，已經跟大家分享瞭如何使用echarts畫折線圖、雙摺線圖、柱狀圖，今天跟大家分享一下使用echarts畫多維柱狀圖。 使用echarts遇到過的坑： 一定要給圖表容器新增寬度與高度。 圖表在容器中可以調整位置，讓圖表顯示的更完整。 1...

前言

在此之前，已經跟大家分享瞭如何使用echarts畫折線圖、雙摺線圖、柱狀圖，今天跟大家分享一下使用echarts畫多維柱狀圖。

使用echarts遇到過的坑：

• 一定要給圖表容器新增寬度與高度。
• 圖表在容器中可以調整位置，讓圖表顯示的更完整。

1.引入相關js

<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="../echarts-4.2.0/echarts.min.js"></script>

2.確定容器

<div id="manyBar" style="width: 600px;height: 325px;">
</div>

3.定義畫多維柱狀圖是方法，配置圖表引數

/**
 * 畫多維柱狀圖
 * @param container 容器
 * @param titleName 標題名稱
 * @param legendData 選單列表
 * @param xData x軸資料
 * @param seriesDatas 多維圖表資料
 */
function drawManyBar(container, titleName, legendData, xData, seriesDatas) {
var ticket = echarts.init(document.getElementById(container));
ticketOption = {
//標題樣式
title : {
text : titleName,
textStyle : {
color : 'white',
},
left : 'left'
},
//提示框
tooltip : {
trigger : 'axis',
backgroundColor : 'gray',
axisPointer : {
type : 'shadow'
},
//提示資訊格式，支援html樣式
formatter : function(params) {
var res = '<div style="color:#00C7FF">';
res += '<strong>' + params[0].name + '（萬元）</strong>';
for ( var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + ((i == 4) ? '' : '')
+ params[i].seriesName + ' : '
+ params[i].value;
}
res += '</div>';
return res;
}
},
//選單
legend : {
//選單字型樣式
textStyle : {
color : 'white'
},
//選單位置
x : 'right',
//選單資料
data : legendData
},

xAxis : [ {
type : 'category',
axisLine : {
show : true,
//x軸線樣式
lineStyle : {
color : '#17273B',
width : 1,
type : 'solid',
}
},
//x軸字型設定
axisLabel : {
show : true,
fontSize : 12,
color : 'white'
},
data : xData
} ],
yAxis : [ {
type : 'value',
//y軸字型設定
axisLabel : {
show : true,
color : 'white',
fontSize : 12,
formatter : function(value) {
return value + '萬';
}
},
//y軸線設定不顯示
axisLine : {
show : false
},
//與x軸平行的線樣式
splitLine : {
show : true,
lineStyle : {
color : '#17273B',
width : 1,
type : 'dashd',
}
}
} ],
series : [ {
name : '5A',
type : 'bar',
//柱子寬度
barWidth : 8,
//柱狀圖樣式
itemStyle : {
color : 'red',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[0]
}, {
name : '4A',
type : 'bar',
barWidth : 8,
itemStyle : {
color : 'orange',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[1]
}, {
name : '3A',
type : 'bar',
barWidth : 8,
itemStyle : {
color : 'yellow',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[2]
}, {
name : '2A',
type : 'bar',
barWidth : 8,
itemStyle : {
color : 'green',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[3]
}, {
name : 'A',
type : 'bar',
barWidth : 8,
itemStyle : {
color : 'blue',
barBorderRadius : [ 30, 30, 0, 0 ]
},
data : seriesDatas[4]
} ]
};
ticket.setOption(ticketOption);
}

4.呼叫方法，傳遞引數

var titleName = '景區門票收入走勢';
var legendData = [ '5A', '4A', '3A', '2A', 'A' ];
var xData = [ '一季度', '二季度', '三季度', '四季度' ];
var seriesDatas = [[ 83, 56, 77, 99 ], [ 62, 55, 67, 82 ], [ 71, 45, 62, 79 ], [ 78, 40, 58, 77 ], [ 76, 33, 52, 67 ]];
drawManyBar('manyBar', titleName, legendData, xData, seriesDatas);

5.劃重點，方法說明

• 多維柱狀圖與單柱狀圖的區別在於，使用了多組資料。
• 提示框元件，可以根據需求自定義顯示格式，在tooltip裡面，加入formatter，支援html樣式。
• y軸是可以根據需要設定不同的單位的，比如萬、K、毫升、C°等等，只需要在yAxis裡面加入formatter，我這裡使用的就是萬。
• 與x軸平行的線，如果設定為true，但是width設定為0，該線是不顯示的，設定為false則不受width值影響。

6.上圖