first commit
This commit is contained in:
260
WebRoot/jsp/evaluation/showline.jsp
Normal file
260
WebRoot/jsp/evaluation/showline.jsp
Normal file
@ -0,0 +1,260 @@
|
||||
<%@ 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>
|
||||
Reference in New Issue
Block a user