对接首页统计图接口

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,90 +358,108 @@ export default {
     },
     /** 代言人文章视频推广次数统计*/
     handleGetPeoplePromotionFrequency() {
-      const myChartPeoplePromotionFrequency = echarts.init(document.getElementById('dataCharts_peoplePromotionFrequency'))
-      const optionAverage = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
+      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: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'shadow'
+              }
+            },
+            grid: {
+              left: '10%', // 距离左侧的距离
+              right: '10%', // 距离右侧的距离
+              bottom: '3%', // 距离底部的距离
+              top: '3%', // 距离顶部的距离
+              containLabel: true // 包含坐标轴的标签
+            },
+            xAxis: {
+              type: 'category',
+              // data: ['张三', '李四', '王五', '赵六', '张思佳', '王门也', '林斯基', '测试', '用户3', '用户4', '用户5']
+              data: this.barNameList
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: [{
+              name: '文章',
+              type: 'bar',
+              itemStyle: {
+                // 设置柱状图的颜色
+                color: '#91CC75'
+              },
+              // data: [10, 39, 6, 50, 34, 8, 51, 9, 33, 20, 60]
+              data: this.barArticle
+            },
+            {
+              name: '视频',
+              type: 'bar',
+              itemStyle: {
+                // 设置柱状图的颜色
+                color: '#5470C6'
+              },
+              // data: [25, 7, 33, 32, 22, 22, 20, 34, 40, 30, 10]
+              data: this.barVideo
+            }]
           }
-        },
-        grid: {
-          left: '10%', // 距离左侧的距离
-          right: '10%', // 距离右侧的距离
-          bottom: '3%', // 距离底部的距离
-          top: '3%', // 距离顶部的距离
-          containLabel: true // 包含坐标轴的标签
-        },
-        xAxis: {
-          type: 'category',
-          data: ['张三', '李四', '王五', '赵六', '张思佳', '王门也', '林斯基', '测试', '用户3', '用户4', '用户5']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [{
-          name: '文章',
-          type: 'bar',
-          itemStyle: {
-            // 设置柱状图的颜色
-            color: '#91CC75'
-          },
-          data: [10, 39, 6, 50, 34, 8, 51, 9, 33, 20, 60]
-        },
-        {
-          name: '视频',
-          type: 'bar',
-          itemStyle: {
-            // 设置柱状图的颜色
-            color: '#5470C6'
-          },
-          data: [25, 7, 33, 32, 22, 22, 20, 34, 40, 30, 10]
-        }]
-      }
-      myChartPeoplePromotionFrequency.setOption(optionAverage)
+          myChartPeoplePromotionFrequency.setOption(optionAverage)
+        }
+      })
     },
     /** 代言人文章视频饼图*/
     handleGetPeopleTextPie() {
-      const myChartPeopleTextPie = echarts.init(document.getElementById('dataCharts_textPieChart'))
-      const optionAverage = {
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          show: false
-        },
-        series: [
-          {
-            name: '文章',
-            type: 'pie',
-            radius: '85%',
-            center: ['25%', '50%'], // 设置饼图的中心位置
-            data: [
-              { value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
-              { value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
-              { value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
-              { value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
-              { value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
-            ]
-          },
-          {
-            name: '视频',
-            type: 'pie',
-            radius: '85%',
-            center: ['75%', '50%'], // 设置饼图的中心位置
-            data: [
-              { value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
-              { value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
-              { value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
-              { value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
-              { value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
+      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: {
+              trigger: 'item',
+              formatter: '{a} <br/>{b} : {c} ({d}%)'
+            },
+            legend: {
+              show: false
+            },
+            series: [
+              {
+                name: '文章',
+                type: 'pie',
+                radius: '85%',
+                center: ['25%', '50%'], // 设置饼图的中心位置
+                data: [
+                  { value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
+                  { value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
+                  { value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
+                  { value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
+                  { value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
+                ]
+              },
+              {
+                name: '视频',
+                type: 'pie',
+                radius: '85%',
+                center: ['75%', '50%'], // 设置饼图的中心位置
+                data: [
+                  { value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
+                  { value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
+                  { value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
+                  { value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
+                  { value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
+                ]
+              }
             ]
           }
-        ]
-      }
-      myChartPeopleTextPie.setOption(optionAverage)
+          myChartPeopleTextPie.setOption(optionAverage)
+        }
+      })
     }
   }
 }