完整代码：
<%@ 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>
处理代码：
formatter:function(param){
//处理柱子为0时，会盖住横轴的行政区划wen
if(param.data == 0){
return "";
}
return param.data + "%";
}请您注意
·自觉遵守：爱国、守法、自律、真实、文明的原则
·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品，NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款
