You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 lines
6.8 KiB
188 lines
6.8 KiB
11 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title></title>
|
||
|
|
<script src="../../js/jquery-2.1.3.min.js"></script>
|
||
|
|
<script src="../../js/echarts.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="echarts_s" style="width: 100%; height: 100%;overflow: auto">
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
//var UID = JSON.parse(window.sessionStorage.getItem("userInfo")).UserCode;
|
||
|
|
var UID = "18999091002";
|
||
|
|
|
||
|
|
var echarts_fun = function (xAxisData, yAxisData1, title, echartsId) {
|
||
|
|
console.log(xAxisData, yAxisData1, title, echartsId);
|
||
|
|
let bgColor = "#fff";
|
||
|
|
let color = [
|
||
|
|
"#0090FF",
|
||
|
|
"#36CE9E",
|
||
|
|
"#FFC005",
|
||
|
|
"#FF515A",
|
||
|
|
"#8B5CFF",
|
||
|
|
"#00CA69"
|
||
|
|
];
|
||
|
|
const hexToRgba = (hex, opacity) => {
|
||
|
|
let rgbaColor = "";
|
||
|
|
let reg = /^#[\da-f]{6}$/i;
|
||
|
|
if (reg.test(hex)) {
|
||
|
|
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
||
|
|
"0x" + hex.slice(3, 5)
|
||
|
|
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
||
|
|
}
|
||
|
|
return rgbaColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
var echarts_xltj = echarts.init(document.getElementById(echartsId));
|
||
|
|
option = {
|
||
|
|
title: {
|
||
|
|
text: title,
|
||
|
|
top: '1%',
|
||
|
|
x: 'center',
|
||
|
|
textStyle: { color: '#2D527C', fontSize: '20', fontWeight: 'bold' },
|
||
|
|
subtextStyle: { color: '#2D527C', fontSize: '14', fontWeight: 'bold' }
|
||
|
|
},
|
||
|
|
backgroundColor: bgColor,
|
||
|
|
color: color,
|
||
|
|
legend: {
|
||
|
|
right: 10,
|
||
|
|
top: 10,
|
||
|
|
name: title
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
formatter: function (params) {
|
||
|
|
let html = '';
|
||
|
|
params.forEach(v => {
|
||
|
|
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
||
|
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
||
|
|
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
|
||
|
|
分`;
|
||
|
|
})
|
||
|
|
return html
|
||
|
|
},
|
||
|
|
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow',
|
||
|
|
shadowStyle: {
|
||
|
|
color: '#ffffff',
|
||
|
|
shadowColor: 'rgba(225,225,225,1)',
|
||
|
|
shadowBlur: 5
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: 100,
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
type: "category",
|
||
|
|
boundaryGap: false,
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}',
|
||
|
|
textStyle: {
|
||
|
|
color: "#333"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#D9D9D9"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: xAxisData
|
||
|
|
}],
|
||
|
|
yAxis: [{
|
||
|
|
type: "value",
|
||
|
|
name: '单位：分数',
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: "#666"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
nameTextStyle: {
|
||
|
|
color: "#666",
|
||
|
|
fontSize: 12,
|
||
|
|
lineHeight: 40
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
type: "dashed",
|
||
|
|
color: "#E9E9E9"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
max: 110
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
type: "line",
|
||
|
|
smooth: true,
|
||
|
|
// showSymbol: false,/
|
||
|
|
symbolSize: 8,
|
||
|
|
zlevel: 3,
|
||
|
|
lineStyle: {
|
||
|
|
normal: {
|
||
|
|
color: color[0],
|
||
|
|
shadowBlur: 3,
|
||
|
|
shadowColor: hexToRgba(color[0], 0.5),
|
||
|
|
shadowOffsetY: 8
|
||
|
|
}
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
normal: {
|
||
|
|
color: new echarts.graphic.LinearGradient(
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
1,
|
||
|
|
[{
|
||
|
|
offset: 0,
|
||
|
|
color: hexToRgba(color[0], 0.3)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: hexToRgba(color[0], 0.1)
|
||
|
|
}
|
||
|
|
],
|
||
|
|
false
|
||
|
|
),
|
||
|
|
shadowColor: hexToRgba(color[0], 0.1),
|
||
|
|
shadowBlur: 10
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: yAxisData1
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
echarts_xltj.setOption(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
type: "post",
|
||
|
|
url: "../../ashx/ZYTScoreHandler.ashx",
|
||
|
|
async: false,
|
||
|
|
data: {
|
||
|
|
Action: "GetHistoryScoreStaByUsersUid", UsersUid: UID, random: new Date().getTime()
|
||
|
|
},
|
||
|
|
dataType: "json",
|
||
|
|
success: function (res) {
|
||
|
|
console.log(res.data);
|
||
|
|
if (res.data.length > 0) {
|
||
|
|
res.data.forEach(function (obj, index, arr) {
|
||
|
|
var echarts_html = "<div id=\"echarts_"+index+"\" style=\"width: 500px; height: 300px;\"></div>";
|
||
|
|
$("#echarts_s").append(echarts_html);
|
||
|
|
echarts_fun(obj.TRAINIGDATES.split(","), obj.ACHIEVEMENTS.split(","), obj.SUBJECTNAME, "echarts_" + index);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|