1751 lines
41 KiB
JavaScript
1751 lines
41 KiB
JavaScript
|
let myChart = echarts.init(document.getElementById("pro-total-echarts"));
|
|||
|
|
let timeOut3 = null;
|
|||
|
|
let myChart6 = echarts.init(document.getElementById("week-echarts"));
|
|||
|
|
let myChart4 = echarts.init(document.getElementById("plan-trend-echarts"));
|
|||
|
|
let myChart3 = echarts.init(
|
|||
|
|
document.getElementById("duty-total-progress-echarts")
|
|||
|
|
);
|
|||
|
|
let myChart7 = echarts.init(
|
|||
|
|
document.getElementById("duty-detail-progress-echarts")
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
|
|||
|
|
let myChart8 = echarts.init(document.getElementById("person-echarts"));
|
|||
|
|
let myChart9 = echarts.init(
|
|||
|
|
document.getElementById("no-execute-day-plan-echarts")
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
/*工程统计数量 echarts*/
|
|||
|
|
function initEchartsOne(totalNum, num, num2, num3) {
|
|||
|
|
let fontSize = "16",
|
|||
|
|
fontFamily = "Alibaba PuHuiTi R",
|
|||
|
|
fontColor = "#fff";
|
|||
|
|
let tableData = [
|
|||
|
|
{
|
|||
|
|
value: num,
|
|||
|
|
name: "今日有作业",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: num2,
|
|||
|
|
name: "今日未作业",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: num3,
|
|||
|
|
name: "停工工程",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
let option = {
|
|||
|
|
grid: {
|
|||
|
|
left: "0",
|
|||
|
|
right: "0",
|
|||
|
|
top: "-20%",
|
|||
|
|
bottom: "0",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
top: "50%",
|
|||
|
|
icon: "circle",
|
|||
|
|
itemGap: 20,
|
|||
|
|
itemHeight: 15,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
formatter: (params) => {
|
|||
|
|
if (params === "今日有作业") {
|
|||
|
|
return params + ": " + tableData[0].value;
|
|||
|
|
} else if (params === "今日未作业") {
|
|||
|
|
return params + ": " + tableData[1].value;
|
|||
|
|
} else if (params === "停工工程") {
|
|||
|
|
return params + ": " + tableData[2].value;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
color: ["#66FFFF", "#36F097", "#FD9F6B"],
|
|||
|
|
xAxis: {
|
|||
|
|
show: false,
|
|||
|
|
type: "value",
|
|||
|
|
boundaryGap: [0, 0],
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: "category",
|
|||
|
|
data: [""],
|
|||
|
|
axisLine: { show: false },
|
|||
|
|
axisTick: [
|
|||
|
|
{
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "bar",
|
|||
|
|
name: tableData[0].name,
|
|||
|
|
stack: "总量",
|
|||
|
|
barWidth: 20,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "insideLeft",
|
|||
|
|
color: "#fff",
|
|||
|
|
formatter: "{c}%",
|
|||
|
|
},
|
|||
|
|
showBackground: true,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: "#66FFFF",
|
|||
|
|
borderRadius: 0,
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
barBorderRadius: 0,
|
|||
|
|
},
|
|||
|
|
data: [((num * 100) / totalNum).toFixed(2)],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "bar",
|
|||
|
|
name: tableData[1].name,
|
|||
|
|
stack: "总量",
|
|||
|
|
barWidth: 20,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#fff",
|
|||
|
|
position: "inside",
|
|||
|
|
formatter: "{c}%",
|
|||
|
|
},
|
|||
|
|
showBackground: true,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: "#36F097",
|
|||
|
|
barBorderRadius: 0,
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#36F097",
|
|||
|
|
barBorderRadius: 0,
|
|||
|
|
},
|
|||
|
|
silent: true,
|
|||
|
|
data: [((num2 * 100) / totalNum).toFixed(2)],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "bar",
|
|||
|
|
name: tableData[2].name,
|
|||
|
|
stack: "总量",
|
|||
|
|
barWidth: 20,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#fff",
|
|||
|
|
position: "insideRight",
|
|||
|
|
formatter: "{c}%",
|
|||
|
|
},
|
|||
|
|
showBackground: true,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: "#FD9F6B",
|
|||
|
|
barBorderRadius: 0,
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "#FD9F6B",
|
|||
|
|
barBorderRadius: 0,
|
|||
|
|
},
|
|||
|
|
silent: true,
|
|||
|
|
data: [((num3 * 100) / totalNum).toFixed(2)],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 周计划 echarts */
|
|||
|
|
function initEchartsFive(twoNum, threeNum, fourNum, fiveNum) {
|
|||
|
|
let fontSize = "16",
|
|||
|
|
fontFamily = "Alibaba PuHuiTi R",
|
|||
|
|
fontColor = "#fff";
|
|||
|
|
function getParametricEquation(
|
|||
|
|
startRatio,
|
|||
|
|
endRatio,
|
|||
|
|
isSelected,
|
|||
|
|
isHovered,
|
|||
|
|
k,
|
|||
|
|
height,
|
|||
|
|
i
|
|||
|
|
) {
|
|||
|
|
// 计算
|
|||
|
|
let midRatio = (startRatio + endRatio) / 2;
|
|||
|
|
|
|||
|
|
let startRadian = startRatio * Math.PI * 2;
|
|||
|
|
let endRadian = endRatio * Math.PI * 2;
|
|||
|
|
let midRadian = midRatio * Math.PI * 2;
|
|||
|
|
|
|||
|
|
// 如果只有一个扇形，则不实现选中效果。
|
|||
|
|
if (startRatio === 0 && endRatio === 1) {
|
|||
|
|
isSelected = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
|||
|
|
k = typeof k !== "undefined" ? k : 1 / 3;
|
|||
|
|
|
|||
|
|
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
|||
|
|
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
|||
|
|
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
|||
|
|
let offsetZ = i == 1 ? 2 : 0;
|
|||
|
|
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
|||
|
|
let hoverRate = isHovered ? 1.05 : 1;
|
|||
|
|
|
|||
|
|
// 返回曲面参数方程
|
|||
|
|
return {
|
|||
|
|
u: {
|
|||
|
|
min: -Math.PI,
|
|||
|
|
max: Math.PI * 3,
|
|||
|
|
step: Math.PI / 32,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
v: {
|
|||
|
|
min: 0,
|
|||
|
|
max: Math.PI * 2,
|
|||
|
|
step: Math.PI / 20,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
x: function (u, v) {
|
|||
|
|
if (u < startRadian) {
|
|||
|
|
return (
|
|||
|
|
offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
if (u > endRadian) {
|
|||
|
|
return (
|
|||
|
|
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
y: function (u, v) {
|
|||
|
|
if (u < startRadian) {
|
|||
|
|
return (
|
|||
|
|
offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
if (u > endRadian) {
|
|||
|
|
return (
|
|||
|
|
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
z: function (u, v) {
|
|||
|
|
if (u < -Math.PI * 0.5) {
|
|||
|
|
return Math.sin(u);
|
|||
|
|
}
|
|||
|
|
if (u > Math.PI * 2.5) {
|
|||
|
|
return Math.sin(u);
|
|||
|
|
}
|
|||
|
|
return Math.sin(v) > 0 ? 1 * height : -1;
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
// 生成模拟 3D 饼图的配置项
|
|||
|
|
function getPie3D(pieData, internalDiameterRatio) {
|
|||
|
|
let series = [];
|
|||
|
|
let sumValue = 0;
|
|||
|
|
let startValue = 0;
|
|||
|
|
let endValue = 0;
|
|||
|
|
let legendData = [];
|
|||
|
|
let k =
|
|||
|
|
typeof internalDiameterRatio !== "undefined"
|
|||
|
|
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
|||
|
|
: 1 / 3;
|
|||
|
|
|
|||
|
|
// 为每一个饼图数据，生成一个 series-surface 配置
|
|||
|
|
for (let i = 0; i < pieData.length; i++) {
|
|||
|
|
sumValue += pieData[i].value;
|
|||
|
|
|
|||
|
|
let seriesItem = {
|
|||
|
|
name:
|
|||
|
|
typeof pieData[i].name === "undefined"
|
|||
|
|
? `series${i}`
|
|||
|
|
: pieData[i].name,
|
|||
|
|
type: "surface",
|
|||
|
|
parametric: true,
|
|||
|
|
wireframe: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
pieData: pieData[i],
|
|||
|
|
pieStatus: {
|
|||
|
|
selected: false,
|
|||
|
|
hovered: false,
|
|||
|
|
k: k,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (typeof pieData[i].itemStyle != "undefined") {
|
|||
|
|
let itemStyle = {};
|
|||
|
|
|
|||
|
|
typeof pieData[i].itemStyle.color != "undefined"
|
|||
|
|
? (itemStyle.color = pieData[i].itemStyle.color)
|
|||
|
|
: null;
|
|||
|
|
typeof pieData[i].itemStyle.opacity != "undefined"
|
|||
|
|
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
|||
|
|
: null;
|
|||
|
|
|
|||
|
|
seriesItem.itemStyle = itemStyle;
|
|||
|
|
}
|
|||
|
|
series.push(seriesItem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
|||
|
|
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
|||
|
|
for (let i = 0; i < series.length; i++) {
|
|||
|
|
endValue = startValue + series[i].pieData.value;
|
|||
|
|
series[i].pieData.startRatio = startValue / sumValue;
|
|||
|
|
series[i].pieData.endRatio = endValue / sumValue;
|
|||
|
|
series[i].parametricEquation = getParametricEquation(
|
|||
|
|
series[i].pieData.startRatio,
|
|||
|
|
series[i].pieData.endRatio,
|
|||
|
|
false,
|
|||
|
|
false,
|
|||
|
|
k,
|
|||
|
|
// 调整扇形高度
|
|||
|
|
i === 0 ? 10 : 10,
|
|||
|
|
i,
|
|||
|
|
series[i].pieData.value
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
startValue = endValue;
|
|||
|
|
|
|||
|
|
legendData.push(series[i].name);
|
|||
|
|
}
|
|||
|
|
return series;
|
|||
|
|
}
|
|||
|
|
// 传入数据生成 option
|
|||
|
|
const optionsData = [
|
|||
|
|
{
|
|||
|
|
name: "二级",
|
|||
|
|
value: !twoNum ? 0 : parseInt(twoNum),
|
|||
|
|
itemStyle: {
|
|||
|
|
// opacity: 0.5,
|
|||
|
|
color: "#FF5D5D",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
name: "三级",
|
|||
|
|
value: !threeNum ? 0 : parseInt(threeNum),
|
|||
|
|
itemStyle: {
|
|||
|
|
// opacity: 0.5,
|
|||
|
|
color: "#F9770F",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "四级",
|
|||
|
|
value: !fourNum ? 0 : parseInt(fourNum),
|
|||
|
|
itemStyle: {
|
|||
|
|
// opacity: 0.5,
|
|||
|
|
color: "#FFE922",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "五级",
|
|||
|
|
value: !fiveNum ? 0 : parseInt(fiveNum),
|
|||
|
|
itemStyle: {
|
|||
|
|
// opacity: 0.5,
|
|||
|
|
color: "#32F474",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
const series = getPie3D(optionsData, 0); // 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
|
|||
|
|
series.push({
|
|||
|
|
name: "pie2d",
|
|||
|
|
type: "pie",
|
|||
|
|
label: {
|
|||
|
|
opacity: 1,
|
|||
|
|
fontSize: 14,
|
|||
|
|
lineHeight: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
length: 30,
|
|||
|
|
length2: 30,
|
|||
|
|
},
|
|||
|
|
startAngle: -30, //起始角度，支持范围[0, 360]。
|
|||
|
|
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|||
|
|
radius: ["40%", "60%"],
|
|||
|
|
center: ["50%", "50%"],
|
|||
|
|
data: optionsData,
|
|||
|
|
itemStyle: {
|
|||
|
|
opacity: 0,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
|||
|
|
let option = {
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
tooltip: {
|
|||
|
|
show: true,
|
|||
|
|
},
|
|||
|
|
orient: "vertical",
|
|||
|
|
data: ["二级", "三级", "四级", "五级"],
|
|||
|
|
top: "center",
|
|||
|
|
itemGap: 14,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
itemWidth: 20,
|
|||
|
|
right: "2%",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: 14,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
animation: true,
|
|||
|
|
tooltip: {
|
|||
|
|
formatter: (params) => {
|
|||
|
|
if (
|
|||
|
|
params.seriesName !== "mouseoutSeries" &&
|
|||
|
|
params.seriesName !== "pie2d"
|
|||
|
|
) {
|
|||
|
|
return `${
|
|||
|
|
params.seriesName
|
|||
|
|
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
|||
|
|
params.color
|
|||
|
|
};"></span>${option.series[params.seriesIndex].pieData.value + "条"}`;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
backgroundColor: "rgba(0, 0, 0, 0.63)", //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
x: "center",
|
|||
|
|
top: "20",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: 22,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
backgroundColor: "transparent",
|
|||
|
|
labelLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#7BC0CB",
|
|||
|
|
},
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
length: 10,
|
|||
|
|
length2: 10,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "outside",
|
|||
|
|
formatter: "{b} \n{d}%",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: "14px",
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
xAxis3D: {
|
|||
|
|
min: -1,
|
|||
|
|
max: 1,
|
|||
|
|
},
|
|||
|
|
yAxis3D: {
|
|||
|
|
min: -1,
|
|||
|
|
max: 1,
|
|||
|
|
},
|
|||
|
|
zAxis3D: {
|
|||
|
|
min: -1,
|
|||
|
|
max: 1,
|
|||
|
|
},
|
|||
|
|
grid3D: {
|
|||
|
|
show: false,
|
|||
|
|
boxHeight: 2,
|
|||
|
|
//top: '30%',
|
|||
|
|
left: "4%",
|
|||
|
|
bottom: "50%",
|
|||
|
|
// environment: "rgba(255,255,255,0)",
|
|||
|
|
viewControl: {
|
|||
|
|
distance: 320,
|
|||
|
|
alpha: 30,
|
|||
|
|
beta: 20,
|
|||
|
|
autoRotate: true, // 自动旋转
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: series,
|
|||
|
|
};
|
|||
|
|
myChart6.setOption(option);
|
|||
|
|
myChart6.on("click", function (params) {
|
|||
|
|
// 获取被点击项的名称和数值
|
|||
|
|
var name = params.seriesName;
|
|||
|
|
// 在控制台输出被点击项的信息
|
|||
|
|
console.log(params);
|
|||
|
|
console.log(params.name);
|
|||
|
|
console.log(name);
|
|||
|
|
if (name != "pie2d") {
|
|||
|
|
openWeek(name);
|
|||
|
|
} else {
|
|||
|
|
openWeek(params.name);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart6.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 计划趋势 echarts */
|
|||
|
|
function initEchartsThree(nameList, valueList, valueList2) {
|
|||
|
|
let fontSize = "16",
|
|||
|
|
fontFamily = "Alibaba PuHuiTi R",
|
|||
|
|
fontColor = "#fff";
|
|||
|
|
const backgroundColor = "transparent";
|
|||
|
|
const color = [
|
|||
|
|
"#FF5D5D",
|
|||
|
|
"#32F474",
|
|||
|
|
"#FFE922",
|
|||
|
|
"#32F474",
|
|||
|
|
"#3DD1F9",
|
|||
|
|
"#FFAD05",
|
|||
|
|
]; //2个以上的series就需要用到color数组
|
|||
|
|
const legend = {
|
|||
|
|
orient: "horizontal",
|
|||
|
|
icon: "circle", //图例形状
|
|||
|
|
padding: 0,
|
|||
|
|
top: 5,
|
|||
|
|
right: 40,
|
|||
|
|
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: {
|
|||
|
|
//还是小圆点设置
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 4, //线条设置
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: [0, -10],
|
|||
|
|
formatter: "{c}",
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: "14px",
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
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: "15%",
|
|||
|
|
bottom: "2%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
show: true, //显示x轴+x轴label文字
|
|||
|
|
type: "category",
|
|||
|
|
boundaryGap: true, //从Y轴出发，这个false很好的
|
|||
|
|
axisLine: {
|
|||
|
|
show: true, //显示x坐标轴轴线
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#063374",
|
|||
|
|
type: "dashed",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false, //不显示x坐标1cm刻度
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: fontColor, //x轴label文字颜色
|
|||
|
|
fontSize: "12px",
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false, //不显示grid竖向分割线
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: nameList,
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisLabel: {
|
|||
|
|
color: fontColor,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#063374",
|
|||
|
|
type: "dashed",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
series: seriesData,
|
|||
|
|
};
|
|||
|
|
myChart4.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart4.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
//日计划
|
|||
|
|
function initEchartsByUser(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: "2%",
|
|||
|
|
right: "0%",
|
|||
|
|
bottom: "3%",
|
|||
|
|
top: "8%",
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart9.setOption(option, true);
|
|||
|
|
if (xAxisList.length > 4) {
|
|||
|
|
autoMove();
|
|||
|
|
myChart9.on("mousemove", stop);
|
|||
|
|
myChart9.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;
|
|||
|
|
}
|
|||
|
|
myChart9.setOption(option, true);
|
|||
|
|
}, 4000);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//停止滚动
|
|||
|
|
function stop() {
|
|||
|
|
clearInterval(timeOut3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//继续滚动
|
|||
|
|
function goMove() {
|
|||
|
|
autoMove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// echarts移入事件
|
|||
|
|
myChart9.getZr().on("mousemove", (param) => {
|
|||
|
|
let pointInPixel = [param.offsetX, param.offsetY];
|
|||
|
|
if (myChart9.containPixel("grid", pointInPixel)) {
|
|||
|
|
myChart9.getZr().setCursorStyle("pointer");
|
|||
|
|
} else {
|
|||
|
|
myChart9.getZr().setCursorStyle("default");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// echarts点击事件
|
|||
|
|
myChart9.getZr().off("click");
|
|||
|
|
myChart9.getZr().on("click", function (params) {
|
|||
|
|
let pointInPixel = [params.offsetX, params.offsetY];
|
|||
|
|
let name;
|
|||
|
|
if (myChart9.containPixel("grid", pointInPixel)) {
|
|||
|
|
let xIndex = myChart9.convertFromPixel(
|
|||
|
|
{ seriesIndex: 0 },
|
|||
|
|
pointInPixel
|
|||
|
|
)[0];
|
|||
|
|
let handleIndex = Number(xIndex);
|
|||
|
|
let op = myChart9.getOption();
|
|||
|
|
name = op.xAxis[0].data[handleIndex];
|
|||
|
|
}
|
|||
|
|
console.log(name);
|
|||
|
|
openClass(classDataType, name, '');
|
|||
|
|
});
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart9.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 日计划 核实情况
|
|||
|
|
function initEchartsEight(value) {
|
|||
|
|
let fontSize = "16",
|
|||
|
|
fontFamily = "Alibaba PuHuiTi R",
|
|||
|
|
fontColor = "#fff";
|
|||
|
|
var demoData = [
|
|||
|
|
{
|
|||
|
|
name: "",
|
|||
|
|
value: value,
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
option = {
|
|||
|
|
title: [
|
|||
|
|
{
|
|||
|
|
text: "核实情况",
|
|||
|
|
bottom: -5,
|
|||
|
|
x: "center",
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: "normal",
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "未执行计划",
|
|||
|
|
bottom: 57,
|
|||
|
|
x: "center",
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: "normal",
|
|||
|
|
fontSize: 14,
|
|||
|
|
color: "#E19146",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
backgroundColor: "transparent",
|
|||
|
|
series: (function () {
|
|||
|
|
var result = [];
|
|||
|
|
demoData.forEach(function (item) {
|
|||
|
|
result.push(
|
|||
|
|
{
|
|||
|
|
name: "背景圈",
|
|||
|
|
type: "gauge",
|
|||
|
|
radius: "120%",
|
|||
|
|
center: ["50%", "60%"],
|
|||
|
|
startAngle: 220,
|
|||
|
|
endAngle: -40,
|
|||
|
|
axisLine: {
|
|||
|
|
// 坐标轴线
|
|||
|
|
lineStyle: {
|
|||
|
|
// 属性lineStyle控制线条样式
|
|||
|
|
color: [
|
|||
|
|
[
|
|||
|
|
1,
|
|||
|
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "RGBa(49, 68, 118,1)",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgba(49, 68, 118,1)",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
width: 25,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
//分隔线样式
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
//刻度标签
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
pointer: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
//刻度样式
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
offsetCenter: [0, "0%"],
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 24,
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
formatter: function () {
|
|||
|
|
return "未执行计划";
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "刻度",
|
|||
|
|
type: "gauge",
|
|||
|
|
radius: "75%",
|
|||
|
|
center: ["50%", "60%"],
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
splitNumber: 4, //刻度数量
|
|||
|
|
startAngle: 220,
|
|||
|
|
endAngle: -40,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 1,
|
|||
|
|
color: [[1, "rgba(0,0,0,0)"]],
|
|||
|
|
},
|
|||
|
|
}, //仪表盘轴线
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: "aqua",
|
|||
|
|
distance: 24,
|
|||
|
|
}, //刻度标签。
|
|||
|
|
axisTick: {
|
|||
|
|
show: true,
|
|||
|
|
splitNumber: 20, //刻度的段落数
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
width: 1,
|
|||
|
|
},
|
|||
|
|
length: -12,
|
|||
|
|
}, //刻度样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
length: -18,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
}, //分隔线样式
|
|||
|
|
detail: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
pointer: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 最外层含中间数据
|
|||
|
|
{
|
|||
|
|
name: item.name,
|
|||
|
|
type: "gauge",
|
|||
|
|
radius: "120%",
|
|||
|
|
center: ["50%", "60%"],
|
|||
|
|
startAngle: 220,
|
|||
|
|
endAngle: -45,
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 25,
|
|||
|
|
color: [
|
|||
|
|
[
|
|||
|
|
item.value / 100,
|
|||
|
|
new echarts.graphic.LinearGradient(0, 1, 1, 0, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "rgba(34,132,206,1)",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgba(0,255,255,1)",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
],
|
|||
|
|
[1, "rgba(255,255,255,.0)"],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: 0,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: 0,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: 0,
|
|||
|
|
},
|
|||
|
|
pointer: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
show: true,
|
|||
|
|
offsetCenter: [0, "16%"],
|
|||
|
|
formatter: function (params) {
|
|||
|
|
if (item.value) {
|
|||
|
|
return item.value.toFixed(2) * 100 + "%";
|
|||
|
|
}
|
|||
|
|
return "0.0%";
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 15,
|
|||
|
|
color: "rgba(0,255,255,1)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "rgba(255, 36, 74,.3)",
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
value: item.value,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return result;
|
|||
|
|
})(),
|
|||
|
|
};
|
|||
|
|
myChart9.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart9.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 值班进度-1 */
|
|||
|
|
function initEchartsFour(num, totalNum) {
|
|||
|
|
let fontSize = "16",
|
|||
|
|
fontFamily = "Alibaba PuHuiTi R",
|
|||
|
|
fontColor = "#fff";
|
|||
|
|
let rate =
|
|||
|
|
num === 0 || totalNum === 0
|
|||
|
|
? 0
|
|||
|
|
: ((parseInt(num) * 100) / parseInt(totalNum)).toFixed(2);
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: "transparent",
|
|||
|
|
grid: {
|
|||
|
|
top: "2%",
|
|||
|
|
left: "10%",
|
|||
|
|
right: "5%",
|
|||
|
|
bottom: "2%",
|
|||
|
|
},
|
|||
|
|
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)",
|
|||
|
|
formatter: function (item) {
|
|||
|
|
return item[0].seriesName + ": " + num + "(" + rate + "%" + ")";
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
show: false,
|
|||
|
|
data: ["值班进度"],
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#0a4980",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#ADD6FF",
|
|||
|
|
fontSize: 12,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
show: false,
|
|||
|
|
type: "value",
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#0a4980",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: 12,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#ADD6FF",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "值班进度",
|
|||
|
|
type: "bar",
|
|||
|
|
barWidth: 18,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: {
|
|||
|
|
type: "linear",
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 1,
|
|||
|
|
y2: 0,
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "rgb(5,27,56)", // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgb(26 167 246)", // 100% 处的颜色
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
global: false, // 缺省为 false
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: [num],
|
|||
|
|
z: 0,
|
|||
|
|
zlevel: 0,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "insideRight",
|
|||
|
|
distance: 0,
|
|||
|
|
formatter: function (data) {
|
|||
|
|
return num + "(" + rate + "%" + ")";
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "值班进度",
|
|||
|
|
type: "bar",
|
|||
|
|
barGap: "-125%",
|
|||
|
|
data: [totalNum],
|
|||
|
|
barWidth: 27,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "right",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: "transparent",
|
|||
|
|
barBorderColor: "rgb(148,217,249)",
|
|||
|
|
barBorderWidth: 1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
z: 2,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart3.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart3.resize();
|
|||
|
|
});
|
|||
|
|
myChart3.on("click", function (params) {
|
|||
|
|
if(nowParamType==2){
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
console.log(params.seriesIndex);
|
|||
|
|
if (params.seriesIndex == 0) {
|
|||
|
|
gotoPage(1, "");
|
|||
|
|
}
|
|||
|
|
if (params.seriesIndex == 1) {
|
|||
|
|
gotoPage(0, "");
|
|||
|
|
} else {
|
|||
|
|
gotoPage("", "");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
/* 值班进度-2 */
|
|||
|
|
function initEchartsSix(userList, taskList, xsList, wzList) {
|
|||
|
|
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: ["任务总数", "已巡视数", "发现违章"],
|
|||
|
|
right: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
itemWidth: 15,
|
|||
|
|
itemHeight: 15,
|
|||
|
|
itemGap: 35,
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "3%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "3%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: "category",
|
|||
|
|
data: userList,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#063374",
|
|||
|
|
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",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "任务总数",
|
|||
|
|
type: "bar",
|
|||
|
|
data: taskList,
|
|||
|
|
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: "top",
|
|||
|
|
formatter: "{c}",
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: "14px",
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "已巡视数",
|
|||
|
|
type: "bar",
|
|||
|
|
data: xsList,
|
|||
|
|
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: "top",
|
|||
|
|
formatter: "{c}",
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: "14px",
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "发现违章",
|
|||
|
|
type: "bar",
|
|||
|
|
data: wzList,
|
|||
|
|
barWidth: 10,
|
|||
|
|
barGap: 1,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#CEFFC6",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "#18FFE3",
|
|||
|
|
},
|
|||
|
|
]),
|
|||
|
|
opacity: 1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: "top",
|
|||
|
|
formatter: "{c}",
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: "14px",
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart7.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart7.resize();
|
|||
|
|
});
|
|||
|
|
myChart7.on("click", function (params) {
|
|||
|
|
if(nowParamType==2){
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
// 在控制台输出被点击项的信息
|
|||
|
|
if (params.seriesIndex == 0) {
|
|||
|
|
gotoPage("", params.name);
|
|||
|
|
} else if (params.seriesIndex == 1) {
|
|||
|
|
gotoPage("1", params.name);
|
|||
|
|
} else if (params.seriesIndex == 2) {
|
|||
|
|
gitoWzPage("", params.name);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
function initEchartsSix2(userList, warnList, clList) {
|
|||
|
|
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: ["预警总数", "已处理数量"],
|
|||
|
|
right: 20,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
itemWidth: 15,
|
|||
|
|
itemHeight: 15,
|
|||
|
|
itemGap: 35,
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "3%",
|
|||
|
|
right: "4%",
|
|||
|
|
bottom: "3%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: "category",
|
|||
|
|
data: userList,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#063374",
|
|||
|
|
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",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "预警总数",
|
|||
|
|
type: "bar",
|
|||
|
|
data: warnList,
|
|||
|
|
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: "top",
|
|||
|
|
formatter: "{c}",
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: "14px",
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "已处理数量",
|
|||
|
|
type: "bar",
|
|||
|
|
data: clList,
|
|||
|
|
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: "top",
|
|||
|
|
formatter: "{c}",
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: "14px",
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart7.setOption(option, true);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 人员统计 */
|
|||
|
|
function initEchartsSeven(list) {
|
|||
|
|
let fontSize = "14",
|
|||
|
|
fontFamily = "Alibaba PuHuiTi R",
|
|||
|
|
fontColor = "#fff";
|
|||
|
|
let data = [];
|
|||
|
|
if (list && list.length > 0) {
|
|||
|
|
$.each(list, function (index, item) {
|
|||
|
|
data.push({
|
|||
|
|
value: item.num,
|
|||
|
|
name: item.personTypeName,
|
|||
|
|
code: item.personType,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
} 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',
|
|||
|
|
// formatter: "{b} : {c} ({d}%)"
|
|||
|
|
show: true,
|
|||
|
|
trigger: "item",
|
|||
|
|
axisPointer: {
|
|||
|
|
type: "shadow",
|
|||
|
|
},
|
|||
|
|
backgroundColor: "rgba(0, 0, 0, 0.63)", //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
formatter: "{b} : {c} ({d}%)",
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
visualMap: {
|
|||
|
|
show: false,
|
|||
|
|
min: 500,
|
|||
|
|
max: 600,
|
|||
|
|
inRange: {
|
|||
|
|
//colorLightness: [0, 1]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "人员统计",
|
|||
|
|
type: "pie",
|
|||
|
|
radius: "70%",
|
|||
|
|
center: ["50%", "50%"],
|
|||
|
|
color: [
|
|||
|
|
"#20FF51",
|
|||
|
|
"#00E0FF",
|
|||
|
|
"#e5d11f",
|
|||
|
|
"#6988F8",
|
|||
|
|
"#0E5FFF",
|
|||
|
|
"#2DE1FD",
|
|||
|
|
"#8221F1",
|
|||
|
|
],
|
|||
|
|
data: data.sort(function (a, b) {
|
|||
|
|
return b.value - a.value;
|
|||
|
|
}),
|
|||
|
|
roseType: "radius",
|
|||
|
|
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
formatter: ["{c|{c}}", "{b|{b}}"].join("\n"),
|
|||
|
|
rich: {
|
|||
|
|
c: {
|
|||
|
|
color: "rgb(241,246,104)",
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: "bold",
|
|||
|
|
lineHeight: 5,
|
|||
|
|
},
|
|||
|
|
b: {
|
|||
|
|
color: "rgb(98,137,169)",
|
|||
|
|
fontSize: 13,
|
|||
|
|
height: 40,
|
|||
|
|
color: fontColor,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
normal: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "rgb(98,137,169)",
|
|||
|
|
},
|
|||
|
|
smooth: 0.2,
|
|||
|
|
length: 10,
|
|||
|
|
length2: 20,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
shadowColor: "rgba(0, 0, 0, 0.8)",
|
|||
|
|
shadowBlur: 50,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart8.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart8.resize();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myChart8.on("click", function (params) {
|
|||
|
|
// 在控制台输出被点击项的信息
|
|||
|
|
const name = params.data.code;
|
|||
|
|
openPersonnelStatistics(name,'');
|
|||
|
|
});
|
|||
|
|
}
|