973 lines
28 KiB
JavaScript
973 lines
28 KiB
JavaScript
|
let table, layer, form;
|
||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||
|
|
|
||
|
|
layui.use(["layer", "table", "form"], function () {
|
||
|
|
layer = layui.layer;
|
||
|
|
table = layui.table;
|
||
|
|
form = layui.form;
|
||
|
|
|
||
|
|
getProjectProgress();
|
||
|
|
|
||
|
|
getProjectCost();
|
||
|
|
|
||
|
|
getPprojectRisk();
|
||
|
|
|
||
|
|
//土建专业
|
||
|
|
getCivilEngineering();
|
||
|
|
|
||
|
|
//电气专业
|
||
|
|
getElectrical();
|
||
|
|
|
||
|
|
//项目成本
|
||
|
|
getItemCost();
|
||
|
|
|
||
|
|
//总风险数量
|
||
|
|
getTotalRisk();
|
||
|
|
});
|
||
|
|
|
||
|
|
function getProjectProgress() {
|
||
|
|
initProjectProgress()
|
||
|
|
}
|
||
|
|
|
||
|
|
function initProjectProgress() {
|
||
|
|
const myChart = echarts.init(document.getElementById("projectProgress"));
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: '当前工程进度',
|
||
|
|
left: '48%',
|
||
|
|
top: '30%',
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 15,
|
||
|
|
fontWeight: 'normal',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
graphic: {
|
||
|
|
type: 'text',
|
||
|
|
left: '50%',
|
||
|
|
top: '50%',
|
||
|
|
style: {
|
||
|
|
text: '70%',
|
||
|
|
textAlign: 'center',
|
||
|
|
fill: '#79FFFF',
|
||
|
|
fontSize: 24,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['25%', '50%'],
|
||
|
|
center: ['30%', '50%'],
|
||
|
|
startAngle: 90,
|
||
|
|
hoverAnimation: false,
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 70,
|
||
|
|
itemStyle: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
|
|
offset: 0,
|
||
|
|
color: "#3BE6E6"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "#FFFFFF"
|
||
|
|
}
|
||
|
|
], false),
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 30,
|
||
|
|
itemStyle: {
|
||
|
|
color: 'rgba(8, 220, 224, 0.1)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
myChart.setOption(option);
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getProjectCost() {
|
||
|
|
initProjectCost();
|
||
|
|
}
|
||
|
|
|
||
|
|
function initProjectCost() {
|
||
|
|
const myChart = echarts.init(document.getElementById("projectCost"));
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: '当前成本投入',
|
||
|
|
left: '48%',
|
||
|
|
top: '30%',
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 15,
|
||
|
|
fontWeight: 'normal',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
graphic: {
|
||
|
|
type: 'text',
|
||
|
|
left: '50%',
|
||
|
|
top: '50%',
|
||
|
|
style: {
|
||
|
|
text: '70%',
|
||
|
|
textAlign: 'center',
|
||
|
|
fill: '#79FFFF',
|
||
|
|
fontSize: 24,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['25%', '50%'],
|
||
|
|
center: ['30%', '50%'],
|
||
|
|
startAngle: 90,
|
||
|
|
hoverAnimation: false,
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
value: 70,
|
||
|
|
itemStyle: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
|
|
offset: 0,
|
||
|
|
color: "#3BE6E6"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "#FFFFFF"
|
||
|
|
}
|
||
|
|
], false),
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 30,
|
||
|
|
itemStyle: {
|
||
|
|
color: 'rgba(8, 220, 224, 0.1)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
myChart.setOption(option);
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getPprojectRisk() {
|
||
|
|
initProjectRisk();
|
||
|
|
}
|
||
|
|
|
||
|
|
function initProjectRisk() {
|
||
|
|
const myChart = echarts.init(document.getElementById("projectRisk"));
|
||
|
|
const option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: "item",
|
||
|
|
formatter: "{b}: {c}kWh ({d}%)",
|
||
|
|
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) => {
|
||
|
|
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}%}`
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "用电统计",
|
||
|
|
type: "pie",
|
||
|
|
roseType: "radius",
|
||
|
|
radius: [0, '70%'],
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
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',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
myChart.setOption(option);
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getCivilEngineering() {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
function initCivilEngineering( xLabel,expenditureData,incomeData) {
|
||
|
|
|
||
|
|
const leftChart = echarts.init(document.getElementById("civilEngineering"));
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: '土建专业',
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: fontSize,
|
||
|
|
fontFamily: fontFamily
|
||
|
|
},
|
||
|
|
left: 5,
|
||
|
|
top: 5
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show:true,
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow',
|
||
|
|
},
|
||
|
|
borderColor: 'rgba(255,255,255,.3)',
|
||
|
|
backgroundColor: 'rgba(19,51,55,.6)',
|
||
|
|
textStyle: {
|
||
|
|
color: 'white', //设置文字颜色
|
||
|
|
},
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show:true,
|
||
|
|
top:'5%',
|
||
|
|
right:'4%',
|
||
|
|
textStyle:{
|
||
|
|
color:'#ffffff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '25%',
|
||
|
|
left: '6%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '20%'
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: true,
|
||
|
|
axisLine: {
|
||
|
|
//坐标轴轴线相关设置。数学上的x轴
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#5A6E71',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
//坐标轴刻度标签的相关设置
|
||
|
|
textStyle: {
|
||
|
|
color: fontColor,
|
||
|
|
fontSize: fontSize,
|
||
|
|
fontFamily: fontFamily
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#233653',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
data: xLabel,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [{
|
||
|
|
min: 0,
|
||
|
|
splitNumber: 10,
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255,255,255,0.6)',
|
||
|
|
type: 'dashed',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
name: '计划',
|
||
|
|
type: 'line',
|
||
|
|
symbol: 'circle',
|
||
|
|
showAllSymbol: true,
|
||
|
|
symbolSize: 0,
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
normal: {
|
||
|
|
width: 2,
|
||
|
|
color: "#00FEFC",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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
|
||
|
|
}, {
|
||
|
|
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
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
leftChart.setOption(option);
|
||
|
|
// 响应式调整
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
leftChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getElectrical() {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
function initElectrical( xLabel,expenditureData,incomeData) {
|
||
|
|
const leftChart = echarts.init(document.getElementById("electrical"));
|
||
|
|
const option = {
|
||
|
|
title: {
|
||
|
|
text: '电气专业',
|
||
|
|
textStyle: {
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: fontSize,
|
||
|
|
fontFamily: fontFamily
|
||
|
|
},
|
||
|
|
left: 5,
|
||
|
|
top: 5
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show:true,
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow',
|
||
|
|
},
|
||
|
|
borderColor: 'rgba(255,255,255,.3)',
|
||
|
|
backgroundColor: 'rgba(19,51,55,.6)',
|
||
|
|
textStyle: {
|
||
|
|
color: 'white', //设置文字颜色
|
||
|
|
},
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show:true,
|
||
|
|
top:'5%',
|
||
|
|
right:'4%',
|
||
|
|
textStyle:{
|
||
|
|
color:'#ffffff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '25%',
|
||
|
|
left: '6%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '20%'
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: true,
|
||
|
|
axisLine: {
|
||
|
|
//坐标轴轴线相关设置。数学上的x轴
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#5A6E71',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
//坐标轴刻度标签的相关设置
|
||
|
|
textStyle: {
|
||
|
|
color: fontColor,
|
||
|
|
fontSize: fontSize,
|
||
|
|
fontFamily: fontFamily
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#233653',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
data: xLabel,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [{
|
||
|
|
min: 0,
|
||
|
|
splitNumber: 10,
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255,255,255,0.6)',
|
||
|
|
type: 'dashed',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
name: '计划',
|
||
|
|
type: 'line',
|
||
|
|
symbol: 'circle',
|
||
|
|
showAllSymbol: true,
|
||
|
|
symbolSize: 0,
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
normal: {
|
||
|
|
width: 2,
|
||
|
|
color: "#00FEFC",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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
|
||
|
|
}, {
|
||
|
|
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
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
leftChart.setOption(option);
|
||
|
|
// 响应式调整
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
leftChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
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)
|
||
|
|
}
|
||
|
|
|
||
|
|
function initItemCost(xLabel,expenditureData,incomeData){
|
||
|
|
const leftChart = echarts.init(document.getElementById("itemCost"));
|
||
|
|
const option = {
|
||
|
|
tooltip: {
|
||
|
|
show:true,
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow',
|
||
|
|
},
|
||
|
|
borderColor: 'rgba(255,255,255,.3)',
|
||
|
|
backgroundColor: 'rgba(19,51,55,.6)',
|
||
|
|
textStyle: {
|
||
|
|
color: 'white', //设置文字颜色
|
||
|
|
},
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show:true,
|
||
|
|
top:'15%',
|
||
|
|
right:'4%',
|
||
|
|
textStyle:{
|
||
|
|
color:'#ffffff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '30%',
|
||
|
|
left: '5%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '20%'
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: true,
|
||
|
|
axisLine: {
|
||
|
|
//坐标轴轴线相关设置。数学上的x轴
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#5A6E71',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
//坐标轴刻度标签的相关设置
|
||
|
|
textStyle: {
|
||
|
|
color: fontColor,
|
||
|
|
fontSize: fontSize,
|
||
|
|
fontFamily: fontFamily
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#233653',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
data: xLabel,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [{
|
||
|
|
min: 0,
|
||
|
|
splitNumber: 10,
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(255,255,255,0.6)',
|
||
|
|
type: 'dashed',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
name: '计划',
|
||
|
|
type: 'line',
|
||
|
|
symbol: 'circle',
|
||
|
|
showAllSymbol: true,
|
||
|
|
symbolSize: 0,
|
||
|
|
smooth: true,
|
||
|
|
lineStyle: {
|
||
|
|
normal: {
|
||
|
|
width: 2,
|
||
|
|
color: "#00FEFC",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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
|
||
|
|
}, {
|
||
|
|
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
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
leftChart.setOption(option);
|
||
|
|
// 响应式调整
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
leftChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function getTotalRisk(){
|
||
|
|
initTotalRisk()
|
||
|
|
}
|
||
|
|
|
||
|
|
function initTotalRisk(){
|
||
|
|
const myChart = echarts.init(document.getElementById("totalRisk"));
|
||
|
|
const option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: "item",
|
||
|
|
formatter: "{b}: {c}kWh ({d}%)",
|
||
|
|
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) => {
|
||
|
|
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}%}`
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "用电统计",
|
||
|
|
type: "pie",
|
||
|
|
roseType: "radius",
|
||
|
|
radius: [0, '70%'],
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
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',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
myChart.setOption(option);
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
}
|