echarts画柱状图

drawLeftHistogram(){
let Histogram = echarts.init(document.getElementById('data-left-bottom-table-wrap'));
let option = null;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// color:['#00C0FF','#FFDC5C'],
icon: "circle",
legend: {
x:'200px',
y:'10px',
data:['总人数','刷脸人数'],
textStyle:{
fontSize: 14,//字体大小
color: '#BBF6FF'//字体颜色
}, },
grid: {
left: '0px',
// right: '0px',
bottom: '0px',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
name:'人数',
nameGap:'15',
show:true,
axisLabel:{
textStyle:{
color:'white'
}
},
splitArea : {
show : false,
},
splitLine : {
show :false,
},
axisLine:{
lineStyle:{
color:'#BBF6FF',
width:2,
},
symbol:['none','arrow']
},
},
yAxis: {
type: 'category',
data: ['运营部','研发部','品牌部','人事部'],
name:'部门',
show:true,
axisLabel:{
textStyle:{
color:'white'
}
},
splitArea : {
show : false,
},
splitLine : {
show :false,
},
axisLine:{
lineStyle:{
color:'#BBF6FF',
width:2,
},
symbol:['none','arrow']
},
},
series: [
{
name: '总人数',
barWidth : 12,
type: 'bar',
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: 'white'
}
}
},
itemStyle: {
emphasis: {
barBorderRadius: 7
},
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "#2A86FF" // 0% 处的颜色
}, {
offset: 0.6,
color: "#22A8FF" // 60% 处的颜色
}, {
offset: 1,
color: "#1BCBFF" // 100% 处的颜色
}], false)
}
},
data: [53, 55, 84, 32]
},
{
name: '刷脸人数',
barWidth : 12,
type: 'bar',
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: 'white'
}
}
},
itemStyle: {
emphasis: {
barBorderRadius: 7
},
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "#1CA485" // 0% 处的颜色
}, {
offset: 0.6,
color: "#35C980" // 60% 处的颜色
}, {
offset: 1,
color: "#50F279" // 100% 处的颜色
}], false)
}
},
data: [43, 45, 35, 26]
}
]
};
if (option && typeof option === "object") {
Histogram.setOption(option);
}
}