bonus
/
hb_zhgd_screen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hb_zhgd_screen/js/pages/dataAnalysisOctober/projectManagement.js

1406 lines
40 KiB
JavaScript
Raw Normal View History

数据分析-
2025-10-21 13:38:20 +08:00
let table, layer, form, laydate;
接口调试
2025-10-18 16:58:04 +08:00
let fontSize = "14",
fontFamily = "Alibaba PuHuiTi R",
fontColor = "#fff";
数据分析-
2025-10-17 14:57:09 +08:00
数据分析-
2025-10-21 13:38:20 +08:00
layui.use(["layer", "table", "form", "laydate"], function () {
数据分析-
2025-10-17 14:57:09 +08:00
layer = layui.layer;
table = layui.table;
form = layui.form;
数据分析-
2025-10-21 13:38:20 +08:00
laydate = layui.laydate;
laydate.render({
elem: "#ID-laydate-rangeLinked",
range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
});
数据分析-
2025-10-17 14:57:09 +08:00
数据分析-
2025-10-27 19:10:17 +08:00
$("#ID-laydate-start-date-1").val(getOneMonthAgo())
数据分析-
2025-10-21 13:38:20 +08:00
$("#ID-laydate-end-date-1").val(getNowTime())
数据分析-
2025-10-17 14:57:09 +08:00
数据分析-
2025-10-21 13:38:20 +08:00
let startTime = "";
let endTime = "";
if ($("#ID-laydate-start-date-1").val() != "") {
startTime = $("#ID-laydate-start-date-1").val();
endTime = $("#ID-laydate-end-date-1").val();
} else {
startTime = "";
endTime = "";
}
数据分析-
2025-10-17 14:57:09 +08:00
数据分析-
2025-10-21 13:38:20 +08:00
initData(startTime , endTime);
数据分析-
2025-10-17 14:57:09 +08:00
});
数据分析-
2025-10-21 13:38:20 +08:00
function query() {
let startTime = "";
let endTime = "";
if ($("#ID-laydate-start-date-1").val() != "") {
startTime = $("#ID-laydate-start-date-1").val();
endTime = $("#ID-laydate-end-date-1").val();
} else {
startTime = "";
endTime = "";
}
initData(startTime, endTime);
数据分析-
2025-10-17 14:57:09 +08:00
}
接口调试
2025-10-18 16:58:04 +08:00
// 获取数据
数据分析-
2025-10-21 13:38:20 +08:00
function initData(startTime, endTime) {
接口调试
2025-10-18 16:58:04 +08:00
const url = commonUrl + "screen/projectData/selectProjectData";
ajaxRequest(
url,
"get",
{
数据分析-
2025-10-21 13:38:20 +08:00
startTime: startTime,
endTime: endTime,
接口调试
2025-10-18 16:58:04 +08:00
},
true,
function () {},
function (result) {
console.log(result, "数据");
const data = result.data;
let projectProgress = "";
let projectCost = "";
let projectRisk = [];
let projectDetail = {};
let electrical = [];
let civilEngineering = [];
let projectCostList = [];
let todayRisk = "";
for (const key in data) {
switch (key) {
case "当前工程进度":
projectProgress = data[key];
break;
case "当前成本投入":
projectCost = data[key];
break;
case "今日风险":
todayRisk = data[key];
break;
case "项目风险":
projectRisk = data[key];
break;
case "项目情况详情":
projectDetail = data[key];
break;
case "项目成本":
projectCostList = data[key];
break;
case "已销号风险":
$("#accountTerminatedRisk").text(data[key]);
break;
case "剩余风险":
$("#remainingRisk").text(data[key]);
break;
case "剩余二级及以上风险":
$("#remainingSecondaryRisk").text(data[key]);
break;
}
}
for (const key in projectDetail) {
switch (key) {
case "变电电气专业":
electrical = projectDetail[key];
break;
case "变电土建专业":
civilEngineering = projectDetail[key];
break;
}
}
initProjectProgress(projectProgress);
initProjectCost(projectCost);
initProjectRisk(todayRisk);
initCivilEngineering(civilEngineering);
initElectrical(electrical);
initItemCost(projectCostList);
initTotalRisk(projectRisk);
},
function (xhr) {
// error(xhr);
}
);
}
数据分析-
2025-10-21 13:38:20 +08:00
接口调试
2025-10-18 16:58:04 +08:00
function initProjectProgress(projectProgress) {
const a = projectProgress.split("%")[0] * 1;
const b = 100 - a;
数据分析-
2025-10-17 14:57:09 +08:00
const myChart = echarts.init(document.getElementById("projectProgress"));
const option = {
title: {
接口调试
2025-10-18 16:58:04 +08:00
text: "当前工程进度",
left: "48%",
top: "30%",
数据分析-
2025-10-17 14:57:09 +08:00
textStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#fff",
数据分析-
2025-10-17 14:57:09 +08:00
fontSize: 15,
接口调试
2025-10-18 16:58:04 +08:00
fontWeight: "normal",
},
数据分析-
2025-10-17 14:57:09 +08:00
},
graphic: {
接口调试
2025-10-18 16:58:04 +08:00
type: "text",
left: "50%",
top: "50%",
数据分析-
2025-10-17 14:57:09 +08:00
style: {
接口调试
2025-10-18 16:58:04 +08:00
text: projectProgress,
textAlign: "center",
fill: "#79FFFF",
数据分析-
2025-10-17 14:57:09 +08:00
fontSize: 24,
接口调试
2025-10-18 16:58:04 +08:00
},
数据分析-
2025-10-17 14:57:09 +08:00
},
series: [
{
接口调试
2025-10-18 16:58:04 +08:00
type: "pie",
radius: ["25%", "50%"],
center: ["30%", "50%"],
数据分析-
2025-10-17 14:57:09 +08:00
startAngle: 90,
hoverAnimation: false,
label: {
接口调试
2025-10-18 16:58:04 +08:00
show: false,
数据分析-
2025-10-17 14:57:09 +08:00
},
labelLine: {
接口调试
2025-10-18 16:58:04 +08:00
show: false,
数据分析-
2025-10-17 14:57:09 +08:00
},
data: [
{
接口调试
2025-10-18 16:58:04 +08:00
value: a,
数据分析-
2025-10-17 14:57:09 +08:00
itemStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#3BE6E6",
},
{
offset: 1,
color: "#FFFFFF",
},
],
false
),
},
数据分析-
2025-10-17 14:57:09 +08:00
},
{
接口调试
2025-10-18 16:58:04 +08:00
value: b,
数据分析-
2025-10-17 14:57:09 +08:00
itemStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "rgba(8, 220, 224, 0.1)",
},
},
],
},
],
数据分析-
2025-10-17 14:57:09 +08:00
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function getProjectCost() {
initProjectCost();
}
接口调试
2025-10-18 16:58:04 +08:00
function initProjectCost(projectCost) {
const b = 100 - projectCost;
数据分析-
2025-10-17 14:57:09 +08:00
const myChart = echarts.init(document.getElementById("projectCost"));
const option = {
title: {
接口调试
2025-10-18 16:58:04 +08:00
text: "当前成本投入",
left: "48%",
top: "30%",
数据分析-
2025-10-17 14:57:09 +08:00
textStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#fff",
数据分析-
2025-10-17 14:57:09 +08:00
fontSize: 15,
接口调试
2025-10-18 16:58:04 +08:00
fontWeight: "normal",
},
数据分析-
2025-10-17 14:57:09 +08:00
},
graphic: {
接口调试
2025-10-18 16:58:04 +08:00
type: "text",
left: "50%",
top: "50%",
数据分析-
2025-10-17 14:57:09 +08:00
style: {
接口调试
2025-10-18 16:58:04 +08:00
text: projectCost + "%",
textAlign: "center",
fill: "#79FFFF",
数据分析-
2025-10-17 14:57:09 +08:00
fontSize: 24,
接口调试
2025-10-18 16:58:04 +08:00
},
数据分析-
2025-10-17 14:57:09 +08:00
},
series: [
{
接口调试
2025-10-18 16:58:04 +08:00
type: "pie",
radius: ["25%", "50%"],
center: ["30%", "50%"],
数据分析-
2025-10-17 14:57:09 +08:00
startAngle: 90,
hoverAnimation: false,
label: {
接口调试
2025-10-18 16:58:04 +08:00
show: false,
数据分析-
2025-10-17 14:57:09 +08:00
},
labelLine: {
接口调试
2025-10-18 16:58:04 +08:00
show: false,
数据分析-
2025-10-17 14:57:09 +08:00
},
data: [
{
接口调试
2025-10-18 16:58:04 +08:00
value: projectCost,
数据分析-
2025-10-17 14:57:09 +08:00
itemStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#3BE6E6",
},
{
offset: 1,
color: "#FFFFFF",
},
],
false
),
},
数据分析-
2025-10-17 14:57:09 +08:00
},
{
接口调试
2025-10-18 16:58:04 +08:00
value: b,
数据分析-
2025-10-17 14:57:09 +08:00
itemStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "rgba(8, 220, 224, 0.1)",
},
},
],
},
],
数据分析-
2025-10-17 14:57:09 +08:00
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
接口调试
2025-10-18 16:58:04 +08:00
function getProjectRisk() {
数据分析-
2025-10-17 14:57:09 +08:00
initProjectRisk();
}
接口调试
2025-10-18 16:58:04 +08:00
// 随机生成一个颜色
function getRandomColor() {
return "#" + Math.floor(Math.random() * 16777215).toString(16);
}
function initProjectRisk(projectRisk) {
$(".big-number").text(
projectRisk.filter((item) => item.riskLevel == 0)[0].num
);
const level = {
1: "一级风险",
2: "二级风险",
3: "三级风险",
4: "四级风险",
5: "五级风险",
};
const data_1 = projectRisk
.filter((item) => item.riskLevel != 0)
.map((item) => {
return {
value: item.num,
name: level[item.riskLevel],
itemStyle: {
color: getRandomColor(),
},
};
});
console.log(data_1, "data_1");
数据分析-
2025-10-17 14:57:09 +08:00
const myChart = echarts.init(document.getElementById("projectRisk"));
const option = {
tooltip: {
trigger: "item",
接口调试
2025-10-18 16:58:04 +08:00
formatter: "{b}: {c}个 ({d}%)",
数据分析-
2025-10-17 14:57:09 +08:00
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
},
legend: {
orient: "vertical",
right: "10%",
itemGap: 12,
itemWidth: 20,
itemHeight: 8,
textStyle: {
color: "#fff",
fontSize: 14,
rich: {
name: {
width: 80,
color: "#fff",
},
value: {
width: 60,
align: "right",
color: "#79FFFF",
fontSize: 16,
fontWeight: "bold",
},
},
},
formatter: (name) => {
接口调试
2025-10-18 16:58:04 +08:00
const data = option.series[0].data;
const item = data.find((d) => d.name === name);
const percent = item ? item.value : 0;
return `{name|${name}} {value|${percent}}`;
数据分析-
2025-10-17 14:57:09 +08:00
},
},
series: [
{
name: "用电统计",
type: "pie",
roseType: "radius",
接口调试
2025-10-18 16:58:04 +08:00
radius: [0, "70%"],
数据分析-
2025-10-17 14:57:09 +08:00
center: ["25%", "45%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: "rgba(0, 0, 0, 0.3)",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
itemStyle: {
shadowBlur: 20,
shadowOffsetX: 0,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
labelLine: {
show: false,
},
接口调试
2025-10-18 16:58:04 +08:00
data: data_1,
// data: [
// // {
// // value: 60,
// // name: "二级风险",
// // itemStyle: {
// // color: "#75F7EC",
// // },
// // },
// // {
// // value: 60,
// // name: "三级风险",
// // itemStyle: {
// // color: "#75F791",
// // },
// // },
// // {
// // value: 26,
// // name: "四级风险",
// // itemStyle: {
// // color: "#00C3F2",
// // },
// // },
// // {
// // value: 14,
// // name: "五级风险",
// // itemStyle: {
// // color: "#EB846A",
// // },
// // },
// ],
数据分析-
2025-10-17 14:57:09 +08:00
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function getCivilEngineering() {
接口调试
2025-10-18 16:58:04 +08:00
let xLabel = [
"xxxx-xx-01",
"xxxx-xx-02",
"xxxx-xx-03",
"xxxx-xx-04",
"xxxx-xx-05",
"xxxx-xx-06",
"xxxx-xx-07",
"xxxx-xx-08",
"xxxx-xx-09",
"xxxx-xx-10",
"xxxx-xx-11",
"xxxx-xx-12",
];
let expenditureData = [
"12",
"15",
"4",
"8",
"13",
"6",
"10",
"11",
"5",
"12",
"10",
"15",
];
let incomeData = [
"4",
"5",
"5",
"5",
"5",
"4",
"3",
"5",
"3",
"16",
"5",
"18",
];
initCivilEngineering(xLabel, expenditureData, incomeData);
数据分析-
2025-10-17 14:57:09 +08:00
}
接口调试
2025-10-18 16:58:04 +08:00
function initCivilEngineering(date) {
const xLabel = date.map((item) => item.date);
const expenditureData = date.map((item) => item.plannedCount);
const incomeData = date.map((item) => item.actualCount);
数据分析-
2025-10-17 14:57:09 +08:00
const leftChart = echarts.init(document.getElementById("civilEngineering"));
接口调试
2025-10-18 16:58:04 +08:00
const option = {
数据分析-
2025-10-17 14:57:09 +08:00
title: {
接口调试
2025-10-18 16:58:04 +08:00
text: "土建专业",
数据分析-
2025-10-17 14:57:09 +08:00
textStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#ffffff",
数据分析-
2025-10-17 14:57:09 +08:00
fontSize: fontSize,
接口调试
2025-10-18 16:58:04 +08:00
fontFamily: fontFamily,
数据分析-
2025-10-17 14:57:09 +08:00
},
left: 5,
接口调试
2025-10-18 16:58:04 +08:00
top: 5,
数据分析-
2025-10-17 14:57:09 +08:00
},
tooltip: {
接口调试
2025-10-18 16:58:04 +08:00
show: true,
trigger: "axis",
数据分析-
2025-10-17 14:57:09 +08:00
axisPointer: {
接口调试
2025-10-18 16:58:04 +08:00
type: "shadow",
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
borderColor: "rgba(255,255,255,.3)",
backgroundColor: "rgba(19,51,55,.6)",
数据分析-
2025-10-17 14:57:09 +08:00
textStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "white", //设置文字颜色
数据分析-
2025-10-17 14:57:09 +08:00
},
borderWidth: 1,
padding: 10,
},
legend: {
接口调试
2025-10-18 16:58:04 +08:00
show: true,
top: "5%",
right: "4%",
textStyle: {
color: "#ffffff",
},
数据分析-
2025-10-17 14:57:09 +08:00
},
grid: {
接口调试
2025-10-18 16:58:04 +08:00
top: "25%",
left: "6%",
right: "4%",
bottom: "20%",
数据分析-
2025-10-17 14:57:09 +08:00
},
xAxis: [
{
接口调试
2025-10-18 16:58:04 +08:00
type: "category",
数据分析-
2025-10-17 14:57:09 +08:00
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#5A6E71",
数据分析-
2025-10-17 14:57:09 +08:00
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: fontColor,
fontSize: fontSize,
接口调试
2025-10-18 16:58:04 +08:00
fontFamily: fontFamily,
数据分析-
2025-10-17 14:57:09 +08:00
},
},
splitLine: {
show: false,
lineStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#233653",
数据分析-
2025-10-17 14:57:09 +08:00
},
},
axisTick: {
show: true,
},
data: xLabel,
},
],
接口调试
2025-10-18 16:58:04 +08:00
yAxis: [
{
min: 0,
splitNumber: 10,
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.6)",
type: "dashed",
},
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
axisLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(255,255,255,0.8)",
padding: 16,
},
formatter: function (value) {
if (value === 0) {
return value;
}
return value;
},
},
axisTick: {
show: false,
数据分析-
2025-10-17 14:57:09 +08:00
},
},
接口调试
2025-10-18 16:58:04 +08:00
],
数据分析-
2025-10-21 13:38:20 +08:00
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
接口调试
2025-10-18 16:58:04 +08:00
series: [
{
name: "计划",
type: "line",
symbol: "circle",
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
color: "#00FEFC",
},
},
itemStyle: {
数据分析-
2025-10-17 14:57:09 +08:00
color: "#00FEFC",
接口调试
2025-10-18 16:58:04 +08:00
borderWidth: 2,
},
tooltip: {
show: true,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(18,86,100,0.6)",
},
{
offset: 1,
color: "rgba(16,72,81, 0.7)",
},
],
false
),
shadowColor: "rgba(15,55,63, 0.8)",
shadowBlur: 20,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
},
data: expenditureData,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
{
name: "实现",
type: "line",
symbol: "circle",
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
color: "rgba(25,196,134, 1)",
},
},
itemStyle: {
数据分析-
2025-10-17 14:57:09 +08:00
color: "rgba(25,196,134, 1)",
接口调试
2025-10-18 16:58:04 +08:00
borderWidth: 2,
},
tooltip: {
show: true,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(17,95,82, 0.6)",
},
{
offset: 1,
color: "rgba(16,72,67, 0.7)",
},
],
false
),
shadowColor: "rgba(15,55,54, 0.8)",
shadowBlur: 20,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
},
data: incomeData,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
],
数据分析-
2025-10-17 14:57:09 +08:00
};
leftChart.setOption(option);
// 响应式调整
window.addEventListener("resize", function () {
leftChart.resize();
});
}
function getElectrical() {
接口调试
2025-10-18 16:58:04 +08:00
let xLabel = [
"xxxx-xx-01",
"xxxx-xx-02",
"xxxx-xx-03",
"xxxx-xx-04",
"xxxx-xx-05",
"xxxx-xx-06",
"xxxx-xx-07",
"xxxx-xx-08",
"xxxx-xx-09",
"xxxx-xx-10",
"xxxx-xx-11",
"xxxx-xx-12",
];
let expenditureData = [
"12",
"15",
"4",
"8",
"13",
"6",
"10",
"11",
"5",
"12",
"10",
"15",
];
let incomeData = [
"4",
"5",
"5",
"5",
"5",
"4",
"3",
"5",
"3",
"16",
"5",
"18",
];
initElectrical(xLabel, expenditureData, incomeData);
数据分析-
2025-10-17 14:57:09 +08:00
}
接口调试
2025-10-18 16:58:04 +08:00
function initElectrical(data) {
const xLabel = data.map((item) => item.date);
const expenditureData = data.map((item) => item.plannedCount);
const incomeData = data.map((item) => item.actualCount);
数据分析-
2025-10-17 14:57:09 +08:00
const leftChart = echarts.init(document.getElementById("electrical"));
接口调试
2025-10-18 16:58:04 +08:00
const option = {
数据分析-
2025-10-17 14:57:09 +08:00
title: {
接口调试
2025-10-18 16:58:04 +08:00
text: "电气专业",
数据分析-
2025-10-17 14:57:09 +08:00
textStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#ffffff",
数据分析-
2025-10-17 14:57:09 +08:00
fontSize: fontSize,
接口调试
2025-10-18 16:58:04 +08:00
fontFamily: fontFamily,
数据分析-
2025-10-17 14:57:09 +08:00
},
left: 5,
接口调试
2025-10-18 16:58:04 +08:00
top: 5,
数据分析-
2025-10-17 14:57:09 +08:00
},
tooltip: {
接口调试
2025-10-18 16:58:04 +08:00
show: true,
trigger: "axis",
数据分析-
2025-10-17 14:57:09 +08:00
axisPointer: {
接口调试
2025-10-18 16:58:04 +08:00
type: "shadow",
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
borderColor: "rgba(255,255,255,.3)",
backgroundColor: "rgba(19,51,55,.6)",
数据分析-
2025-10-17 14:57:09 +08:00
textStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "white", //设置文字颜色
数据分析-
2025-10-17 14:57:09 +08:00
},
borderWidth: 1,
padding: 10,
},
legend: {
接口调试
2025-10-18 16:58:04 +08:00
show: true,
top: "5%",
right: "4%",
textStyle: {
color: "#ffffff",
},
数据分析-
2025-10-17 14:57:09 +08:00
},
grid: {
接口调试
2025-10-18 16:58:04 +08:00
top: "25%",
left: "6%",
right: "4%",
bottom: "20%",
数据分析-
2025-10-17 14:57:09 +08:00
},
xAxis: [
{
接口调试
2025-10-18 16:58:04 +08:00
type: "category",
数据分析-
2025-10-17 14:57:09 +08:00
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#5A6E71",
数据分析-
2025-10-17 14:57:09 +08:00
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: fontColor,
fontSize: fontSize,
接口调试
2025-10-18 16:58:04 +08:00
fontFamily: fontFamily,
数据分析-
2025-10-17 14:57:09 +08:00
},
},
splitLine: {
show: false,
lineStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#233653",
数据分析-
2025-10-17 14:57:09 +08:00
},
},
axisTick: {
show: true,
},
data: xLabel,
},
],
接口调试
2025-10-18 16:58:04 +08:00
yAxis: [
{
min: 0,
splitNumber: 10,
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.6)",
type: "dashed",
},
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
axisLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: "rgba(255,255,255,0.8)",
padding: 16,
},
formatter: function (value) {
if (value === 0) {
return value;
}
return value;
},
},
axisTick: {
show: false,
数据分析-
2025-10-17 14:57:09 +08:00
},
},
接口调试
2025-10-18 16:58:04 +08:00
],
数据分析-
2025-10-21 13:38:20 +08:00
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
接口调试
2025-10-18 16:58:04 +08:00
series: [
{
name: "计划",
type: "line",
symbol: "circle",
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
color: "#00FEFC",
},
},
itemStyle: {
数据分析-
2025-10-17 14:57:09 +08:00
color: "#00FEFC",
接口调试
2025-10-18 16:58:04 +08:00
borderWidth: 2,
},
tooltip: {
show: true,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(18,86,100,0.6)",
},
{
offset: 1,
color: "rgba(16,72,81, 0.7)",
},
],
false
),
shadowColor: "rgba(15,55,63, 0.8)",
shadowBlur: 20,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
},
data: expenditureData,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
{
name: "实现",
type: "line",
symbol: "circle",
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
color: "rgba(25,196,134, 1)",
},
},
itemStyle: {
数据分析-
2025-10-17 14:57:09 +08:00
color: "rgba(25,196,134, 1)",
接口调试
2025-10-18 16:58:04 +08:00
borderWidth: 2,
},
tooltip: {
show: true,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(17,95,82, 0.6)",
},
{
offset: 1,
color: "rgba(16,72,67, 0.7)",
},
],
false
),
shadowColor: "rgba(15,55,54, 0.8)",
shadowBlur: 20,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
},
data: incomeData,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
],
数据分析-
2025-10-17 14:57:09 +08:00
};
leftChart.setOption(option);
// 响应式调整
window.addEventListener("resize", function () {
leftChart.resize();
});
}
接口调试
2025-10-18 16:58:04 +08:00
function getItemCost() {
let xLabel = [
"xxxx-xx-01",
"xxxx-xx-02",
"xxxx-xx-03",
"xxxx-xx-04",
"xxxx-xx-05",
"xxxx-xx-06",
"xxxx-xx-07",
"xxxx-xx-08",
"xxxx-xx-09",
"xxxx-xx-10",
"xxxx-xx-11",
"xxxx-xx-12",
];
let expenditureData = [
"12",
"15",
"4",
"8",
"13",
"6",
"10",
"11",
"5",
"12",
"10",
"15",
];
let incomeData = [
"4",
"5",
"5",
"5",
"5",
"4",
"3",
"5",
"3",
"16",
"5",
"18",
];
initItemCost(xLabel, expenditureData, incomeData);
数据分析-
2025-10-17 14:57:09 +08:00
}
接口调试
2025-10-18 16:58:04 +08:00
function initItemCost(data) {
console.log(data, "data---**---");
const xLabel = data.map((item) => item.dateTime);
const expenditureData = data.map((item) => item.dataMoney);
// const incomeData = data.map((item) => item.actualCount);
数据分析-
2025-10-17 14:57:09 +08:00
const leftChart = echarts.init(document.getElementById("itemCost"));
接口调试
2025-10-18 16:58:04 +08:00
const option = {
数据分析-
2025-10-17 14:57:09 +08:00
tooltip: {
接口调试
2025-10-18 16:58:04 +08:00
show: true,
trigger: "axis",
数据分析-
2025-10-17 14:57:09 +08:00
axisPointer: {
接口调试
2025-10-18 16:58:04 +08:00
type: "shadow",
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
borderColor: "rgba(255,255,255,.3)",
backgroundColor: "rgba(19,51,55,.6)",
数据分析-
2025-10-17 14:57:09 +08:00
textStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "white", //设置文字颜色
数据分析-
2025-10-17 14:57:09 +08:00
},
borderWidth: 1,
padding: 10,
},
legend: {
接口调试
2025-10-18 16:58:04 +08:00
show: true,
top: "15%",
right: "4%",
textStyle: {
color: "#ffffff",
},
数据分析-
2025-10-17 14:57:09 +08:00
},
grid: {
接口调试
2025-10-18 16:58:04 +08:00
top: "30%",
left: "5%",
right: "4%",
bottom: "20%",
数据分析-
2025-10-17 14:57:09 +08:00
},
xAxis: [
{
接口调试
2025-10-18 16:58:04 +08:00
type: "category",
数据分析-
2025-10-17 14:57:09 +08:00
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#5A6E71",
数据分析-
2025-10-17 14:57:09 +08:00
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: fontColor,
fontSize: fontSize,
接口调试
2025-10-18 16:58:04 +08:00
fontFamily: fontFamily,
数据分析-
2025-10-17 14:57:09 +08:00
},
},
splitLine: {
show: false,
lineStyle: {
接口调试
2025-10-18 16:58:04 +08:00
color: "#233653",
数据分析-
2025-10-17 14:57:09 +08:00
},
},
axisTick: {
show: true,
},
data: xLabel,
},
],
接口调试
2025-10-18 16:58:04 +08:00
yAxis: [
{
min: 0,
splitNumber: 10,
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.6)",
type: "dashed",
},
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
axisLine: {
show: false,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
axisLabel: {
show: true,
textStyle: {
color: "rgba(255,255,255,0.8)",
padding: 16,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
formatter: function (value) {
if (value === 0) {
return value;
数据分析-
2025-10-17 14:57:09 +08:00
}
接口调试
2025-10-18 16:58:04 +08:00
return value;
},
},
axisTick: {
show: false,
},
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
],
数据分析-
2025-10-21 13:38:20 +08:00
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
接口调试
2025-10-18 16:58:04 +08:00
series: [
{
name: "项目成本",
type: "line",
symbol: "circle",
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
color: "#00FEFC",
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
},
itemStyle: {
color: "#00FEFC",
borderWidth: 2,
},
tooltip: {
show: true,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(18,86,100,0.6)",
},
{
offset: 1,
color: "rgba(16,72,81, 0.7)",
},
],
false
),
shadowColor: "rgba(15,55,63, 0.8)",
shadowBlur: 20,
},
},
data: expenditureData,
数据分析-
2025-10-17 14:57:09 +08:00
},
接口调试
2025-10-18 16:58:04 +08:00
// {
// name: "实现",
// type: "line",
// symbol: "circle",
// showAllSymbol: true,
// symbolSize: 0,
// smooth: true,
// lineStyle: {
// normal: {
// width: 2,
// color: "rgba(25,196,134, 1)",
// },
// },
// itemStyle: {
// color: "rgba(25,196,134, 1)",
// borderWidth: 2,
// },
// tooltip: {
// show: true,
// },
// areaStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(
// 0,
// 0,
// 0,
// 1,
// [
// {
// offset: 0,
// color: "rgba(17,95,82, 0.6)",
// },
// {
// offset: 1,
// color: "rgba(16,72,67, 0.7)",
// },
// ],
// false
// ),
// shadowColor: "rgba(15,55,54, 0.8)",
// shadowBlur: 20,
// },
// },
// data: incomeData,
// },
],
数据分析-
2025-10-17 14:57:09 +08:00
};
leftChart.setOption(option);
// 响应式调整
window.addEventListener("resize", function () {
leftChart.resize();
});
}
接口调试
2025-10-18 16:58:04 +08:00
function getTotalRisk() {
initTotalRisk();
数据分析-
2025-10-17 14:57:09 +08:00
}
接口调试
2025-10-18 16:58:04 +08:00
function initTotalRisk(projectRisk) {
$(".big-number").text(
projectRisk.filter((item) => item.riskLevel == 0)[0].num
);
const level = {
1: "一级风险",
2: "二级风险",
3: "三级风险",
4: "四级风险",
5: "五级风险",
};
const data_1 = projectRisk
.filter((item) => item.riskLevel != 0)
.map((item) => {
return {
value: item.num,
name: level[item.riskLevel],
itemStyle: {
color: getRandomColor(),
},
};
});
数据分析-
2025-10-17 14:57:09 +08:00
const myChart = echarts.init(document.getElementById("totalRisk"));
const option = {
tooltip: {
trigger: "item",
接口调试
2025-10-18 16:58:04 +08:00
formatter: "{b}: {c}个 ({d}%)",
数据分析-
2025-10-17 14:57:09 +08:00
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
},
legend: {
orient: "vertical",
right: "5%",
top: "15%",
itemGap: 22,
itemWidth: 20,
itemHeight: 8,
textStyle: {
color: "#fff",
fontSize: 14,
rich: {
name: {
width: 60,
color: "#fff",
},
value: {
width: 60,
align: "right",
color: "#79FFFF",
fontSize: 16,
fontWeight: "bold",
},
},
},
formatter: (name) => {
接口调试
2025-10-18 16:58:04 +08:00
const data = option.series[0].data;
const item = data.find((d) => d.name === name);
const percent = item ? item.value : 0;
return `{name|${name}} {value|${percent}}`;
数据分析-
2025-10-17 14:57:09 +08:00
},
},
series: [
{
name: "用电统计",
type: "pie",
roseType: "radius",
接口调试
2025-10-18 16:58:04 +08:00
radius: [0, "70%"],
数据分析-
2025-10-17 14:57:09 +08:00
center: ["15%", "45%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: "rgba(0, 0, 0, 0.3)",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
itemStyle: {
shadowBlur: 20,
shadowOffsetX: 0,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
labelLine: {
show: false,
},
接口调试
2025-10-18 16:58:04 +08:00
data: data_1,
// data: [
// {
// value: 60,
// name: "二级风险",
// itemStyle: {
// color: "#75F7EC",
// },
// },
// {
// value: 60,
// name: "三级风险",
// itemStyle: {
// color: "#75F791",
// },
// },
// {
// value: 26,
// name: "四级风险",
// itemStyle: {
// color: "#00C3F2",
// },
// },
// {
// value: 14,
// name: "五级风险",
// itemStyle: {
// color: "#EB846A",
// },
// },
// ],
数据分析-
2025-10-17 14:57:09 +08:00
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}