|
|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <normal-card
|
|
|
+ trigger="hover"
|
|
|
+ shadow="always"
|
|
|
+ title="工具使用分析"
|
|
|
+ showMenu
|
|
|
+ :menuItems="menuItems"
|
|
|
+ :bodyStyle="{height: '400px'}"
|
|
|
+ >
|
|
|
+ <template v-slot:content>
|
|
|
+ <base-pie-chart
|
|
|
+ :options="pieOptions"
|
|
|
+ width="40%"
|
|
|
+ />
|
|
|
+
|
|
|
+ <base-line-chart
|
|
|
+ :options="lineOptions"
|
|
|
+ width="60%"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </normal-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import NormalCard from '@/components/Card/NormalCard'
|
|
|
+import BasePieChart from '@/components/Charts/BasePieChart'
|
|
|
+import BaseLineChart from '@/components/Charts/BaseLineChart'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ NormalCard,
|
|
|
+ BasePieChart,
|
|
|
+ BaseLineChart,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ countData: {
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+ total: {
|
|
|
+ type: Number
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 初始化用户设备饼图统计数据
|
|
|
+ this.initPieChart()
|
|
|
+ // 初始化用户设备折线图统计数据
|
|
|
+ this.initLineChart()
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 用户设备状态数据
|
|
|
+ pieColor: [],
|
|
|
+ pieData: [],
|
|
|
+ pieOptions: {},
|
|
|
+ // 增长趋势数据
|
|
|
+ lineSeriesData: [],
|
|
|
+ lineLegendData: [],
|
|
|
+ lineX: [],
|
|
|
+ lineOptions: {},
|
|
|
+ menuItems: [
|
|
|
+ {
|
|
|
+ name: '全屏',
|
|
|
+ command: 'full',
|
|
|
+ icon: 'full-screen',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ countData: function(val) {
|
|
|
+ this.initPieChart()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化饼图统计数据
|
|
|
+ initPieChart() {
|
|
|
+ this.pieData = [];
|
|
|
+ if (this.countData.device_type_data && this.countData.device_type_data.length) {
|
|
|
+ this.countData.device_type_data.forEach(item => {
|
|
|
+ this.pieData.push({
|
|
|
+ name: item.text,
|
|
|
+ value: item.total,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 设置选项
|
|
|
+ this.pieOptions = this.getpieOptions()
|
|
|
+ },
|
|
|
+ // 饼图配置项
|
|
|
+ getpieOptions() {
|
|
|
+ return {
|
|
|
+ color: this.pieColor,
|
|
|
+ title: {
|
|
|
+ text: '工具使用统计',
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: '600',
|
|
|
+ fontSize: '15',
|
|
|
+ color: '#000'
|
|
|
+ },
|
|
|
+ subtext: '统计一周内所有工具使用占比'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c}（{d}%）'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ type: 'scroll',
|
|
|
+ icon: 'circle',
|
|
|
+ bottom: '0',
|
|
|
+ // orient: 'vertical',
|
|
|
+ formatter: (name) => {
|
|
|
+ var arr = this.pieData.filter(function(item){
|
|
|
+ return name == item.name;
|
|
|
+ });
|
|
|
+ if(arr.length){
|
|
|
+ return arr[0].name + ' ' + arr[0].value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ graphic:{
|
|
|
+ type: "text",
|
|
|
+ left: "center",
|
|
|
+ top: "center",
|
|
|
+ style:{
|
|
|
+ text: this.total,
|
|
|
+ // fill: "#000",
|
|
|
+ fontSize: 30,
|
|
|
+ fontWeight: 700
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '使用次数',
|
|
|
+ type: 'pie',
|
|
|
+ label: {
|
|
|
+ // show: false,
|
|
|
+ formatter: '{b} : {c}（{d}%）',
|
|
|
+ position: 'outer',
|
|
|
+ alignTo: 'labelLine',
|
|
|
+ bleedMargin: 5
|
|
|
+ },
|
|
|
+ radius: ['45%', '60%'], // 内外半径
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: this.pieData,
|
|
|
+ animationEasing: 'cubicInOut',
|
|
|
+ animationDuration: 2600
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 初始化用户设备增长趋势数据
|
|
|
+ initLineChart() {
|
|
|
+ this.$http.get('total/getDeviceGrowthTrendData')
|
|
|
+ .then(resp => {
|
|
|
+ if (resp.code === 10000) {
|
|
|
+ this.lineOptions = []
|
|
|
+ this.lineX = []
|
|
|
+
|
|
|
+ if (!resp.data || !resp.data.length) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.lineX = Object.keys(resp.data[0].data)
|
|
|
+ resp.data.forEach(item => {
|
|
|
+ // 折线图配置
|
|
|
+ this.lineSeriesData.push({
|
|
|
+ name: item.name,
|
|
|
+ data: Object.values(item.data),
|
|
|
+ type: "line",
|
|
|
+ // smooth: false, //是否平滑曲线显示
|
|
|
+ })
|
|
|
+ //
|
|
|
+ this.lineLegendData.push(item.name)
|
|
|
+ })
|
|
|
+ this.lineOptions = this.getlineOptions()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取用户设备增长趋势配置项
|
|
|
+ getlineOptions() {
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text: '工具使用统计',
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: '600',
|
|
|
+ fontSize: '15',
|
|
|
+ color: '#000'
|
|
|
+ },
|
|
|
+ subtext: '工具使用次数趋势'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ data: this.lineLegendData,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: this.lineX,
|
|
|
+ boundaryGap: false,
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ minInterval: 1,
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: this.lineSeriesData
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|
tongshanglei