layui.use(['echarts'], function() { let echarts = layui.echarts; var column4 = echarts.init(document.getElementById('column4'),null, { width: 600, height: 400 }); option = { backgroundColor:'#fff', title:{ text:"描边柱状图", top:10, left:15, color:"#35598d", fontSize:16, fontWeight:'normal' }, tooltip: { trigger: 'axis', formatter:'{b}:{c}', }, grid: { left: '5%', right: '6%', bottom: '3%', top: '20%', containLabel: true }, xAxis :{ type : 'category', data : ['策略1','策略2','策略3','策略4','策略5','策略6','策略7','策略8','策略9'], axisLabel:{ //坐标轴字体颜色 color: '#9eaaba' }, axisLine:{ lineStyle:{ color:"#e5e5e5" } }, axisTick:{ //y轴刻度线 show:false }, splitLine:{ //网格 show: false, } }, yAxis :{ type : 'value', axisLabel:{ //坐标轴字体颜色 color: '#9eaaba' }, axisLine:{ show:false, }, axisTick:{ //y轴刻度线 show:false }, splitLine:{ //网格 show: true, lineStyle:{ color:'#dadde4', type:"dashed" //坐标网线类型 } } }, series:{ name:'', type:'bar', barWidth : '40%', //柱子宽度 itemStyle:{ //柱子颜色 borderWidth: 2, borderColor: 'rgb(79, 116, 223)', color:'rgba(79, 116, 223, .3)', }, data:[320, 332, 301, 334, 390, 330, 320, 230, 156] } }; column4.setOption(option); window.onresize = function() { column4.resize(); } })