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();
|
|||
|
|
});
|
|||
|
|
}
|