<!-- 图表 -->
<template>
<div>
<div id="main" style="width: 1000px;height: 500px;margin:0 auto"></div>
</div>
</template>
<script>
import fetch from "@/utils/fetch.js";
import { Message } from "element-ui";
import store from "@/store";
import echarts from "echarts";
export default {
mounted() {
this.init();
},
data() {
return {
conf: {
parameters: {
State: "1"
},
dir: "asc",
sort: "id"
},
myChart: null,
timer: null, // 定时器名称
data: [],
week: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
categories: [],
types: [
{
name: "上午",
color: "#C1232B"
},
{
name: "下午",
color: "#27727B"
},
{
name: "晚上",
color: "#FCCE10"
}
],
strymd:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate() +
" ",
nowWeek: new Date().getDay() - 1,
option: null
};
},
methods: {
init() {
fetch.get("api/atmain").then(res => {
if (res.code == "0") {
this.myChart = echarts.init(document.getElementById("main"));
var set = new Set();
for (var i = 0; i < res.data.length; i++) {
set.add(res.data[i].timeUserName);
}
this.categories = Array.from(set);
this.reorganizeData(res.data);
this.buildChart();
}
});
},
// 整理数据
reorganizeData(data) {
var getedData = [];
for (var w = 0; w < this.week.length; w++) {
var tempList = [];
for (var m = 0; m < data.length; m++) {
if (data[m].timeWeek == this.week[w]) {
tempList.push(data[m]);
}
}
var tempList3 = [];
for (var o = 0; o < this.categories.length; o++) {
var tempList2 = [];
for (var n = 0; n < tempList.length; n++) {
if (tempList[n].timeUserName == this.categories[o]) {
tempList2.push(tempList[n]);
}
}
var tempObj = {};
tempObj["timeUserName"] = this.categories[o];
tempObj["timeWeek"] = this.week[w];
for (var t = 0; t < this.types.length; t++) {
var flag = false;
for (var n = 0; n < tempList2.length; n++) {
if (tempList2[n].timeType == this.types[t].name) {
tempObj[this.types[t].name] = [
new Date(this.strymd + tempList2[n].timeq + ":00").getTime(),
new Date(this.strymd + tempList2[n].timez + ":00").getTime()
];
flag = true;
}
}
if (!flag) {
var tempDate = new Date().getTime();
tempObj[this.types[t].name] = [tempDate, tempDate];
}
}
tempList3.push(tempObj);
}
getedData.push(tempList3);
}
for (var n = 0; n < this.week.length; n++) {
var tempList = [];
for (var m = 0; m < this.categories.length; m++) {
for (var i = 0; i < this.types.length; i++) {
var typeItem = this.types[i];
var dateItem = getedData[n][m][this.types[i].name];
tempList.push({
name: typeItem.name,
value: [
m,
dateItem[0],
dateItem[1],
dateItem[1] - dateItem[0],
getedData[n][m].timeUserName,
getedData[n][m].timeWeek
],
itemStyle: {
normal: {
color: typeItem.color
}
}
});
}
}
this.data.push(tempList);
}
},
buildChart() {
var that = this;
this.option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
},
formatter: function(params) {
var result = params[0].axisValue + "<br>";
for (var i in params) {
if (params[i].value[1] != params[i].value[2])
result +=
params[i].marker +
params[i].name +
": " +
that.formatDate(params[i].value[1]) +
"-" +
that.formatDate(params[i].value[2]) +
"<br>";
}
//return params.marker + params.name + ': ' + params.value[3] + ' ms';
return result;
}
},
title: {
text: "出勤时间表"
},
legend: {
data: this.week,
selectedMode: "single",
selected: {
周一: false,
周二: false,
周三: false,
周四: false,
周五: false,
周六: false,
周日: false
}
},
grid: {
//height: 300,
},
dataZoom: [
{
type: "slider",
filterMode: "weakFilter",
showDataShadow: false,
bottom: 0,
height: 20,
borderColor: "transparent",
backgroundColor: "#e2e2e2",
handleIcon:
"M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z", // jshint ignore:line
handleSize: 20,
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: "#aaa"
},
labelFormatter: ""
},
{
type: "inside",
filterMode: "weakFilter"
},
{
type: "slider",
yAxisIndex: 0,
zoomLock: true,
width: 10,
right: 10,
top: 70,
bottom: 20,
start: 0,
end: 100,
handleSize: 0,
showDetail: false
},
{
type: "inside",
id: "insideY",
yAxisIndex: 0,
start: 95,
end: 100,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true
}
],
xAxis: {
type: "time",
min: new Date(this.strymd + "08:00:00").getTime(),
splitLine: {
lineStyle: {
color: ["#E9EDFF"]
}
},
axisLine: {
show: false
},
axisTick: {
lineStyle: {
color: "#929ABA"
}
},
axisLabel: {
color: "#929ABA",
inside: false,
align: "center"
}
},
yAxis: [
{
data: this.categories
},
{
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
}
],
series: [
{
name: "周一",
type: "custom",
renderItem: this.renderItem,
encode: {
x: [1, 2],
y: 0
},
data: this.data[0]
},
{
name: "周二",
type: "custom",
renderItem: this.renderItem,
encode: {
x: [1, 2],
y: 0
},
data: this.data[1]
},
{
name: "周三",
type: "custom",
renderItem: this.renderItem,
encode: {
x: [1, 2],
y: 0
},
data: this.data[2]
},
{
name: "周四",
type: "custom",
renderItem: this.renderItem,
encode: {
x: [1, 2],
y: 0
},
data: this.data[3]
},
{
name: "周五",
type: "custom",
renderItem: this.renderItem,
encode: {
x: [1, 2],
y: 0
},
data: this.data[4]
},
{
name: "周六",
type: "custom",
renderItem: this.renderItem,
encode: {
x: [1, 2],
y: 0
},
data: this.data[5]
},
{
name: "周日",
type: "custom",
renderItem: this.renderItem,
encode: {
x: [1, 2],
y: 0
},
data: this.data[6]
},
{
markLine: {
label: {
show: true,
formatter: "当前时间"
},
data: [
{
xAxis: new Date().getTime()
}
],
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#000" // 0% 处的颜色
},
{
offset: 1,
color: "#888" // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
type: "line"
}
]
};
this.option.legend.selected[this.week[this.nowWeek]] = true;
this.myChart.setOption(this.option);
//每五分钟刷新一次当前时间标记线
this.timer = setInterval(() => {
this.option.series[7].markLine.data[0].xAxis = new Date().getTime();
this.myChart.setOption(this.option);
}, 50000);
// 通过$once来监听定时器
// 在beforeDestroy钩子触发时清除定时器
this.$once("hook:beforeDestroy", () => {
clearInterval(this.timer);
});
},
formatDate(timestamp) {
var date = new Date(timestamp);
var hour = date.getHours();
var minute = date.getMinutes();
if (hour < 10) hour = "0" + hour;
if (minute < 10) minute = "0" + minute;
return hour + ":" + minute;
},
renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: "rect",
shape: rectShape,
style: api.style()
}
);
}
}
};
</script>
<style scoped>
</style>
