99 lines
1.9 KiB
Vue
99 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div id="module" style="width: 100%; height: 300px" v-loading="Loading"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
import { module } from '@/api/sys';
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
time: {
|
||
|
|
type: String,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chartPie: null,
|
||
|
|
Loading: true,
|
||
|
|
yData: [],
|
||
|
|
xData: [],
|
||
|
|
month: '',
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
time(value) {
|
||
|
|
this.month = value;
|
||
|
|
this.getUserAnalysis();
|
||
|
|
setTimeout(() => {
|
||
|
|
this.drawCharts();
|
||
|
|
}, 2000);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted: function () {},
|
||
|
|
methods: {
|
||
|
|
async getUserAnalysis() {
|
||
|
|
const { data } = await module({ month: this.month });
|
||
|
|
var xData = [];
|
||
|
|
var yData = [];
|
||
|
|
data.forEach(function (v, k) {
|
||
|
|
xData.push(v.module);
|
||
|
|
yData.push(v.count);
|
||
|
|
});
|
||
|
|
this.xData = xData;
|
||
|
|
this.yData = yData;
|
||
|
|
},
|
||
|
|
drawPieChart() {
|
||
|
|
this.chartPie = echarts.init(document.getElementById('module'));
|
||
|
|
this.chartPie.setOption({
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
left: '部门分析',
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
axisLabel: { interval: 0, rotate: 270 },
|
||
|
|
data: this.xData,
|
||
|
|
axisTick: {
|
||
|
|
alignWithLabel: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
title: '111',
|
||
|
|
type: 'value',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '数量',
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: '60%',
|
||
|
|
data: this.yData,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
this.Loading = false;
|
||
|
|
},
|
||
|
|
drawCharts() {
|
||
|
|
this.drawPieChart();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped></style>
|