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.
620 lines
15 KiB
620 lines
15 KiB
var myChartUser = echarts.init(document.getElementById('zh-ryxxe'));
|
|
//var myChartCar = echarts.init(document.getElementById('zh-zqcl'));
|
|
var myChartLeaveCar = echarts.init(document.getElementById('zh-qjyc'));
|
|
var myChartCP = echarts.init(document.getElementById('zh-cpsd'));
|
|
var myChartKS = echarts.init(document.getElementById('zh-ryks'));
|
|
|
|
$(function () {
|
|
//chartUser();
|
|
//chartCar();
|
|
//chartAlarm();
|
|
//chartZG();
|
|
//chartCP();
|
|
//chartKS();
|
|
window.onresize = function () {
|
|
myChartUser.resize();
|
|
//myChartCar.resize();
|
|
myChartLeaveCar.resize();
|
|
myChartCP.resize();
|
|
myChartKS.resize();
|
|
};
|
|
});
|
|
|
|
var m2R2Data = [{
|
|
value: 0,
|
|
legendname: '在岗',
|
|
itemStyle: {
|
|
color: "#4da1ff"
|
|
}
|
|
},
|
|
{
|
|
value: 0,
|
|
legendname: '请休假',
|
|
itemStyle: {
|
|
color: "#ffcd31"
|
|
}
|
|
},
|
|
];
|
|
var optionUser = {
|
|
title: [{
|
|
text: 0 + '人',
|
|
subtext: '总岗数',
|
|
textStyle: {
|
|
fontSize: 40,
|
|
color: "#ff7b8c",
|
|
lineHeight: 86,
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 18,
|
|
color: '#555555',
|
|
lineHeight: 10,
|
|
},
|
|
textAlign: "center",
|
|
x: '50%',
|
|
y: '30%',
|
|
itemGap: 0,
|
|
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (parms) {
|
|
var str = parms.seriesName + "</br>" +
|
|
parms.marker + "" + parms.data.legendname + "</br>" +
|
|
"数量：" + parms.data.value + "</br>" +
|
|
"占比：" + parms.percent + "%";
|
|
return str;
|
|
}
|
|
},
|
|
legend: {
|
|
show: false,
|
|
type: "scroll",
|
|
orient: 'vertical',
|
|
left: '70%',
|
|
align: 'left',
|
|
top: 'middle',
|
|
textStyle: {
|
|
color: '#8C8C8C'
|
|
},
|
|
height: 250
|
|
},
|
|
series: [{
|
|
name: '标题',
|
|
type: 'pie',
|
|
center: ['50%', '46%'],
|
|
radius: ['67%', '76%'],
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
position: 'outter',
|
|
formatter: function (parms) {
|
|
return parms.data.legendname
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
length: 5,
|
|
length2: 3,
|
|
smooth: true,
|
|
}
|
|
},
|
|
data: m2R2Data
|
|
}]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChartUser.setOption(optionUser);
|
|
|
|
|
|
var optionLeaveCar = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
textStyle: {
|
|
color: '#808eb7',
|
|
},
|
|
data: ['请假次数', '用车次数']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#808eb7',
|
|
width: 2
|
|
}
|
|
},
|
|
boundaryGap: false,
|
|
data: ['', '', '', '', '', '', ''],
|
|
axisLabel: {
|
|
interval: 0, //设置间隔为0
|
|
textStyle: {
|
|
fontSize: 10
|
|
},
|
|
rotate: 20
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: "次数/次",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#808eb7',
|
|
width: 2
|
|
}
|
|
},
|
|
splitLine: { //分割线配置
|
|
lineStyle: {
|
|
color: "#AAAAAA56",
|
|
}
|
|
},
|
|
minInterval: 1
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '请假次数',
|
|
type: 'line',
|
|
areaStyle: {},
|
|
data: [0, 0, 0, 0, 0, 0, 0],
|
|
itemStyle: {
|
|
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0, color: '#5eaafe' // 0% 处的颜色
|
|
}, {
|
|
offset: 0.8, color: '#5eaafe' // 50% 处的颜色
|
|
}, {
|
|
offset: 1, color: '#fff' // 100% 处的颜色
|
|
}]
|
|
), //背景渐变色
|
|
lineStyle: { // 系列级个性化折线样式
|
|
width: 3,
|
|
type: 'solid',
|
|
color: "#5eaafe"
|
|
}
|
|
}
|
|
},//线条样式
|
|
symbolSize: 10
|
|
},
|
|
{
|
|
name: '用车次数',
|
|
type: 'line',
|
|
areaStyle: {},
|
|
data: [0, 0, 0, 0, 0, 0, 0],
|
|
itemStyle: {
|
|
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0, color: '#81d486' // 0% 处的颜色
|
|
}, {
|
|
offset: 0.5, color: '#81d486' // 50% 处的颜色
|
|
}, {
|
|
offset: 1, color: '#fff' // 100% 处的颜色
|
|
}]
|
|
), //背景渐变色
|
|
lineStyle: { // 系列级个性化折线样式
|
|
width: 3,
|
|
type: 'solid',
|
|
color: "#81d486"
|
|
}
|
|
}
|
|
},//线条样式
|
|
symbolSize: 10
|
|
}
|
|
]
|
|
};
|
|
|
|
myChartLeaveCar.setOption(optionLeaveCar);
|
|
|
|
//查铺统计
|
|
|
|
var optionCP = {
|
|
backgroundColor: "#ffffff",
|
|
"tooltip": {
|
|
"trigger": "axis",
|
|
"axisPointer": {
|
|
"type": "shadow",
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
|
|
},
|
|
},
|
|
"grid": {
|
|
"borderWidth": 0,
|
|
"top": "20%",
|
|
"bottom": "10%",
|
|
"left": "8%",
|
|
"right": "2%",
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
"legend": {
|
|
x: 'center',
|
|
top: '4%',
|
|
textStyle: {
|
|
color: '#555',
|
|
},
|
|
"data": ['实到', '缺席', '总数']
|
|
},
|
|
|
|
|
|
"calculable": true,
|
|
"xAxis": [{
|
|
"type": "category",
|
|
"axisLine": {
|
|
lineStyle: {
|
|
color: '#eceeef'
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"show": false
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
"splitArea": {
|
|
"show": false
|
|
},
|
|
"axisLabel": {
|
|
"interval": 0,
|
|
"textStyle": {
|
|
"fontSize": "10",
|
|
"color": "#a3adcb"
|
|
},
|
|
"rotate": 15
|
|
|
|
},
|
|
"data": [],
|
|
}],
|
|
"yAxis": [{
|
|
"type": "value",
|
|
"splitLine": {
|
|
"show": false
|
|
},
|
|
"axisLine": {
|
|
lineStyle: {
|
|
color: '#eceeef'
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
"axisLabel": {
|
|
"interval": 0,
|
|
"textStyle": {
|
|
"fontSize": "14",
|
|
"color": "#cccccc"
|
|
}
|
|
|
|
},
|
|
"splitArea": {
|
|
"show": false
|
|
},
|
|
|
|
}],
|
|
"series": [{
|
|
"name": "实到",
|
|
"type": "bar",
|
|
"stack": "总量",
|
|
"barMaxWidth": 20,
|
|
"barGap": "10%",
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "rgba(94,170,255,1)",
|
|
"label": {
|
|
"show": true,
|
|
"textStyle": {
|
|
"color": "#fff"
|
|
},
|
|
"position": "inside",
|
|
formatter: function (p) {
|
|
return p.value > 0 ? (p.value) : '';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"data": [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
],
|
|
},
|
|
|
|
{
|
|
"name": "缺席",
|
|
"type": "bar",
|
|
"stack": "总量",
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "rgba(129,212,133,1)",
|
|
"barBorderRadius": 0,
|
|
"label": {
|
|
"show": true,
|
|
"position": "inside",
|
|
formatter: function (p) {
|
|
return p.value > 0 ? (p.value) : '';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"data": [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
]
|
|
}, {
|
|
"name": "总数",
|
|
"type": "line",
|
|
symbolSize: 8,
|
|
symbol: 'circle',
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "rgba(255,195,0,1)",
|
|
"barBorderRadius": 0,
|
|
"label": {
|
|
"show": true,
|
|
"position": "top",
|
|
formatter: function (p) {
|
|
return p.value > 0 ? (p.value) : '';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"data": [
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0
|
|
]
|
|
},
|
|
]
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChartCP.setOption(optionCP);
|
|
|
|
//考试统计
|
|
|
|
dataks = [{
|
|
name: "≥90",
|
|
value: 0
|
|
},
|
|
{
|
|
name: "80~89",
|
|
value: 0
|
|
},
|
|
{
|
|
name: "70~79",
|
|
value: 0
|
|
},
|
|
{
|
|
name: "60~69",
|
|
value: 0
|
|
},
|
|
{
|
|
name: "≤59",
|
|
value: 0
|
|
}
|
|
];
|
|
arrName = getArrayValue(dataks, "name");
|
|
arrValue = getArrayValue(dataks, "value");
|
|
sumValue = eval(arrValue.join('+'));
|
|
objData = array2obj(dataks, "name");
|
|
optionData = getData(dataks);
|
|
|
|
function getArrayValue(array, key) {
|
|
var key = key || "value";
|
|
var res = [];
|
|
if (array) {
|
|
array.forEach(function (t) {
|
|
res.push(t[key]);
|
|
});
|
|
}
|
|
return res;
|
|
}
|
|
|
|
function array2obj(array, key) {
|
|
var resObj = {};
|
|
for (var i = 0; i < array.length; i++) {
|
|
resObj[array[i][key]] = array[i];
|
|
}
|
|
return resObj;
|
|
}
|
|
|
|
function getData(data) {
|
|
var res = {
|
|
series: [],
|
|
yAxis: []
|
|
};
|
|
for (let i = 0; i < data.length; i++) {
|
|
res.series.push({
|
|
name: '成绩',
|
|
type: 'pie',
|
|
clockWise: false, //顺时加载
|
|
hoverAnimation: false, //鼠标移入变大
|
|
radius: [75 - i * 18 + '%', 66 - i * 18 + '%'],
|
|
center: ["40%", "50%"],
|
|
label: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
borderWidth: 5,
|
|
},
|
|
data: [{
|
|
value: data[i].value,
|
|
name: data[i].name
|
|
}, {
|
|
value: sumValue - data[i].value,
|
|
name: '',
|
|
itemStyle: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
hoverAnimation: false
|
|
}]
|
|
});
|
|
res.series.push({
|
|
name: '',
|
|
type: 'pie',
|
|
silent: true,
|
|
z: 1,
|
|
clockWise: false, //顺时加载
|
|
hoverAnimation: false, //鼠标移入变大
|
|
radius: [75 - i * 18 + '%', 66 - i * 18 + '%'],
|
|
center: ["40%", "50%"],
|
|
label: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
borderWidth: 5,
|
|
},
|
|
data: [{
|
|
value: 7.5,
|
|
itemStyle: {
|
|
color: "#E3F0FF",
|
|
borderWidth: 0
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
hoverAnimation: false
|
|
}, {
|
|
value: 2.5,
|
|
name: '',
|
|
itemStyle: {
|
|
color: "rgba(0,0,0,0)",
|
|
borderWidth: 0
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
hoverAnimation: false
|
|
}]
|
|
});
|
|
if (sumValue==0) {
|
|
res.yAxis.push("0%");
|
|
} else {
|
|
res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
|
|
}
|
|
|
|
}
|
|
return res;
|
|
}
|
|
|
|
var optionKS = {
|
|
title: {
|
|
text: '考试成绩分布',
|
|
textStyle: {
|
|
color: '#666666'
|
|
}
|
|
},
|
|
backgroundColor: '#fff',
|
|
legend: {
|
|
show: true,
|
|
top: "top",
|
|
left: '70%',
|
|
data: arrName,
|
|
itemWidth: 30,
|
|
itemHeight: 20,
|
|
width: 50,
|
|
padding: [0, 5],
|
|
itemGap: 25,
|
|
formatter: function (name) {
|
|
return "{title|" + name + "}\n{value|" + (objData[name].value) + "人}"
|
|
},
|
|
textStyle: {
|
|
rich: {
|
|
title: {
|
|
fontSize: 10,
|
|
lineHeight: 10,
|
|
color: "rgba(0,0,0,.45)"
|
|
},
|
|
value: {
|
|
fontSize: 14,
|
|
lineHeight: 18,
|
|
color: "rgba(0,0,0,.85)"
|
|
}
|
|
}
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: "item",
|
|
formatter: "{a}<br>{b}:{c}({d}%)"
|
|
},
|
|
color: ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
|
|
grid: {
|
|
top: '10%',
|
|
bottom: '48%',
|
|
left: "40%",
|
|
containLabel: false
|
|
},
|
|
yAxis: [{
|
|
type: 'category',
|
|
inverse: true,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
inside: true,
|
|
textStyle: {
|
|
color: "#000",
|
|
fontSize: 10,
|
|
},
|
|
show: true
|
|
},
|
|
data: optionData.yAxis
|
|
}],
|
|
xAxis: [{
|
|
show: false
|
|
}],
|
|
series: optionData.series
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChartKS.setOption(optionKS);
|
|
|