103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
<template>
|
|
<div
|
|
id="details"
|
|
style="width: 100%; height: 300px"
|
|
v-loading="Loading"
|
|
></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import { details } 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 details({ month: this.month });
|
|
var xData = [];
|
|
var yData = [];
|
|
data.forEach(function (v, k) {
|
|
xData.push(v.date);
|
|
yData.push(v.count);
|
|
});
|
|
this.xData = xData;
|
|
this.yData = yData;
|
|
},
|
|
drawPieChart() {
|
|
this.chartPie = echarts.init(document.getElementById('details'));
|
|
this.chartPie.setOption({
|
|
tooltip: {
|
|
trigger: 'item',
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
},
|
|
title: {
|
|
left: 'center',
|
|
text: '详情分析',
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisLabel: { interval: 0, rotate: 270 },
|
|
data: this.xData,
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'line',
|
|
barWidth: '60%',
|
|
data: this.yData,
|
|
},
|
|
],
|
|
});
|
|
this.Loading = false;
|
|
},
|
|
drawCharts() {
|
|
this.drawPieChart();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|