261 lines
8.4 KiB
Plaintext
261 lines
8.4 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8" %>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var json;
|
|||
|
|
var titlejson;
|
|||
|
|
var vj;
|
|||
|
|
var nv;
|
|||
|
|
var nt;
|
|||
|
|
var date;
|
|||
|
|
var myChart = echarts.init(document.getElementById("myLine"));
|
|||
|
|
$(function () {
|
|||
|
|
json = JSON.parse('${jsonDate}');
|
|||
|
|
titlejson = JSON.parse('${title_radar}');
|
|||
|
|
vj = JSON.parse('${values}');
|
|||
|
|
nv = JSON.parse('${newvaluelist}');
|
|||
|
|
nt = JSON.parse('${newtitlelist}');
|
|||
|
|
date = '${date}';
|
|||
|
|
// console.log(nv);
|
|||
|
|
// console.log(nt);
|
|||
|
|
//初始化ehcharts实例
|
|||
|
|
|
|||
|
|
//指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
//标题
|
|||
|
|
title: {
|
|||
|
|
text: json.name + '趋势'
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
},
|
|||
|
|
//工具箱
|
|||
|
|
//保存图片
|
|||
|
|
toolbox: {
|
|||
|
|
show: true,
|
|||
|
|
feature: {
|
|||
|
|
saveAsImage: {
|
|||
|
|
show: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//图例-每一条数据的名字
|
|||
|
|
legend: {
|
|||
|
|
data: [json.name],
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 18
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//x轴
|
|||
|
|
xAxis: {
|
|||
|
|
data: json.title,
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize : 18
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//y轴没有显式设置，根据值自动生成y轴
|
|||
|
|
yAxis: {
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize : 18
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//数据-data是最终要显示的数据
|
|||
|
|
series: [{
|
|||
|
|
name: json.name,
|
|||
|
|
type: 'line',
|
|||
|
|
data: json.val
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
//使用刚刚指定的配置项和数据项显示图表
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
showRadarTwo(date);
|
|||
|
|
//showRadar();
|
|||
|
|
//showRadarNew();
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myChart.on('click', function (params) {
|
|||
|
|
$.post(ext.contextPath + "/evaluation/show/getRadar.do", {date: params.name, type: '${type}'}, function (data) {
|
|||
|
|
//$('#radar').html('');
|
|||
|
|
var jsondata = JSON.parse(data);
|
|||
|
|
titlejson = jsondata.title_radar;
|
|||
|
|
vj = jsondata.vj;
|
|||
|
|
nv = jsondata.nv;
|
|||
|
|
nt = jsondata.nt;
|
|||
|
|
showRadarTwo(params.name);
|
|||
|
|
//console.log(titlejson);
|
|||
|
|
//showRadar();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function showRadar() {
|
|||
|
|
var chartDom = document.getElementById('radar');
|
|||
|
|
var myChart2 = echarts.init(chartDom);
|
|||
|
|
var option2;
|
|||
|
|
option2 = {
|
|||
|
|
color: ['blue'],
|
|||
|
|
title: {
|
|||
|
|
text: '雷达图'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['各指标分指数..']
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 18
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
radar: [
|
|||
|
|
{
|
|||
|
|
indicator: titlejson,
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
radius: 80,
|
|||
|
|
startAngle: 1,
|
|||
|
|
splitNumber: 2,
|
|||
|
|
shape: 'circle',
|
|||
|
|
name: {
|
|||
|
|
formatter: '【{value}】',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#428BD4'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitArea: {
|
|||
|
|
areaStyle: {
|
|||
|
|
color: ['rgba(51, 255, 51,0.8)', 'rgba(240,189,0,0.8)'],
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|||
|
|
shadowBlur: 10
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(211, 253, 250, 0.8)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: 'rgba(211, 253, 250, 0.8)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '雷达图',
|
|||
|
|
type: 'radar',
|
|||
|
|
emphasis: {
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 4
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 22 }
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
show: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
value: vj.vj,
|
|||
|
|
name: '各指标分指数.'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
myChart2.setOption(option2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showRadarNew() {
|
|||
|
|
var data = nv.nv;
|
|||
|
|
var t = nt.nt;
|
|||
|
|
var barHeight = 0;
|
|||
|
|
var chartDom2 = document.getElementById('radarnew');
|
|||
|
|
var myChart3 = echarts.init(chartDom2);
|
|||
|
|
var option3;
|
|||
|
|
option3 = {
|
|||
|
|
title: {
|
|||
|
|
text: '各指标分指数雷达图',
|
|||
|
|
subtext: '1级（优）：< 0.5；2级（合格）：0.5~1；3级（不合格）：> 1'
|
|||
|
|
},
|
|||
|
|
angleAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: t,
|
|||
|
|
interval: 1
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: true,
|
|||
|
|
confine: true,
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var id = params.dataIndex;
|
|||
|
|
return t[id] + '<br>分指数：' + data[id][1];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
radiusAxis: {},
|
|||
|
|
polar: {
|
|||
|
|
radius: 150,
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
type: 'bar',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: 'transparent'
|
|||
|
|
},
|
|||
|
|
data: data.map(function (d) {
|
|||
|
|
return d[0];
|
|||
|
|
}),
|
|||
|
|
coordinateSystem: 'polar',
|
|||
|
|
stack: '最大最小值'
|
|||
|
|
}, {
|
|||
|
|
type: 'bar',
|
|||
|
|
data: data.map(function (d) {
|
|||
|
|
return d[1] - d[0];
|
|||
|
|
}),
|
|||
|
|
coordinateSystem: 'polar',
|
|||
|
|
stack: '最大最小值'
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart3.setOption(option3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showRadarTwo(date) {
|
|||
|
|
// console.log(JSON.stringify(nv));
|
|||
|
|
// console.log(JSON.stringify(nt));
|
|||
|
|
$("#radartwo").attr("src", ext.contextPath + "/evaluation/show/showRadar.do?nv=" + encodeURI(JSON.stringify(nv)) + '&nt=' + encodeURI(JSON.stringify(nt)) + '&date=' + date);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//$('#radartwo').src = 'http://baidu.com';
|
|||
|
|
</script>
|
|||
|
|
<div class="modal fade" id="subModal">
|
|||
|
|
<div class="modal-dialog" style="width: 1200px;height: 600px;">
|
|||
|
|
<div class="modal-content" style="width: 100%;">
|
|||
|
|
<div class="modal-header">
|
|||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|||
|
|
<span aria-hidden="true">×</span></button>
|
|||
|
|
<h4 class="modal-title">指数趋势</h4>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-body" style="float: left;width: 100%;">
|
|||
|
|
<div style="width:600px; height: 600px;float: left;" id="myLine"></div>
|
|||
|
|
<!-- <div style="width:550px; height: 500px;float: left;" id="radar" hidden="hidden"></div>
|
|||
|
|
<div style="width:550px; height: 500px;float: left;" id="radarnew" hidden="hidden"></div> -->
|
|||
|
|
<div style="width:550px; height: 600px;float: left;">
|
|||
|
|
<iframe style="height:100%;width:100%;" frameborder="1" scrolling="no" id="radartwo"></iframe>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="modal-footer">
|
|||
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- /.modal-content -->
|
|||
|
|
</div>
|
|||
|
|
<!-- /.modal-dialog -->
|
|||
|
|
</div>
|