完整代码:

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<%
	//清除缓存
	response.setHeader("Pragma","No-cache"); 
	response.setHeader("Cache-Control","no-cache"); 
	response.setDateHeader("Expires", 0);
	String ctx = request.getContextPath();
	if ("/".equals(ctx)) {
	    ctx = "";
	}
	request.setAttribute("ctx", ctx);
	
	String pjgzxh = request.getParameter("q_PJGZXH");
	request.setAttribute("pjgzxh", pjgzxh);
%>
<!DOCTYPE html>
<html lang="zh-CN" style="width: 100%;height: 100%;overflow: hidden;">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>进度统计</title>
	</head>
	<body style="width: 100%;height: 100%">
		<input type="hidden" id = "pjgzxh" value="${pjgzxh}"/>
		<div class="grid" style="width: 100%;height: 100%">
			<div id="jdpic" style="width: 100%;height: 100%;"></div>
		</div>
		<script src="${ctx}/scripts/plugin/jquery/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="${ctx}/scripts/plugin/echarts3.1.10/echarts.min.js"></script>
		<script>
		$(function(){
			var pjgzxh = $("#pjgzxh").val();
			$.ajax({
			  url: "${ctx}/pages/xypj/tj/jdcx/jdcxProcessor.jsp",
			  data: {method:"getJdcxData",pjgzxh:pjgzxh},
			  dataType:"json",
			  success: function(json){
		        	if("success" == json.result){
		        		var data = json.data;
		        		var xAxisArr = new Array();
		        		var wcBfb = new Array();
		        		var wwcBfb = new Array();
		        		$.each(data,function(i,item){
		        			//console.log(item);
		        			var ZZJGMC = item.ZZJGMC;
		        			xAxisArr.push(ZZJGMC);
		        			var total = item.TOTAL;
		        			var wwcNum = item.WWCNUM;
		        			var wwcBfbTemp = ((wwcNum/total) * 100).toFixed(0);
		        			wcBfb.push((100 - wwcBfbTemp).toFixed(0));
		        			wwcBfb.push(wwcBfbTemp);
		        		})
		        	}
			        var jdpic = echarts.init(document.getElementById('jdpic'));
		        	var option_jdpic = {
	        			title: {
	                        text: '评价进度情况'
	                    },
	            		color : ['#41d1c9', '#d6d6d6'],
	            		tooltip : {
	            	        trigger: 'axis',
	            	        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
	            	            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
	            	        },
	            	        formatter : function(param){
	            	            var html = param[0].name + '<br/>';
	            	            for(var index in param){
	            	                var seriesName = param[index].seriesName;
	            	                var value = param[index].value;
	            	                html += (((index % 3) == 0 && index !=0 ) ? "<br/>" : "");
	            	                html += seriesName + ' : ' + value + "% <br/>";
	            	            }
	            	            return html;
	            	        }
	            	    },
	            	    legend: {
	            	    	show:false,
	            	    	x:'center',
	            	    	y:'top',
	            	        data: ['完成百分比', '未完成百分比']
	            	    },
	            	    grid: {
	            	        left: '3%',
	            	        right: '4%',
	            	        top: '10%',
	            	        bottom: '15%',
	            	        containLabel: true
	            	    },
	            	    xAxis:  {
	            	       type: 'category',
	            	       splitLine : { //是否显示表格纵向分割线
	                            show : false
	                       },
	                       axisLabel:{ //底部文字颜色
	                    	   interval:0,//横轴信息全部显示
	                    	   rotate: -55,
	                           textStyle:{
	                               color: '#000'
	                           }	                           
	                       },
	                       axisLine:{  //底边框线
	                           lineStyle:{
	                               color: '#468BB7',
	                               width: 0.5
	                           }
	                       },
	            	       data: xAxisArr
	            	    },
	            	    yAxis: {
	            	    	 min:0,
	            	         max:100,
	            	         type: 'value',
	            	         axisLabel:{
	                             textStyle:{
	                                 color: '#468BB7'
	                             },
	                             formatter:function(param){
	                            	 return param + "%";
	                           	 }
	                         },
	                         axisLine:{  //侧边框线框线
	                             lineStyle:{
	                                 color: '#468BB7',
	                                 width: 0.5
	                             }
	                         },
	                         splitLine : { //表格横向分割线
	                             show : false,
	                             lineStyle:{
	                                 color:'#468BB7',
	                                 width:0.5
	                             }
	                         }
	            	    },
	            	    series: [
	            	        {
	            	            name: '完成百分比',
	            	            type: 'bar',
	            	            stack: '总量',
	            	            label: {
	            	                normal: {
	            	                    show: true,
	            	                    position: 'insideTop',
	            	                    formatter:function(param){
	            	                    	//处理柱子为0时,会盖住横轴的行政区划问题
	            	                    	if(param.data == 0){
	            	                    		return "";
	            	                    	}
	   	                            	return param.data + "%";
	   	                           }
	            	                }
	            	            },
	            	            data: wcBfb
	            	        }
	            	        /* ,
	            	        {
	            	            name: '未完成百分比',
	            	            type: 'bar',
	            	            stack: '总量',
	            	            label: {
	            	                normal: {
	            	                    show: false,
	            	                    position: 'insideTop'
	            	                }
	            	            },
	            	            data: wwcBfb
	            	        } */
	            	    ]
	            	};
	    	        jdpic.setOption(option_jdpic);
		        }
			});
	    });
		</script>
	</body>
</html>

echarts3 柱状图地图底部文字被数字盖住了导致有模糊效果的问题处理echarts3 柱状图地图底部文字被数字盖住了导致有模糊效果的问题处理

echarts3 柱状图地图底部文字被数字盖住了导致有模糊效果的问题处理echarts3 柱状图地图底部文字被数字盖住了导致有模糊效果的问题处理


处理代码:

formatter:function(param){
	//处理柱子为0时,会盖住横轴的行政区划wen
	if(param.data == 0){
		return "";
	}
	return param.data + "%";
}




作者:星辰 时间:2018-04-02 浏览 416评论 0 赞 0砸 0 标签: echarts
评论
还可以再输入500个字

请您注意

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