对接首页统计图接口

src/api/dashboard.js

@@ -8,3 +8,19 @@ export function statistics(query) {
     params: query
   })
 }
+// 代言人推广次数
+export function barChar(query) {
+  return request({
+    url: '/sysunit/statisticsByTypeBarChart',
+    method: 'get',
+    params: query
+  })
+}
+// 文章视频推广次数
+export function pieChart(query) {
+  return request({
+    url: '/sysunit/statisticsByTypePieChart',
+    method: 'get',
+    params: query
+  })
+}

src/views/dashboard/index/index.vue

@@ -139,7 +139,7 @@
 <script>
 import * as echarts from 'echarts'
 import { listAllShop } from '@/api/sysUnit'
-import { statistics } from '@/api/dashboard'
+import { barChar, pieChart, statistics } from '@/api/dashboard'
 import { mapGetters } from 'vuex'
 export default {
   name: 'Index',
@@ -170,7 +170,10 @@ export default {
         orderCount: 0,
         userCount: 0
       },
-      company: ''
+      company: '',
+      barNameList: [], // 柱状图姓名列表
+      barArticle: [], // 柱状图文章数量
+      barVideo: [] // 柱状图视频数量
     }
   },
   computed: {
@@ -185,10 +188,6 @@ export default {
     // this.roleFunction()
   },
   mounted() {
-    this.handleGetTextVideoEcharts() // 文章视频echarts更新
-    this.handleGetPeoplePromotionFrequency() // 代言人文章视频推广次数统计
-    this.handleGetPeopleTextPie() // 代言人文章视频饼图
-
     // 通过监听内容部分的宽度让图表resize
     var elementResizeDetectorMaker = require('element-resize-detector')
     var erd = elementResizeDetectorMaker()
@@ -231,6 +230,7 @@ export default {
     /** 切换所属商家*/
     changeCompany() {
       this.getTableData() // 代言人，文章，视频数据
+      this.handleGetPeoplePromotionFrequency()
       this.deptList.forEach(item => {
         if (item.businessId === this.company) {
           this.companyName = item.unitName
@@ -246,6 +246,9 @@ export default {
             this.company = this.deptList[0].businessId
             this.companyName = this.deptList[0].unitName
             this.getTableData() // 代言人，文章，视频数据
+            this.handleGetTextVideoEcharts() // 文章视频echarts更新
+            this.handleGetPeoplePromotionFrequency() // 代言人文章视频推广次数统计
+            this.handleGetPeopleTextPie() // 代言人文章视频饼图
           }
         })
       })
@@ -280,6 +283,7 @@ export default {
       this.handleGetTextVideoEcharts()
     },
     /** 文章视频echarts更新*/
+    // 文章视频推广次数柱状图
     handleGetTextVideoEcharts() {
       if (this.isActive === '1') {
         const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
@@ -354,6 +358,14 @@ export default {
     },
     /** 代言人文章视频推广次数统计*/
     handleGetPeoplePromotionFrequency() {
+      barChar({ businessId: this.company }).then(res => {
+        console.log('res', res)
+        if (res.code === 200) {
+          const barChar = res.data
+          this.barNameList = barChar.map(item => item.name)
+          this.barArticle = barChar.map(item => item.newsRate)
+          this.barVideo = barChar.map(item => item.videoRate)
+          console.log('this.barNameList', this.barNameList)
           const myChartPeoplePromotionFrequency = echarts.init(document.getElementById('dataCharts_peoplePromotionFrequency'))
           const optionAverage = {
             tooltip: {
@@ -371,7 +383,8 @@ export default {
             },
             xAxis: {
               type: 'category',
-          data: ['张三', '李四', '王五', '赵六', '张思佳', '王门也', '林斯基', '测试', '用户3', '用户4', '用户5']
+              // data: ['张三', '李四', '王五', '赵六', '张思佳', '王门也', '林斯基', '测试', '用户3', '用户4', '用户5']
+              data: this.barNameList
             },
             yAxis: {
               type: 'value'
@@ -383,7 +396,8 @@ export default {
                 // 设置柱状图的颜色
                 color: '#91CC75'
               },
-          data: [10, 39, 6, 50, 34, 8, 51, 9, 33, 20, 60]
+              // data: [10, 39, 6, 50, 34, 8, 51, 9, 33, 20, 60]
+              data: this.barArticle
             },
             {
               name: '视频',
@@ -392,13 +406,19 @@ export default {
                 // 设置柱状图的颜色
                 color: '#5470C6'
               },
-          data: [25, 7, 33, 32, 22, 22, 20, 34, 40, 30, 10]
+              // data: [25, 7, 33, 32, 22, 22, 20, 34, 40, 30, 10]
+              data: this.barVideo
             }]
           }
           myChartPeoplePromotionFrequency.setOption(optionAverage)
+        }
+      })
     },
     /** 代言人文章视频饼图*/
     handleGetPeopleTextPie() {
+      pieChart({ businessId: this.company }).then(res => {
+        if (res.code === 200) {
+          console.log("饼状图",res.data)
           const myChartPeopleTextPie = echarts.init(document.getElementById('dataCharts_textPieChart'))
           const optionAverage = {
             tooltip: {
@@ -439,6 +459,8 @@ export default {
           }
           myChartPeopleTextPie.setOption(optionAverage)
         }
+      })
+    }
   }
 }
 </script>