首页统计

src/api/statistics/statistics.js

@@ -175,3 +175,31 @@ export function deaMemberTopTen(param){
     data: safeParam
   })
 }
+
+/**
+ * 课程观看TOP10
+ * @param param
+ * @returns {AxiosPromise}
+ */
+export function courseWatchOption(param){
+  const safeParam = JSON.parse(JSON.stringify(param));
+
+  if (safeParam.startTime) {
+    const startDate = new Date(safeParam.startTime);
+    if (!isNaN(startDate.getTime())) {
+      safeParam.startTime = `${safeParam.startTime.trim()} 00:00:00`;
+    }
+  }
+
+  if (safeParam.endTime) {
+    const endDate = new Date(safeParam.endTime);
+    if (!isNaN(endDate.getTime())) {
+      safeParam.endTime = `${safeParam.endTime.trim()} 23:59:59`;
+    }
+  }
+  return request({
+    url: '/index/statistics/courseWatchOption',
+    method: 'post',
+    data: safeParam
+  })
+}

src/views/statistics/index.vue

@@ -256,6 +256,43 @@
         </el-card>
       </el-col>
     </el-row>
+    <el-card shadow="never">
+      <div slot="header" class="chart-header">
+        <span>经销商会员观看TOP10</span>
+        <div class="legend">
+          <el-radio-group v-model="viewerType" size="small" @change="handleDealerChartData">
+            <el-radio-button label="0">按观看人数</el-radio-button>
+            <el-radio-button label="1">按完播人数</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="legend">
+          <el-radio-group v-model="radio">
+            <el-radio :label="3">前10名</el-radio>
+            <el-radio :label="6">倒数10名</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="legend">
+          <div class="legend-item">
+            <span class="dot viewer-dot"></span>
+            <span>观看人数</span>
+          </div>
+          <div class="legend-item">
+            <span class="dot complete-dot"></span>
+            <span>完播人数</span>
+          </div>
+          <div class="legend-item">
+            <span class="dot" style="background-color: #E6A23C"></span>
+            <span>答题人数</span>
+          </div>
+          <div class="legend-item">
+            <span class="dot" style="background-color: #F56C6C"></span>
+            <span>正确人数</span>
+          </div>
+        </div>
+        <el-button size="small" plain class="view-more">经销商统计 <i class="el-icon-arrow-right"></i></el-button>
+      </div>
+      <div ref="courseWatchChart" class="chart-container"></div>
+    </el-card>
   </div>
 </template>
 
@@ -343,6 +380,75 @@ const dealerOption = {
     }
   ]
 }
+
+const courseWatchOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '8%',
+    top: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisLabel: {
+      interval: 0,
+      rotate: 30,
+      fontSize: 10,
+      width: 100,
+      overflow: 'truncate'
+    }
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      lineStyle: {
+        type: 'dashed'
+      }
+    }
+  },
+  series: [
+    {
+      name: '观看人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#409EFF'
+      }
+    },
+    {
+      name: '完播人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#67C23A'
+      }
+    },
+    {
+      name: '答题人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#E6A23C'
+      }
+    },
+    {
+      name: '正确人数',
+      type: 'bar',
+      data: [],
+      itemStyle: {
+        color: '#F56C6C'
+      }
+    }
+  ]
+}
 export default {
   name: 'StatisticsDashboard',
   data() {
@@ -386,7 +492,8 @@ export default {
       todayWatchUserCount: 0,
       versionLimit: 0,
       /// 选中的分析概览
-      selectedDiv: 0
+      selectedDiv: 0,
+      filterType: 0
 
     }
   },
@@ -394,6 +501,7 @@ export default {
     this.$nextTick(() => {
       this.initViewerChart()
       this.initDealerChart()
+      this.initCourseWatchChart();
 
       // 监听窗口大小变化，重新渲染图表
       window.addEventListener('resize', () => {
@@ -535,6 +643,8 @@ export default {
 
       this.handleDealerChartData()
 
+
+
     },
     handleDealerChartData(){
       let param = this.getParam();
@@ -579,7 +689,12 @@ export default {
       this.dealerChart = echarts.init(this.$refs.dealerChart)
 
       this.dealerChart.setOption(dealerOption)
-    }
+    },
+    initCourseWatchChart() {
+      this.courseWatchChart = echarts.init(this.$refs.courseWatchChart)
+
+      this.courseWatchChart.setOption(courseWatchOption)
+    },
   },
 
   beforeDestroy() {
@@ -838,5 +953,8 @@ export default {
 .color:after {
   bottom: -27px;
   border-color: #E7F1FF transparent transparent transparent;
+}
+.legend-group{
+
 }
 </style>