1293 lines
40 KiB
Plaintext
1293 lines
40 KiB
Plaintext
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 = '#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 : twoNum,
|
||
itemStyle: {
|
||
// opacity: 0.5,
|
||
color: "#FF5D5D",
|
||
},
|
||
},
|
||
|
||
{
|
||
name: "三级",
|
||
value: !threeNum ? 0 : threeNum,
|
||
itemStyle: {
|
||
// opacity: 0.5,
|
||
color: "#F9770F",
|
||
},
|
||
},
|
||
{
|
||
name: "四级",
|
||
value: !fourNum ? 0 : fourNum,
|
||
itemStyle: {
|
||
// opacity: 0.5,
|
||
color: "#FFE922",
|
||
},
|
||
},
|
||
{
|
||
name: "五级",
|
||
value: !fiveNum ? 0 : 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 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) {
|
||
// 在控制台输出被点击项的信息
|
||
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(params.seriesIndex==0){
|
||
gotoPage('',params.name)
|
||
}else if(params.seriesIndex==1){
|
||
gotoPage('1',params.name)
|
||
}else if(params.seriesIndex==2){
|
||
gitoWzPage('',params.name);
|
||
}
|
||
});
|
||
}
|
||
|
||
/* 人员统计 */
|
||
function initEchartsSeven(num, num2, num3) {
|
||
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||
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: '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) {
|
||
// 在控制台输出被点击项的信息
|
||
if(params.name=='一般作业'){
|
||
params.name='普通作业'
|
||
}
|
||
openPersonnelStatistics(params.name);
|
||
});
|
||
} |