admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Squashed commit of the following:

Browse Source 
commit 31df8dcfd2b73fbd4d5cdd872e7f4d5ccf264ad3
Author: 严妍 <3096114695@qq.com>
Date:   Thu Jul 13 16:51:58 2023 +0800

    对接劳务班组出勤分析，右侧图
This commit is contained in:
严妍 2023-07-13 16:58:10 +08:00
parent 106a65de66
commit 43b5d3cd23
1 changed files with 144 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

275
src/views/sevenLargeScreen/laborManagement/horizontaL.vue
View File

@ -32,43 +32,22 @@ const form = ref({
});
let xData = ref([] as any);
let yData = ref([] as any);
const option = reactive({
grid: {
left: "5%",
right: "5%",
bottom: "3%",
top: "18%",
containLabel: true
},
// backgroundColor: "#101129",
xAxis: {
show: true,
type: "value",
max: 100,
axisLabel: {
show: true,
textStyle: {
fontSize: "12",
color: "#fff"
}
let option = ref(null as any);
function initOption() {
option.value = {
grid: {
left: "5%",
right: "5%",
bottom: "3%",
top: "18%",
containLabel: true
},
axisLine: {
// backgroundColor: "#101129",
xAxis: {
show: true,
lineStyle: {
color: "#14336b"
}
},
splitLine: {
show: false,
lineStyle: {
color: "#14336b"
}
}
},
yAxis: [
{
type: "category",
inverse: true,
type: "value",
max: 100,
axisLabel: {
show: true,
textStyle: {
@ -76,113 +55,141 @@ const option = reactive({
color: "#fff"
}
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#14336b"
}
},
data: yData.value
},
{
axisTick: "none",
axisLine: "none",
axisLabel: {
textStyle: {
color: "#fff",
fontSize: "12"
}
},
data: []
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true
// data: [],
}
],
series: [
{
type: "bar",
showBackground: true,
backgroundStyle: {
color: "#14346c",
borderRadius: 30
},
label: {
splitLine: {
show: false,
// position:'right',
// formatter:'{@score}%',
textStyle: {
color: "#03fcfe",
fontSize: "12"
lineStyle: {
color: "#14336b"
}
},
itemStyle: {
normal: {
barBorderRadius: 10,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1d465c"
},
{
offset: 1,
color: "#82FBEA"
}
])
}
},
barWidth: 3,
data: xData.value
}
},
{
name: "内圆",
type: "scatter",
stack: "圆",
yAxisIndex: 0,
data: xData.value, //小白点，数据静态
label: false,
symbolSize: 2,
itemStyle: {
normal: {
borderColor: "#fff",
borderWidth: 4,
color: "#fff",
opacity: 1
}
yAxis: [
{
type: "category",
inverse: true,
axisLabel: {
show: true,
textStyle: {
fontSize: "12",
color: "#fff"
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "#14336b"
}
},
data: yData.value
},
z: 3
},
{
name: "内圆框",
type: "scatter",
stack: "圆",
yAxisIndex: 0,
data: [0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
label: false,
symbolSize: 15,
itemStyle: {
normal: {
borderColor: "#82FBEA",
borderWidth: 2,
{
axisTick: "none",
axisLine: "none",
axisLabel: {
textStyle: {
color: "#fff",
fontSize: "12"
}
},
data: []
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true
// data: [],
}
],
series: [
{
type: "bar",
showBackground: true,
backgroundStyle: {
color: "#14346c",
opacity: 1
}
borderRadius: 30
},
label: {
show: false,
// position:'right',
// formatter:'{@score}%',
textStyle: {
color: "#03fcfe",
fontSize: "12"
}
},
itemStyle: {
normal: {
barBorderRadius: 10,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#1d465c"
},
{
offset: 1,
color: "#82FBEA"
}
])
}
},
barWidth: 3,
data: xData.value
},
z: 2
}
]
});
{
name: "内圆",
type: "scatter",
stack: "圆",
yAxisIndex: 0,
data: xData.value, //小白点，数据静态
label: false,
symbolSize: 2,
itemStyle: {
normal: {
borderColor: "#fff",
borderWidth: 4,
color: "#fff",
opacity: 1
}
},
z: 3
},
{
name: "内圆框",
type: "scatter",
stack: "圆",
yAxisIndex: 0,
data: [0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
label: false,
symbolSize: 15,
itemStyle: {
normal: {
borderColor: "#82FBEA",
borderWidth: 2,
color: "#14346c",
opacity: 1
}
},
z: 2
}
]
};
}
// let horizontalEcharts: any = null;
function horizontalChart() {
initOption();
let horizontalEcharts = echarts.init(document.getElementById("horizontalEcharts"));
horizontalEcharts.setOption(option);
console.log(option.value, "绘图数据");
horizontalEcharts.setOption(option.value);
}
// //选择日期
// const onDatePicker = () => {
@ -192,27 +199,33 @@ function horizontalChart() {
// };
//获取劳务班组人员数据
const getList = async val => {
// 清数据
const res: any = await getWorkerInfoApi({
projectSn: store.sn,
enterpriseId: val
// queryStartTime: form.queryStartTime.value,
// queryEndTime: form.queryEndTime.value
});
if (res.result[0]) {
// console.log(res.result.length,'长度')
if (res.result.length != 0) {
for (let index = 0; index < res.result.length; index++) {
xData.value[index] = res.result[index].totalPersonNum;
yData.value[index] = res.result[index].teamName;
}
} else {
console.log("没有数据");
xData.value = [];
yData.value = [];
}
console.log("获取劳务班组人员数据2", res);
// console.log("获取劳务班组人员数据2", res);
horizontalChart();
};
onMounted(async () => {
mitts.on("enterpriseId", e => {
// horizontalEcharts = echarts.init(document.getElementById('chart-view'))
// 清数据
xData.value = [];
yData.value = [];
getList(e);
});
});