Echarts条形图实战
2017-08-03 本文已影响0人
夏末女巫
最近公司项目要做一个统计图用到了echarts里面的条形图，对于以前就接触过一点echarts的我信心满满，没想到动手的时候才发现问题百出，看来实践真的是检验学习成效的标准。这里有两种条形图，一种横向的一种纵向的。
不管是哪种都要先初始化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'//设置标题的偏移
},
tooltip: {
trigger: 'axis',
formatter: "完成进度 : <br/>{b} : {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/>{b} : {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: ['']
}]
};
这个统计图一共有5种角色的区分（市级、区级、学校、班主任、学生）
首先市级的是纵向条形图，x轴为类别数据，y轴为百分比:
//市级 统计图
function loadOptionByCity(){
// 使用刚指定的配置项和数据显示图表
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
区级也是纵向条形图，只不过x轴数据是写死的：
//区级 统计图
function loadOptionByArea()
{
// 使用刚指定的配置项和数据显示图表
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
校级、班主任、学生三个角色都是横向条形图，只不过传的参数和接口地址不一样，所以我封装了一个方法：
function loadOption(url,data)
{
// 使用刚指定的配置项和数据显示图表
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
总结
tooltip: {
trigger: 'axis',
formatter: "完成进度 : <br/>{b} : {c}%"
}
- 提示框触发方式：trigger
tooltip的trigger的值可以有'item'、'axis'。
'item':数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
'axis':坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用- 提示框的格式：formatter
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）如下图：
Paste_Image.png
工具箱，非常方便，可以条形图折线图相互转换，效果如下图：
toolbox: {
show : true,
x:'800',//在x轴的位置
feature : {
dataView : {show: false, readOnly: false}, //数据视图
magicType : {show: true, type: ['line', 'bar']}, //动态转换
restore : {show: true}, //刷新
saveAsImage : {show: true}//保存为图片
}
},
Paste_Image.png
xAxis: [{
type : 'category',
data: [''],
axisLabel:{
//X轴刻度配置
interval:0
}
}
]
这里需要设置x轴标签的刻度，不然会出现默认刻度单位过大或者是数据标签隔一个显示一个的怪异现象
yAxis: [{
type : 'value',
axisLabel : {
formatter: '{value} %'
},
min: 0,
max: 100,
interval: 10
}],
这里需要注意的是我想让y轴的刻度按百分比显示，从10%到100%，间隔为10，用到了神奇的formatter
series: [{
type: 'bar',
barMaxWidth:60,//最大宽度
data: ['']
}]
通过barMaxWidth设置柱子的最大宽度，不然数据少的时候，柱子会特别宽，影响美观
还有一个需要注意的地方，每次渲染图表都让数据置空option.series[0].data = [];不然会出现数据堆叠的怪异现象
