568 lines
19 KiB
JavaScript
568 lines
19 KiB
JavaScript
|
let myChart = echarts.init(document.getElementById('pro-risk'));
|
|||
|
|
let myChart2 = echarts.init(document.getElementById('pro-progress-echarts'));
|
|||
|
|
let myChart3 = echarts.init(document.getElementById('pro-cost'));
|
|||
|
|
|
|||
|
|
/* 项目风险 */
|
|||
|
|
function initEchartsOne(day, week, warn) {
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|||
|
|
let xLabel = day;
|
|||
|
|
let dataValue = week;
|
|||
|
|
let dataValue1 = warn;
|
|||
|
|
const tooltip = {
|
|||
|
|
show: true,
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
};
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
tooltip,
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
top: '15%',
|
|||
|
|
right: '2%',
|
|||
|
|
itemWidth: 30, // 图例标记的图形宽度。
|
|||
|
|
// itemGap: 20, // 图例每项之间的间隔。
|
|||
|
|
itemHeight: 10, // 图例标记的图形高度。
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 14,
|
|||
|
|
padding: [0, 8, 0, 8]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: '25%',
|
|||
|
|
left: '5%',
|
|||
|
|
right: '5%',
|
|||
|
|
bottom: '15%',
|
|||
|
|
},
|
|||
|
|
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: false,
|
|||
|
|
},
|
|||
|
|
data: xLabel,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
name: "",
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
padding: [0, 60, 0, 0],
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
// minInterval: 1,
|
|||
|
|
type: 'value',
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#25393B',
|
|||
|
|
type: 'dashed'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#008de7',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '周计划数',
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|||
|
|
smooth: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 3,
|
|||
|
|
color: '#1ED6FF', // 线条颜色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#1ED6FF',//拐点颜色
|
|||
|
|
// borderColor: '#fff600',//拐点边框颜色
|
|||
|
|
// borderWidth: 13//拐点边框大小
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
formatter: function (res) {
|
|||
|
|
if (res.value) {
|
|||
|
|
return res.value
|
|||
|
|
} else {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
symbolSize: 8, //设定实心点的大小
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#1ED6FF30',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.6,
|
|||
|
|
color: '#1ED6FF20',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#1ED6FF10',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: dataValue,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '风险数',
|
|||
|
|
type: 'line',
|
|||
|
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|||
|
|
smooth: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
normal: {
|
|||
|
|
width: 3,
|
|||
|
|
color: '#FE533C', // 线条颜色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#FE533C',//拐点颜色
|
|||
|
|
// borderColor: '#fff600',//拐点边框颜色
|
|||
|
|
// borderWidth: 13//拐点边框大小
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
formatter: function (res) {
|
|||
|
|
if (res.value) {
|
|||
|
|
return res.value
|
|||
|
|
} else {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
symbolSize: 8, //设定实心点的大小
|
|||
|
|
areaStyle: {
|
|||
|
|
normal: {
|
|||
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#FE533C30',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.6,
|
|||
|
|
color: '#FE533C20',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#ffba0010',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: dataValue1,
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 计划进度 */
|
|||
|
|
function initEchartsTwo(value2, value) {
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|||
|
|
let kg = 0.3
|
|||
|
|
// 计划进度、实际进度
|
|||
|
|
let total = value2;
|
|||
|
|
let total_add = value;
|
|||
|
|
// 进度条占比
|
|||
|
|
let ljdata = total_add > total ? total : total_add;
|
|||
|
|
let newdata = total_add > total ? (total_add - total).toFixed(2) : (total - total_add).toFixed(2);
|
|||
|
|
let str = total_add < total ? '实际进度' + '' + `${total_add}` + '%' : '计划进度' + '' + `${total}` + '%';
|
|||
|
|
let str2 = total_add > total ? '实际进度' + '' + `${total_add}` + '%' : '计划进度' + '' + `${total}` + '%';
|
|||
|
|
if (total === total_add) {
|
|||
|
|
str2 = '实际进度' + '' + `${total_add}` + '%';
|
|||
|
|
str = '计划进度' + '' + `${total}` + '%';
|
|||
|
|
}
|
|||
|
|
let max = 101;
|
|||
|
|
var option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
axisLine: {
|
|||
|
|
show: false, //坐标线
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false, //小横线
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false, //小横线
|
|||
|
|
color: '#999', //坐标轴字颜色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
xAxis: {
|
|||
|
|
show: false,
|
|||
|
|
max: max,
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: '20',
|
|||
|
|
right: '50',
|
|||
|
|
left: '50',
|
|||
|
|
bottom: '0', //图表尺寸大小
|
|||
|
|
},
|
|||
|
|
animationDuration: 2000,
|
|||
|
|
series: [
|
|||
|
|
// 框
|
|||
|
|
{
|
|||
|
|
name: '框',
|
|||
|
|
type: 'bar',
|
|||
|
|
barGap: '-100%',
|
|||
|
|
data: [max],
|
|||
|
|
barWidth: '30px',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: 'none',
|
|||
|
|
borderColor: '#06DDDBFF',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
barBorderRadius: 0,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 间隔
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: '25px',
|
|||
|
|
barGap: '-92%',
|
|||
|
|
stack: 'total',
|
|||
|
|
showBackground: false,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: 'transparent',
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: 'transparent', //每个数据的颜色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: [kg],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: '25px',
|
|||
|
|
barGap: '-92%',
|
|||
|
|
stack: 'total',
|
|||
|
|
showBackground: false,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: 'transparent',
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'insideBottomRight',
|
|||
|
|
formatter: str,
|
|||
|
|
// formatter: '计划进度' + ' ' + `${total}` + '%',
|
|||
|
|
// formatter: total_add < total ? '实际进度' + ' ' + `${total_add}` + '%' : '计划进度' + ' ' + `${total}` + '%',
|
|||
|
|
distance: 0,
|
|||
|
|
offset: parseInt(total) === 100 ? [30, 35] :[60, 35],
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: 12,
|
|||
|
|
padding: [12, 12, 12, 12],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: {
|
|||
|
|
x: 1,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 0,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#03FDBAFF' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#A8FBE7FF' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: [ljdata],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: '25px',
|
|||
|
|
stack: 'total',
|
|||
|
|
silent: true,
|
|||
|
|
showBackground: false,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: 'transparent',
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'insideBottomRight',
|
|||
|
|
// formatter: total_add > total ? '实际进度' + ' ' + `${total_add}` + '%' : '计划进度' + ' ' + `${total}` + '%',
|
|||
|
|
formatter: str2,
|
|||
|
|
distance: 0,
|
|||
|
|
offset:parseInt(total_add) === 100 ? [30, -21] :[60, -21],
|
|||
|
|
// offset: [50, -21],
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: 12,
|
|||
|
|
padding: [12, 12, 12, 12],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
color: {
|
|||
|
|
x: 1,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 0,
|
|||
|
|
colorStops: [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#FD9B02FF' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#FFE0B0FF' // 100% 处的颜色
|
|||
|
|
}],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: [newdata],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: '25px',
|
|||
|
|
stack: 'total',
|
|||
|
|
silent: true,
|
|||
|
|
showBackground: false,
|
|||
|
|
backgroundStyle: {
|
|||
|
|
color: 'transparent',
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: 'transparent', //每个数据的颜色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: [kg],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
myChart2.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart2.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 项目成本 */
|
|||
|
|
function initEchartsThree(nameListData,valueListData,proCost) {
|
|||
|
|
let nameList = nameListData;
|
|||
|
|
let valueList = valueListData;
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|||
|
|
const tooltip = {
|
|||
|
|
show: true,
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
backgroundColor: 'rgba(75, 79, 82, 0.80)', //设置背景颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
borderColor: "rgba(255,255,255, .5)",
|
|||
|
|
};
|
|||
|
|
option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
tooltip,
|
|||
|
|
grid: {
|
|||
|
|
left: '10%',
|
|||
|
|
right: '6%',
|
|||
|
|
bottom: '15%',
|
|||
|
|
top: '25%',
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: nameList,
|
|||
|
|
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#FFFFFF66',
|
|||
|
|
// width: 1
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
// rotate: 50,
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
// min: 0,
|
|||
|
|
// max: proCost + 10000,
|
|||
|
|
splitLine: { //分割线配置
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#25393B",
|
|||
|
|
// type: 'dashed'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#758FA6'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
barWidth: 14,
|
|||
|
|
data: valueList,
|
|||
|
|
type: 'bar',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#C9FFFAFF' // 0% 处的颜色
|
|||
|
|
}, {
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#0AFFBFFF' // 100% 处的颜色
|
|||
|
|
}], false),
|
|||
|
|
// barBorderRadius: [30, 30, 30, 30],
|
|||
|
|
shadowColor: 'rgba(0,160,221,1)',
|
|||
|
|
shadowBlur: 4,
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
formatter: function (res) {
|
|||
|
|
if (res.value) {
|
|||
|
|
return res.value
|
|||
|
|
} else {
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
markLine: {
|
|||
|
|
symbol: 'none',
|
|||
|
|
label: {
|
|||
|
|
position: "middle",
|
|||
|
|
formatter: '{b}：{c}',
|
|||
|
|
color: '#FF8845FF',
|
|||
|
|
fontSize: fontSize
|
|||
|
|
},
|
|||
|
|
data: [{
|
|||
|
|
silent: true,
|
|||
|
|
name: "阈值",
|
|||
|
|
yAxis: proCost,//res.targetTwo,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#FF8845FF"
|
|||
|
|
},
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart3.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart3.resize();
|
|||
|
|
});
|
|||
|
|
}
|