1391 lines
41 KiB
Plaintext
1391 lines
41 KiB
Plaintext
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)
|
||
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: '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: 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
|
||
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(all, obj) {
|
||
let fontSize = '16';
|
||
let data = [
|
||
{ value: obj[0].bzgg, name: '班组骨干' },
|
||
{ value: obj[1].ttzy, name: '特种作业' },
|
||
{ value: obj[2].ptzy, name: '普通作业' }
|
||
];
|
||
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"],
|
||
title: [
|
||
{
|
||
left: "87%",
|
||
top: "22%",
|
||
textAlign: "center",
|
||
text: "{a|" + all + "}{c|人}",
|
||
textStyle: {
|
||
fontSize: 14,
|
||
rich: {
|
||
a: {
|
||
fontSize: 16,
|
||
color: "#fff",
|
||
fontFamily: 'Alibaba PuHuiTi R'
|
||
},
|
||
c: {
|
||
fontSize: 16,
|
||
color: "#fff",
|
||
fontFamily: 'Alibaba PuHuiTi R'
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
left: "54%",
|
||
top: "18%",
|
||
subtext: "当日站班会人数：",
|
||
subtextStyle: {
|
||
fontSize: 16,
|
||
color: ["#fff"],
|
||
fontFamily: 'Alibaba PuHuiTi R'
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
show: true,
|
||
right: '10%',
|
||
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.name;
|
||
console.log(personnelType)
|
||
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();
|
||
});
|
||
} |