1480 lines
35 KiB
JavaScript
1480 lines
35 KiB
JavaScript
let timeOut = null,
|
||
timeOut2 = null,
|
||
timeOut3 = null,
|
||
timeOut4;
|
||
let myChart3 = echarts.init(document.getElementById("echarts-one"));
|
||
let myChart4 = echarts.init(document.getElementById("echarts-two"));
|
||
let myChart7 = echarts.init(document.getElementById("echarts-five"));
|
||
let myChart8 = echarts.init(document.getElementById("echarts-six"));
|
||
let myChart9 = echarts.init(document.getElementById("plan-echarts"));
|
||
let myChart10 = echarts.init(document.getElementById("ticket-history-echarts"));
|
||
|
||
/*日计划echarts*/
|
||
function initEchartsOne(listMap) {
|
||
let nameList = [];
|
||
let dataList = [];
|
||
let dataList2 = [];
|
||
if (listMap != null && listMap.length > 0) {
|
||
$.each(listMap, function (index, item) {
|
||
nameList.push(item.cityName);
|
||
// if(isBd){
|
||
// dataList.push(item.totalNum/2);
|
||
// dataList2.push(item.executedNum/2);
|
||
// }else{
|
||
dataList.push(item.totalNum);
|
||
dataList2.push(item.executedNum);
|
||
// }
|
||
});
|
||
}
|
||
// 基于准备好的dom，初始化echarts图表
|
||
let fontSize = "14",
|
||
fontFamily = "Alibaba PuHuiTi R",
|
||
fontColor = "#fff";
|
||
option = {
|
||
backgroundColor: "transparent",
|
||
color: ["#1E3AFF", "#13D850"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
backgroundColor: "rgba(0, 0, 0, 0.63)", //设置背景颜色
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
borderColor: "rgba(255,255,255, .5)",
|
||
},
|
||
grid: {
|
||
left: "1%",
|
||
right: "3%",
|
||
bottom: "5%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: "inside",
|
||
zoomOnMouseWheel: false,
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
startValue: 0,
|
||
endValue: 5,
|
||
},
|
||
],
|
||
legend: {
|
||
show: false,
|
||
data: ["计划数", "已执行"],
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#101C4A",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: fontColor,
|
||
fontSize: fontSize,
|
||
fontFamily: fontFamily,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
data: nameList,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
min: 0,
|
||
minInterval: 1,
|
||
nameTextStyle: {
|
||
fontSize: fontSize,
|
||
color: fontColor,
|
||
align: "center",
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#063374",
|
||
type: "dashed", // dotted 虚线
|
||
},
|
||
},
|
||
splitArea: { show: false },
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
fontSize: fontSize,
|
||
fontFamily: fontFamily,
|
||
color: fontColor,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
// symbol: "none",
|
||
// showSymbol: false,
|
||
symbolSize: 8,
|
||
smooth: true, // 是否曲线
|
||
name: "计划数", // 图例对应类别
|
||
data: dataList, // 纵坐标数据
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
},
|
||
},
|
||
lineStyle: {
|
||
width: 4, //线条设置
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0, //右
|
||
y: 0, //下
|
||
x2: 0, //左
|
||
y2: 1, //上
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#1E3AFF30", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#1E3AFF10", // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "line",
|
||
smooth: true,
|
||
name: "已执行",
|
||
data: dataList2,
|
||
symbolSize: 8,
|
||
lineStyle: {
|
||
width: 4, //线条设置
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0, //右
|
||
y: 0, //下
|
||
x2: 0, //左
|
||
y2: 1, //上
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#13D85030", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#13D85010", // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart3.setOption(option, true);
|
||
myChart3.on("mousemove", stop);
|
||
myChart3.on("globalout", goMove);
|
||
autoMove();
|
||
|
||
// 自动滚动
|
||
function autoMove() {
|
||
if (nameList != null && nameList.length > 0) {
|
||
clearInterval(timeOut);
|
||
//自动滚动
|
||
timeOut = setInterval(() => {
|
||
if (
|
||
option.dataZoom[0].endValue === nameList.length ||
|
||
option.dataZoom[0].endValue > nameList.length
|
||
) {
|
||
option.dataZoom[0].endValue = 5;
|
||
option.dataZoom[0].startValue = 0;
|
||
} else {
|
||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
|
||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
|
||
}
|
||
myChart3.setOption(option);
|
||
}, 4000);
|
||
}
|
||
}
|
||
|
||
//停止滚动
|
||
function stop() {
|
||
clearInterval(timeOut);
|
||
}
|
||
|
||
//继续滚动
|
||
function goMove() {
|
||
autoMove();
|
||
}
|
||
|
||
// echarts移入事件
|
||
myChart3.getZr().on("mousemove", (param) => {
|
||
let pointInPixel = [param.offsetX, param.offsetY];
|
||
if (myChart3.containPixel("grid", pointInPixel)) {
|
||
myChart3.getZr().setCursorStyle("pointer");
|
||
} else {
|
||
myChart3.getZr().setCursorStyle("default");
|
||
}
|
||
});
|
||
|
||
myChart3.off("click").on("click", function (params) {
|
||
let buildName = params.name;
|
||
let seriesName = params.seriesName;
|
||
if(seriesName === '计划数'){
|
||
seriesName = '';
|
||
}else if(seriesName === '已执行'){
|
||
seriesName = '1';
|
||
}
|
||
openDayRisk(buildName, seriesName, dayType);
|
||
});
|
||
window.addEventListener("resize", function () {
|
||
myChart3.resize();
|
||
});
|
||
}
|
||
|
||
/*周风险echarts*/
|
||
function initEchartsTwo(nameList, twoRiskData, threeRiskData) {
|
||
let fontSize = "14",
|
||
fontFamily = "Alibaba PuHuiTi R",
|
||
fontColor = "#fff";
|
||
// 基于准备好的dom，初始化echarts图表
|
||
let xAxisList = nameList;
|
||
let data = twoRiskData;
|
||
let data2 = threeRiskData;
|
||
option = {
|
||
backgroundColor: "transparent",
|
||
color: ["#dd690b", "#ffe91f"],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
backgroundColor: "rgba(0, 0, 0, 0.63)", //设置背景颜色
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
borderColor: "rgba(255,255,255, .5)",
|
||
},
|
||
grid: {
|
||
left: "1%",
|
||
right: "3%",
|
||
bottom: "5%",
|
||
top: "8%",
|
||
containLabel: true,
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: "inside",
|
||
zoomOnMouseWheel: false,
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
startValue: 0,
|
||
endValue: 5,
|
||
},
|
||
],
|
||
legend: {
|
||
show: false,
|
||
data: ["二级", "三级"],
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#101C4A",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: fontColor,
|
||
fontSize: fontSize,
|
||
fontFamily: fontFamily,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
data: xAxisList,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
min: 0,
|
||
// minInterval: 1,
|
||
nameTextStyle: {
|
||
fontSize: fontSize,
|
||
color: fontColor,
|
||
align: "center",
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#063374",
|
||
type: "dashed", // dotted 虚线
|
||
},
|
||
},
|
||
splitArea: { show: false },
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
fontSize: fontSize,
|
||
fontFamily: fontFamily,
|
||
color: fontColor,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
// symbol: "none",
|
||
// showSymbol: false,
|
||
symbolSize: 8,
|
||
smooth: true, // 是否曲线
|
||
name: "二级", // 图例对应类别
|
||
data: data2, // 纵坐标数据
|
||
lineStyle: {
|
||
width: 4, //线条设置
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0, //右
|
||
y: 0, //下
|
||
x2: 0, //左
|
||
y2: 1, //上
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#dd690b30", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#dd690b10", // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: "line",
|
||
smooth: true,
|
||
name: "三级",
|
||
data: data,
|
||
symbolSize: 8,
|
||
lineStyle: {
|
||
width: 4, //线条设置
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
},
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0, //右
|
||
y: 0, //下
|
||
x2: 0, //左
|
||
y2: 1, //上
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "#ffe91f30", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#ffe91f10", // 100% 处的颜色
|
||
},
|
||
],
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart4.setOption(option, true);
|
||
myChart4.on("mousemove", stop);
|
||
myChart4.on("globalout", goMove);
|
||
autoMove();
|
||
|
||
// 自动滚动
|
||
function autoMove() {
|
||
if (xAxisList != null && xAxisList.length > 0) {
|
||
clearInterval(timeOut4);
|
||
//自动滚动
|
||
timeOut4 = setInterval(() => {
|
||
if (
|
||
option.dataZoom[0].endValue === xAxisList.length ||
|
||
option.dataZoom[0].endValue > xAxisList.length
|
||
) {
|
||
option.dataZoom[0].endValue = 5;
|
||
option.dataZoom[0].startValue = 0;
|
||
} else {
|
||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
|
||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
|
||
}
|
||
myChart4.setOption(option, true);
|
||
}, 4000);
|
||
}
|
||
}
|
||
|
||
//停止滚动
|
||
function stop() {
|
||
clearInterval(timeOut4);
|
||
}
|
||
|
||
//继续滚动
|
||
function goMove() {
|
||
autoMove();
|
||
}
|
||
|
||
// echarts移入事件
|
||
myChart4.getZr().on("mousemove", (param) => {
|
||
let pointInPixel = [param.offsetX, param.offsetY];
|
||
if (myChart4.containPixel("grid", pointInPixel)) {
|
||
myChart4.getZr().setCursorStyle("pointer");
|
||
} else {
|
||
myChart4.getZr().setCursorStyle("default");
|
||
}
|
||
});
|
||
|
||
myChart4.off("click").on("click", function (params) {
|
||
let name = params.name;
|
||
let seriesName = params.seriesName;
|
||
let weekRiskDate = $("#weekRiskDate").val();
|
||
openWeekRisk(weekRiskDate, seriesName, name);
|
||
});
|
||
window.addEventListener("resize", function () {
|
||
myChart4.resize();
|
||
});
|
||
}
|
||
|
||
/*站班会柱状图*/
|
||
function initEchartsFive(nameList, dataList) {
|
||
clearInterval(timeOut3);
|
||
let xAxisList = [];
|
||
let data = [];
|
||
xAxisList = nameList;
|
||
data = dataList;
|
||
let fontSize = "16";
|
||
let option = {
|
||
backgroundColor: "transparent",
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
backgroundColor: "rgba(0, 0, 0, 0.63)", //设置背景颜色
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
borderColor: "rgba(255,255,255, .5)",
|
||
},
|
||
grid: {
|
||
left: "1%",
|
||
right: "3%",
|
||
bottom: "3%",
|
||
top: "10%",
|
||
containLabel: true,
|
||
},
|
||
|
||
calculable: true,
|
||
legend: {
|
||
show: false,
|
||
icon: "rect",
|
||
// orient: 'horizontal',
|
||
itemWidth: 15,
|
||
itemHeight: 15,
|
||
textStyle: {
|
||
fontSize: 16, //字体大小
|
||
color: "#fff", //字体颜色
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
right: "3%", //距离右侧
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: "inside",
|
||
zoomOnMouseWheel: false,
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
startValue: 0,
|
||
endValue: 6,
|
||
},
|
||
],
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLabel: {
|
||
interval: 0, // 解决x轴名称过长问题
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 16,
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
//y轴网格线设置
|
||
color: "#2c2c2c",
|
||
width: 1,
|
||
},
|
||
},
|
||
data: xAxisList,
|
||
triggerEvent: true,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
// name: "单位/个",
|
||
nameGap: 8,
|
||
nameTextStyle: {
|
||
color: "#8fd5f3",
|
||
},
|
||
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
//y轴网格线设置
|
||
color: "#063374",
|
||
width: 1,
|
||
},
|
||
},
|
||
splitLine: {
|
||
//保留网格线
|
||
show: true,
|
||
lineStyle: {
|
||
//y轴网格线设置
|
||
color: "#063374",
|
||
width: 1,
|
||
type: "dashed",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: 16,
|
||
color: "#fff", //字体颜色
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
// name: nameList.length > 4 ? '地市' : '风险等级',
|
||
type: "bar",
|
||
z: 1,
|
||
barWidth: 8,
|
||
barGap: "100%",
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#1158E2",
|
||
},
|
||
// {
|
||
// offset: 0.7,
|
||
// color: barData.color[1]
|
||
// },
|
||
{
|
||
offset: 1,
|
||
color: "#74CAFF",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
myChart7.setOption(option, true);
|
||
if (xAxisList.length > 4) {
|
||
autoMove();
|
||
myChart7.on("mousemove", stop);
|
||
myChart7.on("globalout", goMove);
|
||
}
|
||
|
||
// 自动滚动
|
||
function autoMove() {
|
||
if (xAxisList != null && xAxisList.length > 0) {
|
||
clearInterval(timeOut3);
|
||
//自动滚动
|
||
timeOut3 = setInterval(() => {
|
||
if (option.dataZoom[0].endValue === xAxisList.length) {
|
||
option.dataZoom[0].endValue = 6;
|
||
option.dataZoom[0].startValue = 0;
|
||
} else {
|
||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
|
||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
|
||
}
|
||
myChart7.setOption(option, true);
|
||
}, 4000);
|
||
}
|
||
}
|
||
|
||
//停止滚动
|
||
function stop() {
|
||
clearInterval(timeOut3);
|
||
}
|
||
|
||
//继续滚动
|
||
function goMove() {
|
||
autoMove();
|
||
}
|
||
|
||
// echarts移入事件
|
||
myChart7.getZr().on("mousemove", (param) => {
|
||
let pointInPixel = [param.offsetX, param.offsetY];
|
||
if (myChart7.containPixel("grid", pointInPixel)) {
|
||
myChart7.getZr().setCursorStyle("pointer");
|
||
} else {
|
||
myChart7.getZr().setCursorStyle("default");
|
||
}
|
||
});
|
||
|
||
// echarts点击事件
|
||
myChart7.getZr().off("click");
|
||
myChart7.getZr().on("click", function (params) {
|
||
let pointInPixel = [params.offsetX, params.offsetY];
|
||
let name;
|
||
if (myChart7.containPixel("grid", pointInPixel)) {
|
||
let xIndex = myChart7.convertFromPixel(
|
||
{ seriesIndex: 0 },
|
||
pointInPixel
|
||
)[0];
|
||
let handleIndex = Number(xIndex);
|
||
let op = myChart7.getOption();
|
||
name = op.xAxis[0].data[handleIndex];
|
||
}
|
||
let classDate = $("#classDate").val();
|
||
openClass(classType, name, classDate);
|
||
});
|
||
window.addEventListener("resize", function () {
|
||
myChart7.resize();
|
||
});
|
||
}
|
||
|
||
/*人员统计echarts图*/
|
||
function initEchartsSix(list) {
|
||
let fontSize = "16";
|
||
let data = [];
|
||
let totalNum = 0;
|
||
if (list && list.length > 0) {
|
||
$.each(list, function (index, item) {
|
||
data.push({
|
||
value: item.num,
|
||
name: item.personTypeName,
|
||
code: item.personType,
|
||
});
|
||
totalNum += item.num;
|
||
});
|
||
} else {
|
||
data = [
|
||
{ value: 0, name: "班组负责人", code: "0900101" },
|
||
{ value: 0, name: "班组安全员", code: "0900102" },
|
||
{ value: 0, name: "班组技术员", code: "0900103" },
|
||
{ value: 0, name: "副班长", code: "0900104" },
|
||
{ value: 0, name: "特种作业人员", code: "0900106" },
|
||
{ value: 0, name: "一般作业人员", code: "0900107" },
|
||
{ value: 0, name: "其他技术人员", code: "0900108" },
|
||
];
|
||
}
|
||
let option = {
|
||
backgroundColor: "transparent",
|
||
tooltip: {
|
||
trigger: "item",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
backgroundColor: "rgba(0, 0, 0, 0.63)", //设置背景颜色
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
borderColor: "rgba(255,255,255, .5)",
|
||
},
|
||
color: [
|
||
"#20FF51",
|
||
"#00E0FF",
|
||
"#e5d11f",
|
||
"#6988F8",
|
||
"#0E5FFF",
|
||
"#2DE1FD",
|
||
"#8221F1",
|
||
],
|
||
title: [
|
||
{
|
||
left: "85%",
|
||
top: "3%",
|
||
textAlign: "center",
|
||
text: "{a|" + totalNum + "}{c|人}",
|
||
textStyle: {
|
||
fontSize: 14,
|
||
rich: {
|
||
a: {
|
||
fontSize: 16,
|
||
color: "#fff",
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
c: {
|
||
fontSize: 16,
|
||
color: "#fff",
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
left: "52%",
|
||
top: "0%",
|
||
subtext: "当日站班会人数：",
|
||
subtextStyle: {
|
||
fontSize: 16,
|
||
color: ["#fff"],
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
show: true,
|
||
right: "5%",
|
||
top: "middle",
|
||
type: "scroll",
|
||
orient: "vertical",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: fontSize,
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
itemWidth: 15,
|
||
formatter: function (name) {
|
||
for (let i = 0; i < data.length; i++) {
|
||
if (data[i].name === name) {
|
||
return name + "：" + data[i].value + "人";
|
||
}
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "人员统计",
|
||
type: "pie",
|
||
clockwise: false, //饼图的扇区是否是顺时针排布
|
||
minAngle: 20, //最小的扇区角度（0 ~ 360）
|
||
center: ["28%", "50%"], //饼图的中心（圆心）坐标
|
||
radius: [54, 96], //饼图的半径
|
||
avoidLabelOverlap: true, ////是否启用防止标签重叠
|
||
itemStyle: {
|
||
//图形样式
|
||
normal: {
|
||
borderColor: "#1e2239",
|
||
borderWidth: 1.5,
|
||
},
|
||
},
|
||
label: {
|
||
//标签的位置
|
||
normal: {
|
||
show: true,
|
||
position: "inside", //标签的位置
|
||
formatter: "{d}%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontFamily: "Alibaba PuHuiTi R",
|
||
},
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
textStyle: {
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
},
|
||
data: data,
|
||
},
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
clockwise: false,
|
||
silent: true,
|
||
minAngle: 20, //最小的扇区角度（0 ~ 360）
|
||
center: ["28%", "50%"], //饼图的中心（圆心）坐标
|
||
radius: [0, 49], //饼图的半径
|
||
itemStyle: {
|
||
//图形样式
|
||
normal: {
|
||
borderColor: "#1e2239",
|
||
borderWidth: 1.5,
|
||
opacity: 0.21,
|
||
},
|
||
},
|
||
label: {
|
||
//标签的位置
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
myChart8.setOption(option, true);
|
||
myChart8.off("click").on("click", function (params) {
|
||
let personnelType = params.data.code;
|
||
openPersonnelStatistics(personnelType);
|
||
});
|
||
window.addEventListener("resize", function () {
|
||
myChart8.resize();
|
||
});
|
||
}
|
||
|
||
/* 周风险-历史记录 echarts */
|
||
function initEchartsNine(nameList, valueList, valueList2) {
|
||
let fontSize = "14",
|
||
fontFamily = "Alibaba PuHuiTi R",
|
||
fontColor = "#fff";
|
||
let rawData = [];
|
||
const color = [
|
||
"#FF5D6D",
|
||
"#F9770F",
|
||
"#FFE922",
|
||
"#32F474",
|
||
"#3DD1F9",
|
||
"#FFAD05",
|
||
]; //2个以上的series就需要用到color数组
|
||
$.each(nameList, function (index, item) {
|
||
let childData = [];
|
||
childData.push(item);
|
||
childData.push(valueList[index]);
|
||
childData.push(valueList2[index]);
|
||
rawData.push(childData);
|
||
});
|
||
rawData = rawData.reverse();
|
||
function calculateMA(type, data) {
|
||
let result = [];
|
||
for (var i = 0, len = data.length; i < len; i++) {
|
||
if (type == 1) {
|
||
result.push(data[i][0]);
|
||
} else if (type == 2) {
|
||
result.push(data[i][1]);
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
let dates = rawData.map(function (item) {
|
||
return item[0];
|
||
});
|
||
|
||
let data = rawData.map(function (item) {
|
||
return [+item[1], +item[2]];
|
||
});
|
||
let option = {
|
||
backgroundColor: "transparent",
|
||
color: color,
|
||
legend: {
|
||
data: ["二级", "三级"],
|
||
inactiveColor: "#777",
|
||
right: 5,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontFamily: fontFamily,
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
grid: {
|
||
left: "1%",
|
||
right: "1%",
|
||
top: "20%",
|
||
bottom: "2%",
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
animation: false,
|
||
type: "cross",
|
||
lineStyle: {
|
||
color: "#376df4",
|
||
width: 2,
|
||
opacity: 1,
|
||
},
|
||
},
|
||
backgroundColor: "rgba(0, 0, 0, 0.63)", //设置背景颜色
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
fontSize: fontSize,
|
||
},
|
||
borderColor: "rgba(255,255,255, .5)",
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: "category",
|
||
data: dates,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#8392A5",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
fontSize: fontSize,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#063374",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
animation: false,
|
||
series: [
|
||
{
|
||
name: "二级",
|
||
type: "line",
|
||
data: calculateMA(1, data),
|
||
smooth: true,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "三级",
|
||
type: "line",
|
||
data: calculateMA(2, data),
|
||
smooth: true,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart9.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart9.resize();
|
||
});
|
||
}
|
||
|
||
/* 日风险-历史记录 echarts */
|
||
function initEchartsTen(nameList, valueList, valueList2) {
|
||
let fontSize = "14",
|
||
fontFamily = "Alibaba PuHuiTi R",
|
||
fontColor = "#fff";
|
||
let rawData = [];
|
||
const color = ["#3DD1F9", "#32F474", "#FFAD05"]; //2个以上的series就需要用到color数组
|
||
$.each(nameList, function (index, item) {
|
||
let childData = [];
|
||
childData.push(item);
|
||
childData.push(valueList[index]);
|
||
childData.push(valueList2[index]);
|
||
rawData.push(childData);
|
||
});
|
||
rawData = rawData.reverse();
|
||
function calculateMA(type, data) {
|
||
let result = [];
|
||
for (var i = 0, len = data.length; i < len; i++) {
|
||
if (type == 1) {
|
||
result.push(data[i][0]);
|
||
} else if (type == 2) {
|
||
result.push(data[i][1]);
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
let dates = rawData.map(function (item) {
|
||
return item[0];
|
||
});
|
||
|
||
let data = rawData.map(function (item) {
|
||
return [+item[1], +item[2]];
|
||
});
|
||
let option = {
|
||
backgroundColor: "transparent",
|
||
color: color,
|
||
legend: {
|
||
data: ["计划数", "已执行"],
|
||
inactiveColor: "#777",
|
||
right: 5,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontFamily: fontFamily,
|
||
},
|
||
},
|
||
grid: {
|
||
left: "1%",
|
||
right: "1%",
|
||
top: "20%",
|
||
bottom: "2%",
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
animation: false,
|
||
type: "cross",
|
||
lineStyle: {
|
||
color: "#376df4",
|
||
width: 2,
|
||
opacity: 1,
|
||
},
|
||
},
|
||
backgroundColor: "rgba(0, 0, 0, 0.63)", //设置背景颜色
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
fontSize: fontSize,
|
||
},
|
||
borderColor: "rgba(255,255,255, .5)",
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: "category",
|
||
data: dates,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#8392A5",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
fontSize: fontSize,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#063374",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
},
|
||
animation: false,
|
||
series: [
|
||
{
|
||
name: "计划数",
|
||
type: "line",
|
||
data: calculateMA(1, data),
|
||
smooth: true,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "已执行",
|
||
type: "line",
|
||
data: calculateMA(2, data),
|
||
smooth: true,
|
||
showSymbol: false,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
/* const backgroundColor = 'transparent';
|
||
const color = ['#3DD1F9', '#32F474', '#FFAD05']; //2个以上的series就需要用到color数组
|
||
const legend = {
|
||
orient: 'horizontal',
|
||
icon: 'circle', //图例形状
|
||
padding: 0,
|
||
top: 2,
|
||
right: 5,
|
||
itemWidth: 14, //小圆点宽度
|
||
itemHeight: 14, // 小圆点高度
|
||
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: '#ffffff',
|
||
fontFamily: fontFamily
|
||
},
|
||
};
|
||
const tooltip = {
|
||
show: true,
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
backgroundColor: 'rgba(0, 0, 0, 0.63)', //设置背景颜色
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily
|
||
},
|
||
borderColor: "rgba(255,255,255, .5)",
|
||
};
|
||
let seriesData = [
|
||
{ name: '计划数', data: valueList },
|
||
{ name: '已执行', data: valueList2 }
|
||
];
|
||
const commonConfigFn = (index) => {
|
||
return {
|
||
type: 'line',
|
||
smooth: true,
|
||
symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
|
||
symbolSize: 8, //小圆点大小
|
||
itemStyle: {
|
||
//还是小圆点设置
|
||
},
|
||
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: [-2, -13],
|
||
formatter: '{c}',
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontSize: '13px',
|
||
fontFamily: fontFamily
|
||
}
|
||
}
|
||
},
|
||
lineStyle: {
|
||
width: 2, //线条设置
|
||
|
||
},
|
||
|
||
areaStyle: {
|
||
//填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
|
||
opacity: 0.2,
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: color[index], // 上处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'transparent', // 下处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
};
|
||
};
|
||
|
||
seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
|
||
let option = {
|
||
backgroundColor,
|
||
color,
|
||
tooltip,
|
||
legend,
|
||
grid: {
|
||
left: '1%',
|
||
right: '1%',
|
||
top: '20%',
|
||
bottom: '2%',
|
||
containLabel: true
|
||
},
|
||
dataZoom: [{
|
||
type: 'inside',
|
||
zoomOnMouseWheel: false,
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
startValue: 0,
|
||
endValue: 20,
|
||
},],
|
||
xAxis: {
|
||
show: false, //显示x轴+x轴label文字
|
||
type: 'category',
|
||
boundaryGap: true, //从Y轴出发，这个false很好的
|
||
axisLine: {
|
||
show: true, //显示x坐标轴轴线
|
||
lineStyle: {
|
||
color: '#101C4A',
|
||
// type: 'dashed'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false, //不显示x坐标1cm刻度
|
||
},
|
||
axisLabel: {
|
||
color: fontColor, //x轴label文字颜色
|
||
fontFamily: fontFamily,
|
||
fontSize: fontSize
|
||
},
|
||
splitLine: {
|
||
show: false, //不显示grid竖向分割线
|
||
},
|
||
|
||
data: nameList,
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
fontSize: fontSize
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#063374',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
},
|
||
|
||
series: seriesData,
|
||
}; */
|
||
myChart9.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart9.resize();
|
||
});
|
||
}
|
||
|
||
/* 作业票-历史记录 */
|
||
function initEchartsEleven(nameList, valueList, valueList2) {
|
||
let fontSize = "14",
|
||
fontFamily = "Alibaba PuHuiTi R",
|
||
fontColor = "#fff";
|
||
let option = {
|
||
backgroundColor: "transparent",
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
backgroundColor: "rgba(0, 0, 0, 0.63)", //设置背景颜色
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontFamily: fontFamily,
|
||
},
|
||
borderColor: "rgba(255,255,255, .5)",
|
||
},
|
||
legend: {
|
||
// icon: 'circle',
|
||
|
||
data: ["A票", "B票"],
|
||
right: 20,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: fontSize,
|
||
fontFamily: fontFamily,
|
||
},
|
||
itemWidth: 20,
|
||
itemHeight: 15,
|
||
itemGap: 10,
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
top: "18%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: nameList,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#101C4A",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0, // 强制显示所有标签
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontFamily: fontFamily,
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
width: 1,
|
||
type: "solid",
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#063374",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
interval: 0, // 强制显示所有标签
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontFamily: fontFamily,
|
||
fontSize: fontSize,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "A票",
|
||
type: "bar",
|
||
data: valueList,
|
||
barWidth: 10, //柱子宽度
|
||
barGap: 1, //柱子之间间距
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#59A5FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#36EBCA",
|
||
},
|
||
]),
|
||
opacity: 1,
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: [-2, -13],
|
||
formatter: "{c}",
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontSize: "13px",
|
||
fontFamily: fontFamily,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
name: "B票",
|
||
type: "bar",
|
||
data: valueList2,
|
||
barWidth: 10,
|
||
barGap: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#FFFB99",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#A4FFFA",
|
||
},
|
||
]),
|
||
opacity: 1,
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: [-2, -13],
|
||
formatter: "{c}",
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontSize: "13px",
|
||
fontFamily: fontFamily,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart10.setOption(option, true);
|
||
window.addEventListener("resize", function () {
|
||
myChart10.resize();
|
||
});
|
||
}
|