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> |