147 lines
5.4 KiB
Plaintext
147 lines
5.4 KiB
Plaintext
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|||
|
|
pageEncoding="UTF-8" %>
|
|||
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|||
|
|
<title></title>
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var nv;
|
|||
|
|
var nt;
|
|||
|
|
var date;
|
|||
|
|
$(function () {
|
|||
|
|
nv = JSON.parse('${nv}');
|
|||
|
|
nt = JSON.parse('${nt}');
|
|||
|
|
date = '${date}';
|
|||
|
|
var data = nv.nv;
|
|||
|
|
var t = nt.nt;
|
|||
|
|
var barHeight = 0;
|
|||
|
|
var chartDom2 = document.getElementById('contain');
|
|||
|
|
var myChart3 = echarts.init(chartDom2);
|
|||
|
|
|
|||
|
|
var num = 0;
|
|||
|
|
if (t.length > 30) {
|
|||
|
|
num = 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var option3;
|
|||
|
|
option3 = {
|
|||
|
|
title: {
|
|||
|
|
text: date + ' 各指标分指数.'
|
|||
|
|
//subtext: '1级（优）：< 0.5；2级（合格）：0.5~1；3级（不合格）：> 1'
|
|||
|
|
},
|
|||
|
|
avoidLabelOverlap: true,
|
|||
|
|
angleAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: t,
|
|||
|
|
//max: 100,
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: num,
|
|||
|
|
rotate:45,
|
|||
|
|
fontSize: 18,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: true,
|
|||
|
|
confine: true,
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var id = params.dataIndex;
|
|||
|
|
return t[id] + '<br>分指数：' + data[id][1];
|
|||
|
|
},
|
|||
|
|
/*textStyle: {
|
|||
|
|
fontSize: 22
|
|||
|
|
}*/
|
|||
|
|
},
|
|||
|
|
radiusAxis: {
|
|||
|
|
max: 1,
|
|||
|
|
},
|
|||
|
|
polar: {
|
|||
|
|
radius: 160,
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
type: 'bar',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: 'transparent',
|
|||
|
|
/*textStyle: {
|
|||
|
|
fontSize: 22
|
|||
|
|
}*/
|
|||
|
|
},
|
|||
|
|
barWidth: 10,
|
|||
|
|
data: data.map(function (d) {
|
|||
|
|
return d[0];
|
|||
|
|
}),
|
|||
|
|
coordinateSystem: 'polar',
|
|||
|
|
stack: '最大最小值',
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
/*textStyle: {
|
|||
|
|
fontSize: 28
|
|||
|
|
}*/
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
labelLine: { // 统一设置指示线长度
|
|||
|
|
normal: {
|
|||
|
|
length: 15
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: 10,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: function (params) {
|
|||
|
|
var colorList = ['rgba(51, 255, 51,0.8)', 'rgba(240,189,0,0.8)', 'rgba(255,0,0,0.8)'];
|
|||
|
|
if (params.name == '臭和味') {
|
|||
|
|
if (params.value < 1) {
|
|||
|
|
return colorList[0];
|
|||
|
|
} else if (1 <= params.value & 5 > params.value) {
|
|||
|
|
return colorList[1];
|
|||
|
|
} else {
|
|||
|
|
return colorList[2];
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (params.value < 0.5) {
|
|||
|
|
return colorList[0];
|
|||
|
|
} else if (0.5 <= params.value & 1 >= params.value) {
|
|||
|
|
return colorList[1];
|
|||
|
|
} else {
|
|||
|
|
return colorList[2];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//return colorList[params.dataIndex%colorList.length]
|
|||
|
|
},
|
|||
|
|
/*textStyle: {
|
|||
|
|
fontSize: 30
|
|||
|
|
}*/
|
|||
|
|
},
|
|||
|
|
/*label: {
|
|||
|
|
normal: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 30,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}*/
|
|||
|
|
},
|
|||
|
|
data: data.map(function (d) {
|
|||
|
|
return d[1] - d[0];
|
|||
|
|
}),
|
|||
|
|
coordinateSystem: 'polar',
|
|||
|
|
stack: '最大最小值'
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart3.setOption(option3);
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div style="width:550px; height: 600px;" id="contain"></div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|