460 lines
8.5 KiB
Vue
460 lines
8.5 KiB
Vue
|
<template>
|
|||
|
|
<Card title="部门管理人员出勤分析">
|
|||
|
|
<div class="num">175</div>
|
|||
|
|
<div class="styleImg"></div>
|
|||
|
|
<div id="echartsRight" style="width: 100%; height: 100%"></div>
|
|||
|
|
</Card>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
|
|||
|
|
import Card from "@/components/card.vue";
|
|||
|
|
|
|||
|
|
let timer = ref(null);
|
|||
|
|
//角度，用来做简单的动画效果的
|
|||
|
|
let angle = ref(0);
|
|||
|
|
let value = ref(55.33);
|
|||
|
|
let totalData = reactive([
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司1",
|
|||
|
|
value: 12,
|
|||
|
|
radio: 0.13
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司2",
|
|||
|
|
value: 52,
|
|||
|
|
radio: 0.01
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司3",
|
|||
|
|
value: 15,
|
|||
|
|
radio: 3.9
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司4",
|
|||
|
|
value: 56,
|
|||
|
|
radio: 10.5
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司5",
|
|||
|
|
value: 17,
|
|||
|
|
radio: 0.4
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司6",
|
|||
|
|
value: 19,
|
|||
|
|
radio: 85.3
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
let trafficWay = reactive([
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司1",
|
|||
|
|
value: 12
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司2",
|
|||
|
|
value: 52
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司3",
|
|||
|
|
value: 15
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司4",
|
|||
|
|
value: 56
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司5",
|
|||
|
|
value: 17
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "XX有限公司6",
|
|||
|
|
value: 19
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
let data = reactive([]);
|
|||
|
|
let color = reactive(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7"]);
|
|||
|
|
for (var i = 0; i < trafficWay.length; i++) {
|
|||
|
|
data.push(
|
|||
|
|
{
|
|||
|
|
value: trafficWay[i].value,
|
|||
|
|
name: trafficWay[i].name,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
borderWidth: 0,
|
|||
|
|
shadowBlur: 2,
|
|||
|
|
borderColor: color[i],
|
|||
|
|
shadowColor: color[i]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 2,
|
|||
|
|
name: "",
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
color: "rgba(0, 0, 0, 0)",
|
|||
|
|
borderColor: "rgba(0, 0, 0, 0)",
|
|||
|
|
borderWidth: 0
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
const seriesOption = reactive([
|
|||
|
|
// {
|
|||
|
|
// name: "ring5",
|
|||
|
|
// type: "custom",
|
|||
|
|
// coordinateSystem: "none",
|
|||
|
|
// renderItem: function (params, api) {
|
|||
|
|
// return {
|
|||
|
|
// type: "arc",
|
|||
|
|
// shape: {
|
|||
|
|
// cx: api.getWidth() / 4,
|
|||
|
|
// cy: api.getHeight() / 2,
|
|||
|
|
// r: 80,
|
|||
|
|
// startAngle: ((0 + angle.value) * Math.PI) / 180,
|
|||
|
|
// endAngle: ((90 + angle.value) * Math.PI) / 180
|
|||
|
|
// },
|
|||
|
|
// style: {
|
|||
|
|
// stroke: "#0CD3DB",
|
|||
|
|
// fill: "transparent",
|
|||
|
|
// lineWidth: 1.5
|
|||
|
|
// },
|
|||
|
|
// silent: true
|
|||
|
|
// };
|
|||
|
|
// },
|
|||
|
|
// data: [0]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "ring5",
|
|||
|
|
// type: "custom",
|
|||
|
|
// coordinateSystem: "none",
|
|||
|
|
// renderItem: function (params, api) {
|
|||
|
|
// return {
|
|||
|
|
// type: "arc",
|
|||
|
|
// shape: {
|
|||
|
|
// cx: api.getWidth() / 4,
|
|||
|
|
// cy: api.getHeight() / 2,
|
|||
|
|
// r: 80,
|
|||
|
|
// startAngle: ((180 + angle.value) * Math.PI) / 180,
|
|||
|
|
// endAngle: ((270 + angle.value) * Math.PI) / 180
|
|||
|
|
// },
|
|||
|
|
// style: {
|
|||
|
|
// stroke: "#0CD3DB",
|
|||
|
|
// fill: "transparent",
|
|||
|
|
// lineWidth: 1.5
|
|||
|
|
// },
|
|||
|
|
// silent: true
|
|||
|
|
// };
|
|||
|
|
// },
|
|||
|
|
// data: [0]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "ring5",
|
|||
|
|
// type: "custom",
|
|||
|
|
// coordinateSystem: "none",
|
|||
|
|
// renderItem: function (params, api) {
|
|||
|
|
// return {
|
|||
|
|
// type: "arc",
|
|||
|
|
// shape: {
|
|||
|
|
// cx: api.getWidth() / 4,
|
|||
|
|
// cy: api.getHeight() / 2,
|
|||
|
|
// r: 90,
|
|||
|
|
// startAngle: ((270 + -angle.value) * Math.PI) / 180,
|
|||
|
|
// endAngle: ((40 + -angle.value) * Math.PI) / 180
|
|||
|
|
// },
|
|||
|
|
// style: {
|
|||
|
|
// stroke: "#0CD3DB",
|
|||
|
|
// fill: "transparent",
|
|||
|
|
// lineWidth: 1.5
|
|||
|
|
// },
|
|||
|
|
// silent: true
|
|||
|
|
// };
|
|||
|
|
// },
|
|||
|
|
// data: [0]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "ring5",
|
|||
|
|
// type: "custom",
|
|||
|
|
// coordinateSystem: "none",
|
|||
|
|
// renderItem: function (params, api) {
|
|||
|
|
// return {
|
|||
|
|
// type: "arc",
|
|||
|
|
// shape: {
|
|||
|
|
// cx: api.getWidth() / 4,
|
|||
|
|
// cy: api.getHeight() / 2,
|
|||
|
|
// r: 90,
|
|||
|
|
// startAngle: ((90 + -angle.value) * Math.PI) / 180,
|
|||
|
|
// endAngle: ((220 + -angle.value) * Math.PI) / 180
|
|||
|
|
// },
|
|||
|
|
// style: {
|
|||
|
|
// stroke: "#0CD3DB",
|
|||
|
|
// fill: "transparent",
|
|||
|
|
// lineWidth: 1.5
|
|||
|
|
// },
|
|||
|
|
// silent: true
|
|||
|
|
// };
|
|||
|
|
// },
|
|||
|
|
// data: [0]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "ring5",
|
|||
|
|
// type: "custom",
|
|||
|
|
// coordinateSystem: "none",
|
|||
|
|
// renderItem: function (params, api) {
|
|||
|
|
// let x0 = api.getWidth() / 4;
|
|||
|
|
// let y0 = api.getHeight() / 2;
|
|||
|
|
// let r = 90;
|
|||
|
|
// let point = getCirlPoint(x0, y0, r, 90 + -angle.value);
|
|||
|
|
// return {
|
|||
|
|
// type: "circle",
|
|||
|
|
// shape: {
|
|||
|
|
// cx: point.x,
|
|||
|
|
// cy: point.y,
|
|||
|
|
// r: 4
|
|||
|
|
// },
|
|||
|
|
// style: {
|
|||
|
|
// stroke: "#0CD3DB", //粉
|
|||
|
|
// fill: "#0CD3DB"
|
|||
|
|
// },
|
|||
|
|
// silent: true
|
|||
|
|
// };
|
|||
|
|
// },
|
|||
|
|
// data: [0]
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: "ring5", //绿点
|
|||
|
|
// type: "custom",
|
|||
|
|
// coordinateSystem: "none",
|
|||
|
|
// renderItem: function (params, api) {
|
|||
|
|
// let x0 = api.getWidth() / 4;
|
|||
|
|
// let y0 = api.getHeight() / 2;
|
|||
|
|
// let r = 90;
|
|||
|
|
// let point = getCirlPoint(x0, y0, r, 270 + -angle.value);
|
|||
|
|
// return {
|
|||
|
|
// type: "circle",
|
|||
|
|
// shape: {
|
|||
|
|
// cx: point.x,
|
|||
|
|
// cy: point.y,
|
|||
|
|
// r: 4
|
|||
|
|
// },
|
|||
|
|
// style: {
|
|||
|
|
// stroke: "#0CD3DB", //绿
|
|||
|
|
// fill: "#0CD3DB"
|
|||
|
|
// },
|
|||
|
|
// silent: true
|
|||
|
|
// };
|
|||
|
|
// },
|
|||
|
|
// data: [0]
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
name: "",
|
|||
|
|
type: "pie",
|
|||
|
|
center: ["25%", "50%"],
|
|||
|
|
clockWise: false,
|
|||
|
|
radius: [70, 60],
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: data
|
|||
|
|
},
|
|||
|
|
//
|
|||
|
|
// {
|
|||
|
|
// type: 'pie',
|
|||
|
|
// radius: [70, 70],
|
|||
|
|
// hoverAnimation: false,
|
|||
|
|
// clockWise: false,
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// borderColor: '#34B0FA',
|
|||
|
|
// borderWidth: 1,
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// label: {
|
|||
|
|
// show: false
|
|||
|
|
// },
|
|||
|
|
// data: [200]
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
type: "pie",
|
|||
|
|
center: ["25%", "50%"],
|
|||
|
|
|
|||
|
|
radius: [50, 50],
|
|||
|
|
zlevel: 2,
|
|||
|
|
silent: true,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
normal: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: _pie3()
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const option = reactive({
|
|||
|
|
// backgroundColor: "#0A2E5D",
|
|||
|
|
color: color,
|
|||
|
|
center: ["25%", "50%"],
|
|||
|
|
|
|||
|
|
title: {
|
|||
|
|
text: "出勤总人数",
|
|||
|
|
top: "125",
|
|||
|
|
|
|||
|
|
textAlign: "center",
|
|||
|
|
left: "24%",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: 12,
|
|||
|
|
fontWeight: "400"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
icon: "rect",
|
|||
|
|
itemGap: 20,
|
|||
|
|
itemWidth: 15,
|
|||
|
|
itemHeight: 15,
|
|||
|
|
orient: "vertical",
|
|||
|
|
x: "right",
|
|||
|
|
formatter: function (name) {
|
|||
|
|
let num;
|
|||
|
|
for (let i = 0; i < totalData.length; i++) {
|
|||
|
|
if (totalData[i].name === name) {
|
|||
|
|
let cont = 8;
|
|||
|
|
let stringArr = "";
|
|||
|
|
if (name.length == 4) {
|
|||
|
|
cont = 18;
|
|||
|
|
} else if (name.length == 5) {
|
|||
|
|
cont = 15;
|
|||
|
|
}
|
|||
|
|
for (let j = 0; j < cont; j++) {
|
|||
|
|
stringArr += " ";
|
|||
|
|
}
|
|||
|
|
num = " " + name + stringArr + totalData[i].value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return num;
|
|||
|
|
},
|
|||
|
|
data: ["XX有限公司1", "XX有限公司2", "XX有限公司3", "XX有限公司4", "XX有限公司5", "XX有限公司6"],
|
|||
|
|
|
|||
|
|
right: 400,
|
|||
|
|
left: 260,
|
|||
|
|
bottom: 30,
|
|||
|
|
align: "left",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff"
|
|||
|
|
},
|
|||
|
|
itemGap: 15
|
|||
|
|
},
|
|||
|
|
toolbox: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
series: seriesOption
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function _pie3() {
|
|||
|
|
let dataArr = [];
|
|||
|
|
for (var i = 0; i < 100; i++) {
|
|||
|
|
if (i % 2 === 0) {
|
|||
|
|
dataArr.push({
|
|||
|
|
name: (i + 1).toString(),
|
|||
|
|
value: 10,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: "#5A5DE0",
|
|||
|
|
borderWidth: 4,
|
|||
|
|
borderColor: "#87E0FB"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
dataArr.push({
|
|||
|
|
name: (i + 1).toString(),
|
|||
|
|
value: 20,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: "rgba(0,0,0,0)",
|
|||
|
|
borderWidth: 0,
|
|||
|
|
borderColor: "rgba(0,0,0,0)"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return dataArr;
|
|||
|
|
}
|
|||
|
|
// //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
|||
|
|
// function getCirlPoint(x0, y0, r, angle) {
|
|||
|
|
// let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
|
|||
|
|
// let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
|
|||
|
|
// return {
|
|||
|
|
// x: x1,
|
|||
|
|
// y: y1
|
|||
|
|
// };
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// function draw(echartsTest) {
|
|||
|
|
// angle.value = angle.value + 3;
|
|||
|
|
// echartsTest.setOption(option, true);
|
|||
|
|
// //window.requestAnimationFrame(draw);
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
let echartsTest = echarts.init(document.getElementById("echartsRight"));
|
|||
|
|
echartsTest.setOption(option, true);
|
|||
|
|
// setTimeout(function () {
|
|||
|
|
// timer = setInterval(function () {
|
|||
|
|
// // //用setInterval做动画感觉有问题
|
|||
|
|
// draw(echartsTest);
|
|||
|
|
// }, 100);
|
|||
|
|
// }, 700);
|
|||
|
|
});
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
// clearInterval(timer);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.num {
|
|||
|
|
font-family: sadigitalNumber;
|
|||
|
|
font-size: calc(100vw * 24 / 1920);
|
|||
|
|
color: #fff;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 52.5%;
|
|||
|
|
left: 78.8%;
|
|||
|
|
z-index: 9;
|
|||
|
|
}
|
|||
|
|
.styleImg {
|
|||
|
|
left: 75.5%;
|
|||
|
|
top: 46%;
|
|||
|
|
width: 10%;
|
|||
|
|
position: absolute;
|
|||
|
|
height: 20%;
|
|||
|
|
background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|