对接劳务班组出勤分析，右侧图
This commit is contained in:
严妍
parent
ecd1c51e30
commit
31df8dcfd2
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user