929 lines
28 KiB
JavaScript
929 lines
28 KiB
JavaScript
|
let myChart = echarts.init(document.getElementById('pro-total-echarts'));
|
|||
|
|
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 = '#000';
|
|||
|
|
let tableData = [{
|
|||
|
|
value: num,
|
|||
|
|
name: "今日有作业"
|
|||
|
|
}, {
|
|||
|
|
value: num2,
|
|||
|
|
name: "今日未作业"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: num3,
|
|||
|
|
name: "停工工程"
|
|||
|
|
}]
|
|||
|
|
let option = {
|
|||
|
|
grid: {
|
|||
|
|
left: '0',
|
|||
|
|
right: '2%',
|
|||
|
|
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 = '#000';
|
|||
|
|
const data = [
|
|||
|
|
{ name: '二级', value: parseInt(twoNum) },
|
|||
|
|
{ name: '三级', value: parseInt(threeNum) },
|
|||
|
|
{ name: '四级', value: parseInt(fourNum) },
|
|||
|
|
{ name: '五级', value: parseInt(fiveNum) },
|
|||
|
|
]
|
|||
|
|
let totalNum = 0, paddingLeft = 55;
|
|||
|
|
data.map(item => totalNum += item.value)
|
|||
|
|
if (totalNum < 100 && totalNum > 0) {
|
|||
|
|
paddingLeft = 48;
|
|||
|
|
} else if (totalNum >= 100 && totalNum < 1000) {
|
|||
|
|
paddingLeft = 40;
|
|||
|
|
} else if (totalNum >= 1000) {
|
|||
|
|
paddingLeft = 32;
|
|||
|
|
}
|
|||
|
|
let option = {
|
|||
|
|
// 环形图中间默认显示文字
|
|||
|
|
title: {
|
|||
|
|
text: `{a|${totalNum}}\n\n{b|周计划总数}`,
|
|||
|
|
top: 'center',
|
|||
|
|
left: 90,
|
|||
|
|
textStyle: {
|
|||
|
|
rich: {
|
|||
|
|
a: {
|
|||
|
|
fontSize: 30,
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
padding: [40, 0, 0, paddingLeft],
|
|||
|
|
color: 'rgba(0,0,0,0.85)',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
b: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
padding: [0, 0, 40, 28],
|
|||
|
|
color: 'rgba(0,0,0,0.65)',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
backgroundColor: '#fff',
|
|||
|
|
extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
|
|||
|
|
padding: [12, 16, 12, 16],
|
|||
|
|
textStyle: {
|
|||
|
|
color: 'rgba(0,0,0,0.65)'
|
|||
|
|
},
|
|||
|
|
// 悬浮的位置可以调整，总距离左边10px
|
|||
|
|
position: (point) => {
|
|||
|
|
return ['10', point[1]]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
icon: 'circle',
|
|||
|
|
orient: 'vertial',
|
|||
|
|
itemWidth: 15,
|
|||
|
|
itemHeight: 15,
|
|||
|
|
right: 100,
|
|||
|
|
bottom: '20%',
|
|||
|
|
data: data,
|
|||
|
|
itemGap: 25,
|
|||
|
|
textStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
},
|
|||
|
|
formatter: (name) => {
|
|||
|
|
const value = data.find(item => item.name === name).value
|
|||
|
|
return `${name}：${value} `
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
color: ['#FF4646', '#FD9F6B', '#FEE922', '#36F097', '#FFAC34', '#5AD7D8', '#8163E9', '#FF5F45', '#01C581', '#B754F6', '#FCDA0F', '#9B501B', '#A0D911', '#2998FF', '#938BF8'],
|
|||
|
|
series: [{
|
|||
|
|
name: '周计划',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['55%', '80%'],
|
|||
|
|
center: ['30%', '50%'], // 图形位置
|
|||
|
|
label: { // 鼠标悬浮具体数据显示
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart6.setOption(option);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart6.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 计划趋势 echarts */
|
|||
|
|
function initEchartsThree(nameList, valueList, valueList2) {
|
|||
|
|
let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
|
|||
|
|
const backgroundColor = 'transparent';
|
|||
|
|
const color = ['#FF4646', '#FD9F6B', '#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: fontColor,
|
|||
|
|
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: '3%',
|
|||
|
|
right: '3%',
|
|||
|
|
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 initEchartsEight(value) {
|
|||
|
|
let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
|
|||
|
|
const dataArr = [
|
|||
|
|
{
|
|||
|
|
value: value.toFixed(2) * 100,
|
|||
|
|
name: '核实情况',
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#3C86DD', // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#2FE3FB', // 100% 处的颜色
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
const colorSet = [
|
|||
|
|
[value.toFixed(2), color],
|
|||
|
|
[1, '#F0F1F2'],
|
|||
|
|
];
|
|||
|
|
const rich = {
|
|||
|
|
white: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: fontColor,
|
|||
|
|
fontWeight: '500',
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
},
|
|||
|
|
bule: {
|
|||
|
|
fontSize: 30,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
color: fontColor,
|
|||
|
|
fontWeight: '700',
|
|||
|
|
},
|
|||
|
|
radius: {
|
|||
|
|
width: 350,
|
|||
|
|
height: 80,
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: '#0092F2',
|
|||
|
|
fontSize: 50,
|
|||
|
|
color: '#fff',
|
|||
|
|
backgroundColor: '#1B215B',
|
|||
|
|
borderRadius: 20,
|
|||
|
|
textAlign: 'center',
|
|||
|
|
},
|
|||
|
|
size: {
|
|||
|
|
height: 400,
|
|||
|
|
padding: [100, 0, 0, 0],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: 'transparent',
|
|||
|
|
tooltip: {
|
|||
|
|
formatter: '{a} <br/>{b} : {c}%',
|
|||
|
|
},
|
|||
|
|
title: [
|
|||
|
|
{
|
|||
|
|
text: '未执行计划',
|
|||
|
|
x: "center",
|
|||
|
|
y: "30%",
|
|||
|
|
borderColor: "#fff",
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: "normal",
|
|||
|
|
fontSize: 16,
|
|||
|
|
color: '#E19146',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'gauge',
|
|||
|
|
radius: '100%',
|
|||
|
|
startAngle: '225',
|
|||
|
|
endAngle: '-45',
|
|||
|
|
pointer: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
formatter: function (value) {
|
|||
|
|
var num = Math.round(value);
|
|||
|
|
return '{bule|' + num + '}{white|%}';
|
|||
|
|
},
|
|||
|
|
rich: rich,
|
|||
|
|
offsetCenter: ['0%', '20%'],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: dataArr,
|
|||
|
|
title: {
|
|||
|
|
show: true,
|
|||
|
|
color: fontColor,
|
|||
|
|
offsetCenter: ['0', '75%'],
|
|||
|
|
fontSize: '16',
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: colorSet,
|
|||
|
|
width: 25,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowOffsetY: 0,
|
|||
|
|
opacity: 1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
length: 35,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: '#00377a',
|
|||
|
|
width: 2,
|
|||
|
|
type: 'solid',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart9.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart9.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 值班进度-1 */
|
|||
|
|
function initEchartsFour(num, totalNum) {
|
|||
|
|
let fontSize = '16', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
|
|||
|
|
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(26 167 246)', // 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: '#000',
|
|||
|
|
fontSize: fontSize,
|
|||
|
|
fontFamily: fontFamily
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '值班进度',
|
|||
|
|
type: 'bar',
|
|||
|
|
barGap: '-125%',
|
|||
|
|
data: [totalNum],
|
|||
|
|
barWidth: 27,
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: 'right',
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#000',
|
|||
|
|
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();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
/* 值班进度-2 */
|
|||
|
|
function initEchartsSix(userList, taskList, xsList, wzList) {
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
|
|||
|
|
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: fontColor,
|
|||
|
|
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: fontColor,
|
|||
|
|
fontFamily: fontFamily,
|
|||
|
|
fontSize: fontSize
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: fontColor,
|
|||
|
|
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();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 人员统计 */
|
|||
|
|
function initEchartsSeven(num, num2, num3) {
|
|||
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#000';
|
|||
|
|
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: ['#36F097', '#F49968', '#66FFFF', '#1DB7E5'],
|
|||
|
|
data: [{
|
|||
|
|
value: num,
|
|||
|
|
name: '一般作业'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: num2,
|
|||
|
|
name: '特种作业'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: num3,
|
|||
|
|
name: '班组骨干'
|
|||
|
|
},
|
|||
|
|
].sort(function (a, b) {
|
|||
|
|
return b.value - a.value
|
|||
|
|
}),
|
|||
|
|
roseType: 'radius',
|
|||
|
|
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
|
|||
|
|
rich: {
|
|||
|
|
c: {
|
|||
|
|
color: '#0AC4DE',
|
|||
|
|
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.2)',
|
|||
|
|
shadowBlur: 50,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart8.setOption(option, true);
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart8.resize();
|
|||
|
|
});
|
|||
|
|
}
|