最近公司項目要做一個統(tǒng)計圖用到了echarts里面的條形圖跨扮，對于以前就接觸過一點echarts的我信心滿滿侈离，沒想到動手的時候才發(fā)現(xiàn)問題百出，看來實踐真的是檢驗學習成效的標準凉夯。這里有兩種條形圖淮韭，一種橫向的一種縱向的垢粮。
不管是哪種都要先初始化echarts:
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
這里橫向和縱向柱狀圖的配置無非就是x軸和y軸的不同靠粪，所以我寫了兩個配置項:
//橫向圖表的配置
var optionH = {
grid:{
x:150
},
color: ['#9BBB59'],
title: {
textStyle: {
color: '#aaa',
fontWeight: '600'
},
x:'50'//設(shè)置標題的偏移
},
tooltip: {
trigger: 'axis',
formatter: "完成進度 : <br/>蜡吧 : {c}%"
},
toolbox: {
show : true,
x:'800',
feature : {
dataView : {show: false, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis: [{
type : 'value',
axisLabel : {
formatter: '{value} %'
},
min: 0,
max: 100,
interval: 10
}],
yAxis: [{
type : 'category',
axisLabel:{
//X軸刻度配置
interval:0
},
data: ['']
}],
series: [{
xAxisIndex: 0,
yAxisIndex: 0,
type: 'bar',
barMaxWidth:60,//最大寬度
data: ['']
}]
};
// 縱向圖表的配置
var optionV = {
color: ['#9BBB59'],
title: {
text: '',
textStyle: {
color: '#aaa',
fontWeight: '600'
},
x:'50'
},
tooltip: {
trigger: 'axis',
formatter: "完成進度 : <br/> : {c}%"
},
toolbox: {
show : true,
x:'800',
feature : {
dataView : {show: false, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis: [{
type : 'category',
data: [''],
axisLabel:{
//X軸刻度配置
interval:0
}
}
],
yAxis: [{
type : 'value',
axisLabel : {
formatter: '{value} %'
},
min: 0,
max: 100,
interval: 10
}],
series: [{
type: 'bar',
barMaxWidth:60,//最大寬度
data: ['']
}]
};
這個統(tǒng)計圖一共有5種角色的區(qū)分（市級占键、區(qū)級昔善、學校、班主任畔乙、學生）
首先市級的是縱向條形圖君仆，x軸為類別數(shù)據(jù)，y軸為百分比:
//市級 統(tǒng)計圖
function loadOptionByCity(){
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表
myChart.setOption(optionV);
var njmc= $('#staGradeSelect option:selected').val();
var termNo = $('#staTermNo option:selected').val();
$.ajax({
url: ctx + '/SCH_STATISTIC_JLYD_Action.a?findCountyStatisticScore',
type: 'post',
data: {
"njid" : njmc, //年級
"termNo" :termNo //學期
},
dataType: 'json',
async: false,
success: function (result) {
var resultCode = result.resultCode;
var resultMsg = result.resultMsg;
var resultList = result.resultList;
var xArray=[];
if (result)
{
var option = myChart.getOption();
option.series[0].data = [];
option.title[0].text = titleArray[0];
if (resultList.length == 0) {
option.series[0].data = [];
option.xAxis[0].data = []
} else {
for (var i = 0; i <resultList.length; i++) {
option.series[0].data.push(resultList[i].ztwcjd);
xArray.push(resultList[i].qxmc);
}
option.xAxis[0].data=xArray;
}
myChart.setOption(option,true);
}
},
error: function ()
{
alert("不好意思請求失敗了");
}
})
};
渲染出來的圖表是這樣：
Paste_Image.png
區(qū)級也是縱向條形圖牲距，只不過x軸數(shù)據(jù)是寫死的：
//區(qū)級 統(tǒng)計圖
function loadOptionByArea()
{
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表
myChart.setOption(optionV);
var njid= $('#staGradeSelect option:selected').val();
var termNo = $('#staTermNo option:selected').val();
$.ajax({
url: ctx + '/SCH_STATISTIC_JLYD_Action.a?findCountyStatisticScore',
type: 'post',
data: {
"qxdm" :qxdmSelf,
"njid" : njid, //年級
"termNo" :termNo //學期
},
dataType: 'json',
async: false,
success: function (result) {
var resultCode = result.resultCode;
var resultMsg = result.resultMsg;
var resultList = result.resultList;
if (result)
{
var option = myChart.getOption();
option.series[0].data = [];
option.title[0].text = titleArray[1];
if (resultList.length == 0) {
option.series[0].data = [];
option.xAxis[0].data = ['啊啊','哇哇','啦啦','嘻嘻','呵呵']
} else {
var xArray=['啊啊','哇哇','啦啦','嘻嘻','呵呵'] ;
var yArray = [resultList[0].ztwcjd,resultList[0].zgdfjd,resultList[0].zgtbjd,resultList[0].zjtbjd,resultList[0].actbjd];
option.series[0].data=yArray
option.xAxis[0].data=xArray;
}
myChart.setOption(option,true);
}
},
error: function ()
{
alert("不好意思請求失敗了");
}
})
};
渲染出來的圖表是這樣：
Paste_Image.png
校級返咱、班主任、學生三個角色都是橫向條形圖牍鞠，只不過傳的參數(shù)和接口地址不一樣咖摹，所以我封裝了一個方法：
function loadOption(url,data)
{
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表
myChart.setOption(optionH);
$.ajax({
url: ctx + url,
type: 'post',
data: data,
dataType: 'json',
async: false,
success: function (result) {
var resultCode = result.resultCode;
var resultMsg = result.resultMsg;
var resultList = result.resultList;
if (result)
{
var option = myChart.getOption();
option.series[0].data = [];
option.yAxis[0].data = [];
option.title[0].text = titleArray[2];
if (resultList.length == 0) {
option.series[0].data = [];
option.yAxis[0].data = []
} else {
for(var i=0;i<resultList.length;i++){
option.series[0].data.push(resultList[i].WCJD);
option.yAxis[0].data.push(resultList[i].LABELNAME);
}
}
myChart.setOption(option,true);
}
},
error: function ()
{
alert("不好意思請求失敗了");
}
})
};
Paste_Image.png
總結(jié)
tooltip: {
trigger: 'axis',
formatter: "完成進度 : <br/> : {c}%"
}
- 提示框觸發(fā)方式：trigger
tooltip的trigger的值可以有'item'难述、'axis'萤晴。
'item':數(shù)據(jù)項圖形觸發(fā)，主要在散點圖胁后，餅圖等無類目軸的圖表中使用店读。
'axis':坐標軸觸發(fā)，主要在柱狀圖攀芯，折線圖等會使用類目軸的圖表中使用- 提示框的格式：formatter
折線（區(qū)域）圖两入、柱狀（條形）圖、K線圖 : {a}（系列名稱）敲才，（類目值）择葡，{c}（數(shù)值）, zh5kk7s（無）如下圖：
Paste_Image.png
工具箱紧武，非常方便，可以條形圖折線圖相互轉(zhuǎn)換敏储，效果如下圖：
toolbox: {
show : true,
x:'800',//在x軸的位置
feature : {
dataView : {show: false, readOnly: false}, //數(shù)據(jù)視圖
magicType : {show: true, type: ['line', 'bar']}, //動態(tài)轉(zhuǎn)換
restore : {show: true}, //刷新
saveAsImage : {show: true}//保存為圖片
}
},
Paste_Image.png
xAxis: [{
type : 'category',
data: [''],
axisLabel:{
//X軸刻度配置
interval:0
}
}
]
這里需要設(shè)置x軸標簽的刻度阻星，不然會出現(xiàn)默認刻度單位過大或者是數(shù)據(jù)標簽隔一個顯示一個的怪異現(xiàn)象
yAxis: [{
type : 'value',
axisLabel : {
formatter: '{value} %'
},
min: 0,
max: 100,
interval: 10
}],
這里需要注意的是我想讓y軸的刻度按百分比顯示，從10%到100%，間隔為10妥箕，用到了神奇的formatter
series: [{
type: 'bar',
barMaxWidth:60,//最大寬度
data: ['']
}]
通過barMaxWidth設(shè)置柱子的最大寬度滥酥，不然數(shù)據(jù)少的時候，柱子會特別寬畦幢，影響美觀
還有一個需要注意的地方坎吻，每次渲染圖表都讓數(shù)據(jù)置空option.series[0].data = [];不然會出現(xiàn)數(shù)據(jù)堆疊的怪異現(xiàn)象
