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); } }