横向柱状图主要配置x位置x轴类型y轴类型（轴的类型分两种 1.category（类别）2.value(值)），代码简单（里面有注释）效果如下：
var myChart = echarts.init(document.getElementById('thisId'));
/*指定图表的配置项和数据*/
option = {
textStyle:{
color:'#fff',
fontSize:'16'
},
title: {
textStyle:{
color:'#fff',
},
left:'50%',
text: '',
/* subtext: '数据来自网络'*/
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle:{
color:'#fff',
},
/* data: [titleName],*/
},
grid: {//设置图表位置
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
color:'#fff',
splitLine : {//去掉网格线
show : false
},
position: 'top',//X轴位置
type: 'value',
boundaryGap: [0, 0.01],
axisLabel : {//坐标轴刻度标签的相关设置
rotate:'45',//坐标轴文字旋转角度
show : true,
textStyle : {
color : '#FFF',
align : 'right',
fontSize: 15
}
},
axisLine : {
lineStyle : {
color : '#FFF'
}
},
axisTick : {
lineStyle : {
color : '#FFF'
}
},
},
yAxis: {
type: 'category',//轴的类型分两种 1.category（类别）2.value(值)
data: /*da*/[ '本地商城','网上营业厅', '微信营业厅', '掌上营业厅' ],
axisLabel : {
show : true,
textStyle : {
color : '#FFF',
align : 'right',
fontSize: 15 /*文字大小*/
}
},
axisLine : {
lineStyle : {
color : '#fff'//轴的颜色
}
},
axisTick : {
lineStyle : {
color : '#FFF'//轴上点的颜色
}
},
},
series: [
{
name: channelArr,
type: 'bar',
data: /*aa*/indexArr,/*请求回来的数据数组*/
label : {
normal : {
show : true,//显示数字
position : 'right'
}
},
barWidth : 15,//柱子宽度
itemStyle : {
normal : {
color:'#ccecff',//柱状的颜色
label : {
textStyle : {
fontSize : '15',//柱状上的显示的文字
color:'#ccecff'
}
}
}
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);