以下是柱状图相关样式调整案例：

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<div class="mod-hd">
	<span>水质日历</span>
	<div class="slect">
           <i>饮用水  </i>
           <ul>
               <li class="on">饮用水</li>
               <li>饮用水-2</li>
               <li>饮用水-3</li>
           </ul>
       </div>
</div>
<div class="mod-bd">
	<div class="pic-wrap2" style="text-align: center;width:100%;height:108px;" id="szrl"></div>
</div>
<script>
	$(function(){
		var szrl = echarts.init(document.getElementById('szrl'));
		var option_szrl = {
			color : [ '#9a84f3', '#fbcf6d', '#41d1c9', '#33b4a8', '#76cbfe', '#76a3fd',
			    			'#f9ac5b', '#59affd', '#42d963', '#f86d82', '#b37fd0', '#c79b73',
			    			'#f973cf', '#53afe2', '#91b353' ],
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    grid:{
		    	x:'5%',
		    	x2:'1%',
		    	y:'20%',
		    	y2:'20%'
		    },
		    legend: {  //图例相关设置
		    	top:'0%',
		        data:['I~II类','III类','IV类','V类','劣V类'],
		        textStyle : {
		        	color : '#FFF'
		        }
		    },
		    toolbox: {
		        x: 'right',
		        y: 'center'
		    },
		    calculable : true,
		    xAxis : [
		        {
		            type : 'category',
		            axisLabel:{ //底部文字颜色
		            	textStyle:{
		            		color: '#FFF'
		            	}
		            },
		            axisLine:{  //底边框线
		            	lineStyle:{
		            	    color: '#468BB7',
		            	    width: 0.5
		            	}
		            },
		            splitLine : { //是否显示表格纵向分割线
						show : false
					},
		            data : ['201612','201701','201702','201703','201704','201705','201706','201707','201708','201709','201710','201711']
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value',
		            axisLabel:{
		            	textStyle:{
		            		color: '#468BB7'
		            	}
		            },
		            axisLine:{  //侧边框线框线
		            	lineStyle:{
		            	    color: '#468BB7',
		            	    width: 0.5
		            	}
		            },
		            splitLine : { //表格横向分割线
						show : true,
						lineStyle:{
							color:'#468BB7',
							width:0.5
						}
					},
		            splitArea : { //表格隔行换色
						show : true,
						areaStyle:{color: ['#082255','#091242']}
					}
		        }
		    ],
		    series : [
		        {
		            name:'I~II类',
		            type:'bar',
		            stack: '广告',
		            barWidth:20, //柱子宽度
		            data:[20, 10, 20, 30, 10, 30, 10, 20, 20, 20, 30, 20]
		        },
		        {
		            name:'III类',
		            type:'bar',
		            stack: '广告',
		            data:[10, 20, 20, 10, 20, 10, 10, 10, 10, 10, 10, 10]
		        },
		        {
		            name:'IV类',
		            type:'bar',
		            stack: '广告',
		            data:[10, 10, 10, 10, 10, 20, 20, 20, 20, 20, 10, 30]
		        },
		        {
		            name:'V类',
		            type:'bar',
		            stack: '广告',
		            data:[20, 30, 30, 30, 30, 20, 20, 20, 30, 30, 40, 20]
		        },
		        {
		            name:'劣V类',
		            type:'bar',
		            stack: '广告',
		            data:[40, 30, 20, 20, 30, 20, 40, 30, 20, 20, 10, 20]
		        }
		    ]
		};
		szrl.setOption(option_szrl);
	});
</script>

请您注意

·自觉遵守：爱国、守法、自律、真实、文明的原则
·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品，NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款