|
@@ -9,57 +9,56 @@ export default {
|
|
|
show: false,
|
|
|
option: {
|
|
|
legend: {
|
|
|
- data: [
|
|
|
- '自有员工',
|
|
|
- '外协员工',
|
|
|
- '访客人员',
|
|
|
- ],
|
|
|
+ data: ["自有员工", "外协员工", "访客人员", "其他人员"],
|
|
|
selected: {
|
|
|
- '访客人员': false
|
|
|
- }
|
|
|
+ 访客人员: false,
|
|
|
+ 其他人员: false,
|
|
|
+ },
|
|
|
},
|
|
|
grid: {
|
|
|
- left: '1%', //默认10%
|
|
|
- right: '1%', //默认10%
|
|
|
- bottom: '20px', //默认60
|
|
|
- top: '60px',
|
|
|
- containLabel: true
|
|
|
+ left: "1%", //默认10%
|
|
|
+ right: "1%", //默认10%
|
|
|
+ bottom: "20px", //默认60
|
|
|
+ top: "60px",
|
|
|
+ containLabel: true,
|
|
|
//grid区域是否包含坐标轴的刻度标签
|
|
|
},
|
|
|
xAxis: {
|
|
|
- data: []
|
|
|
+ data: [],
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
- name: '人数(人)',
|
|
|
- type: 'value',
|
|
|
+ name: "人数(人)",
|
|
|
+ type: "value",
|
|
|
},
|
|
|
],
|
|
|
dataZoom: this.$constant.ECHARTS_OPTION_DATAZOOM,
|
|
|
tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
+ trigger: "axis",
|
|
|
axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
+ type: "shadow",
|
|
|
},
|
|
|
textStyle: {
|
|
|
- color: '#fff',
|
|
|
- align: 'left',
|
|
|
- fontSize: 14
|
|
|
+ color: "#fff",
|
|
|
+ align: "left",
|
|
|
+ fontSize: 14,
|
|
|
},
|
|
|
- axisLine: {//x坐标轴轴线
|
|
|
+ axisLine: {
|
|
|
+ //x坐标轴轴线
|
|
|
show: true,
|
|
|
- lineStyle: {//x坐标轴轴线样式
|
|
|
- color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)',设置标签颜色
|
|
|
- }
|
|
|
+ lineStyle: {
|
|
|
+ //x坐标轴轴线样式
|
|
|
+ color: "#000", //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)',设置标签颜色
|
|
|
+ },
|
|
|
},
|
|
|
- backgroundColor: 'rgba(0,0,0,0.8)',
|
|
|
+ backgroundColor: "rgba(0,0,0,0.8)",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: '自有员工',
|
|
|
+ name: "自有员工",
|
|
|
data: [],
|
|
|
- type: 'line',
|
|
|
- stack: 'x',
|
|
|
+ type: "line",
|
|
|
+ stack: "x",
|
|
|
smooth: true,
|
|
|
showSymbol: false,
|
|
|
areaStyle: {},
|
|
@@ -67,14 +66,14 @@ export default {
|
|
|
width: 1,
|
|
|
},
|
|
|
emphasis: {
|
|
|
- scale: 1.5
|
|
|
- }
|
|
|
+ scale: 1.5,
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
- name: '外协员工',
|
|
|
+ name: "外协员工",
|
|
|
data: [],
|
|
|
- type: 'line',
|
|
|
- stack: 'x',
|
|
|
+ type: "line",
|
|
|
+ stack: "x",
|
|
|
smooth: true,
|
|
|
showSymbol: false,
|
|
|
areaStyle: {},
|
|
@@ -82,14 +81,14 @@ export default {
|
|
|
width: 1,
|
|
|
},
|
|
|
emphasis: {
|
|
|
- scale: 1.5
|
|
|
+ scale: 1.5,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- name: '访客人员',
|
|
|
+ name: "访客人员",
|
|
|
data: [],
|
|
|
- type: 'line',
|
|
|
- stack: 'x',
|
|
|
+ type: "line",
|
|
|
+ stack: "x",
|
|
|
smooth: true,
|
|
|
showSymbol: false,
|
|
|
areaStyle: {},
|
|
@@ -97,13 +96,27 @@ export default {
|
|
|
width: 1,
|
|
|
},
|
|
|
emphasis: {
|
|
|
- scale: 1.5
|
|
|
+ scale: 1.5,
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
- ]
|
|
|
+ {
|
|
|
+ name: "其他人员",
|
|
|
+ data: [],
|
|
|
+ type: "line",
|
|
|
+ stack: "x",
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ scale: 1.5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
props: {
|
|
|
height: Number,
|
|
@@ -113,41 +126,54 @@ export default {
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
this.initChart();
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
initChart() {
|
|
|
- let chart = this.$echarts.init(this.$refs.myChart, null, {renderer: 'svg'})
|
|
|
+ let chart = this.$echarts.init(this.$refs.myChart, null, {
|
|
|
+ renderer: "svg",
|
|
|
+ });
|
|
|
this.chart = chart;
|
|
|
this.$util.chartsResize(this.chart);
|
|
|
- chart.setOption(this.option)
|
|
|
+ chart.setOption(this.option);
|
|
|
for (let i = 0; i < 5; i++) {
|
|
|
setTimeout(function () {
|
|
|
- chart.resize()
|
|
|
- }, 500 * i)
|
|
|
+ chart.resize();
|
|
|
+ }, 500 * i);
|
|
|
}
|
|
|
- this.getData()
|
|
|
+ this.getData();
|
|
|
},
|
|
|
getData() {
|
|
|
this.loading = true;
|
|
|
- return apiDashboard.getPersonEnterSummary(this.queryData).then(res => {
|
|
|
- let data = this.$util.dataUtil.covertDataToEcharts(res, [ 'ownEmployees', 'outsourcingStaff', 'visitors',])
|
|
|
- this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
|
|
|
- this.loading = false;
|
|
|
- }).catch(err=>{
|
|
|
- this.loading = false;
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ return apiDashboard
|
|
|
+ .getPersonEnterSummary(this.queryData)
|
|
|
+ .then((res) => {
|
|
|
+ let data = this.$util.dataUtil.covertDataToEcharts(res, [
|
|
|
+ "ownEmployees",
|
|
|
+ "outsourcingStaff",
|
|
|
+ "visitors",
|
|
|
+ "others"
|
|
|
+ ]);
|
|
|
+ this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data);
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<a-spin :spinning="loading">
|
|
|
- <div id="personTrendChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
|
|
|
+ <div
|
|
|
+ id="personTrendChart"
|
|
|
+ style="width: 100%"
|
|
|
+ :style="{ height: height + 'px' }"
|
|
|
+ ref="myChart"
|
|
|
+ ></div>
|
|
|
</a-spin>
|
|
|
</template>
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
-
|
|
|
-</style>
|
|
|
+<style lang="less" scoped></style>
|