添加 chart.js 用于提供获取图表数据的接口

src/api/analysis.js

@@ -1,14 +0,0 @@
-import { get } from '@/utils/request'
-
-const analysisApi = {
-  videoAnalysisApi: '/api/content/video/analysis'
-}
-
-// 获取用户的视频观看记录
-export function getUserWatch() {
-  return get(analysisApi.videoAnalysisApi + '/watch')
-}
-
-export function getUserWatchRegion() {
-  return get(analysisApi.videoAnalysisApi + '/watch/region')
-}

src/api/chart.js

@@ -0,0 +1,33 @@
+import { get } from '@/utils/request'
+
+const chartApi = {
+  examCountApi: '/api/content/chart/exam/count',
+  examPassRateApi: '/api/content/chart/exam/rate',
+  lineChartDataApi: '/api/content/chart/exam/linechart',
+  videoWatchApi: '/api/content/chart/video/watch',
+  videoWatchRegionApi: '/api/content/chart/video/region'
+}
+
+// *********************************************************************************************************************
+// 考试数据接口
+export function getExamCount() {
+  return get(chartApi.examCountApi)
+}
+
+export function getExamPassRate() {
+  return get(chartApi.examPassRateApi)
+}
+
+export function getLineChartData() {
+  return get(chartApi.lineChartDataApi)
+}
+
+// *********************************************************************************************************************
+// 用户视频观看数据接口
+export function getUserWatch() {
+  return get(chartApi.videoWatchApi)
+}
+
+export function getUserWatchRegion() {
+  return get(chartApi.videoWatchRegionApi)
+}

src/api/exam.js

@@ -124,17 +124,3 @@ export function submitExamMark(data) {
 export function getResultView(paperId) {
   return get('/api/content/exam/result/view/' + paperId)
 }
-
-// *********************************************************************************************************************
-// 考试数据接口
-export function getExamCount() {
-  return get('/api/content/exam/statistic/count')
-}
-
-export function getExamPassRate() {
-  return get('/api/content/exam/statistic/rate')
-}
-
-export function getLineChartData() {
-  return get('/api/content/exam/statistic/linechart')
-}

src/views/chart/LineChart.vue

@@ -8,24 +8,6 @@
         <div id="chart1" style="height:400px;" />
       </el-card>
     </el-row>
-    <el-row class="movie-list">
-      <el-col :md="12" class="movie-list">
-        <el-card>
-          <div slot="header" class="clearfix">
-            <span>饼图</span>
-          </div>
-          <div id="chart2" style="height:400px;" />
-        </el-card>
-      </el-col>
-      <el-col :md="12" class="movie-list">
-        <el-card>
-          <div slot="header" class="clearfix">
-            <span>金字塔图</span>
-          </div>
-          <div id="chart3" style="height:400px;" />
-        </el-card>
-      </el-col>
-    </el-row>
     <el-row class="movie-list">
       <el-card>
         <div slot="header" class="clearfix">
@@ -45,34 +27,18 @@
         <div id="chart4" style="height:400px;" />
       </el-card>
     </el-row>
-    <el-row class="movie-list">
-      <el-col :md="12" class="movie-list">
-        <el-card>
-          <div id="chart5" style="height:400px;" />
-        </el-card>
-      </el-col>
-      <el-col :md="12" class="movie-list">
-      </el-col>
-    </el-row>
     <el-row>
       <el-col class="movie-list" :md="12">
         <el-card>
           <div id="chart7" style="width: 600px;height:400px;" />
         </el-card>
       </el-col>
-      <el-col class="movie-list" :md="12">
-        <el-card>
-          <div id="chart8" style="width: 600px;height:400px;" />
-        </el-card>
-      </el-col>
     </el-row>
   </el-row>
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import { getExamCount, getExamPassRate, getLineChartData } from '@/api/exam'
-import { getUserWatch, getUserWatchRegion } from '@/api/analysis'
+import { getExamPassRate, getLineChartData, getUserWatch } from '@/api/chart'
 
 export default {
   name: 'LineChart',
@@ -95,12 +61,8 @@ export default {
   },
   mounted() {
     this.initChart1()
-    this.initChart2()
-    this.initChart3()
     this.getExamPassRate()
-    this.getExamNumbers()
     this.getUserWatchWrapper()
-    this.getUserWatchRegionWrapper()
   },
   created() {
     document.title = 'LineChart'
@@ -176,191 +138,6 @@ export default {
         }
       })
     },
-    initChart2() {
-      var option = {
-        tooltip: {
-          trigger: 'item'
-        },
-        legend: {
-          top: '5%',
-          left: 'center'
-        },
-        series: [
-          {
-            name: 'Access From',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap: false,
-            padAngle: 5,
-            itemStyle: {
-              borderRadius: 10
-            },
-            label: {
-              show: false,
-              position: 'center'
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 40,
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: false
-            },
-            data: [
-              { value: 1048, name: 'Search Engine' },
-              { value: 735, name: 'Direct' },
-              { value: 580, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' }
-            ]
-          }
-        ]
-      }
-
-      const myChart = this.$echarts.init(document.getElementById('chart2'))
-      myChart.setOption(option, true)
-      window.addEventListener('resize', () => {
-        if (myChart) {
-          myChart.resize()
-        }
-      })
-    },
-    initChart3() {
-      var maleData = [
-        14, 4, 10, 66,
-        54, 98, 116, 144,
-        210, 358, 484, 562,
-        706, 671, 566, 345,
-        200, 92, 24, 12,
-        0.0
-      ]
-
-      var femaleData = [
-        0, 0, 0, 15, 19,
-        29, 30, 25, 27, 34,
-        36, 48, 36, 56, 60,
-        48, 36, 12, 8, 0,
-        0.0
-      ]
-
-      var maleTotal = maleData.map(function(x) {
-        return Math.abs(x)
-      }).reduce(function(a, b) {
-        return a + b
-      })
-
-      var femaleTotal = femaleData.map(function(x) {
-        return Math.abs(x)
-      }).reduce(function(a, b) {
-        return a + b
-      })
-
-      var malePercentage = maleData.map(function(x) {
-        return -(x / maleTotal * 100)
-      })
-
-      var femalePercentage = femaleData.map(function(x) {
-        return x / femaleTotal * 100
-      })
-
-      const myChart = this.$echarts.init(document.getElementById('chart3'))
-      var option = {
-        title: {
-          text: '唐朝人口金字塔', // 设置标题文本为“唐朝人口金字塔”
-          left: 'center', // 标题水平居中
-          top: '4%', // 标题距离顶部的距离为4%
-          textStyle: {
-            color: '#333', // 标题字体颜色
-            fontSize: 24, // 标题字体大小
-            fontWeight: 'bold', // 标题字体加粗
-            fontFamily: 'KaiTi, serif' // 标题字体样式，楷体或Serif字体
-          }
-        },
-        tooltip: {
-          trigger: 'axis', // 提示框触发类型为坐标轴
-          axisPointer: {
-            type: 'shadow' // 坐标轴指示器类型为阴影
-          },
-          formatter: function(params) {
-            return params[0].name + '<br/>' +
-              params[0].seriesName + ': ' + Math.abs(maleData[params[0].dataIndex]) + ' (' + Math.abs(params[0].data).toFixed(2) + '%)' + '<br/>' +
-              params[1].seriesName + ': ' + Math.abs(femaleData[params[0].dataIndex]) + ' (' + Math.abs(params[1].data).toFixed(2) + '%)'
-            // 提示框内容格式化函数，params参数包含了鼠标悬停时的数据
-          }
-        },
-        legend: {
-          data: ['男性', '女性'], // 图例数据为“男性”和“女性”
-          align: 'left', // 图例左对齐
-          top: '6%', // 图例距离顶部的距离为6%
-          right: 2 // 图例距离右边的距离为2
-        },
-        xAxis: {
-          type: 'value',
-          axisLabel: {
-            formatter: function(value) {
-              // 自定义X轴标签的格式化函数，返回绝对值百分比
-              return Math.abs(value) + '%'
-            }
-          }
-        },
-        yAxis: {
-          type: 'category',
-          data: [
-            '0-4', '5-9', '10-14', '15-19',
-            '20-24', '25-29', '30-34', '35-39', '40-44',
-            '45-49', '50-54', '55-59', '60-64', '65-69',
-            '70-74', '75-79', '80-84', '85-89', '90-94',
-            '95-99', '100 + '
-          ]
-        },
-        series: [
-          {
-            name: '男性', // 数据系列的名称
-            type: 'bar', // 系列类型为条形图
-            stack: 'total', // 数据堆叠，同一个堆叠组的数据会堆叠显示
-            itemStyle: {
-              // 条形图的颜色渐变设置
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#3d8e86' },
-                { offset: 0.5, color: '#5da39d' },
-                { offset: 1, color: '#88bfb8' }
-              ])
-            },
-            emphasis: {
-              focus: 'series' // 强调设置
-            },
-            data: malePercentage // 男性数据百分比
-          },
-          {
-            name: '女性', // 数据系列的名称
-            type: 'bar', // 系列类型为条形图
-            stack: 'total', // 数据堆叠
-            emphasis: {
-              focus: 'series' // 强调设置
-            },
-            itemStyle: {
-              // 条形图的颜色渐变设置
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#d2a36c' },
-                { offset: 0.5, color: '#d5c8a0' },
-                { offset: 1, color: '#dfd6b8' }
-              ])
-            },
-            data: femalePercentage // 女性数据百分比
-          }
-        ]
-      }
-
-      myChart.setOption(option, true)
-      window.addEventListener('resize', () => {
-        if (myChart) {
-          myChart.resize()
-        }
-      })
-    },
     handleChange(val) {
       this.$message.info('select -> ' + val)
     },
@@ -381,14 +158,12 @@ export default {
           } else if (intValue === 3) {
             this.drawImg4()
           } else {
-            // this.drawChart5()
             this.drawChart6()
           }
 
           const myChart = this.$echarts.init(document.getElementById('chart4'))
           // setOption 是 merge，而非赋值, setOption 支持 notMerge 参数, 值为 true 时重新渲染
           myChart.setOption(this.chartOption, true)
-          this.loading.close()
         }
       })
     },
@@ -619,57 +394,6 @@ export default {
         }
       })
     },
-    // 获取考试次数数据
-    async getExamNumbers() {
-      await getExamCount().then((resp) => {
-        const examNames = resp.data[0].split(',')
-        const examNumbers = resp.data[1].split(',')
-        examNames.forEach((item, index) => {
-          this.pieData.push({
-            name: item,
-            value: parseInt(examNumbers[index])
-          })
-        })
-        this.drawPie()
-      })
-    },
-    // 考试次数饼图
-    drawPie() {
-      // 基于准备好的dom，初始化echarts实例
-      const myChart = this.$echarts.init(document.getElementById('chart5'))
-      const option = {
-        title: {
-          text: '考试次数占比',
-          subtext: 'dashbord2',
-          x: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c}次 ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: this.pieData
-        },
-        series: [
-          {
-            name: '考试次数',
-            type: 'pie',
-            radius: '55%',
-            data: this.pieData,
-            roseType: 'angle',
-            itemStyle: {
-              normal: {
-                shadowBlur: 200,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      }
-      myChart.setOption(option)
-    },
     async getUserWatchWrapper() {
       await getUserWatch().then((resp) => {
         if (resp.code === 0) {
@@ -702,55 +426,6 @@ export default {
           data: this.barChartData
         }]
       }
-    },
-    async getUserWatchRegionWrapper() {
-      await getUserWatchRegion().then((resp) => {
-        const pieNames = resp.data[0].split(',')
-        const pieNumbers = resp.data[1].split(',')
-        pieNames.forEach((item, index) => {
-          this.pieChartData.push({
-            name: item,
-            value: parseInt(pieNumbers[index])
-          })
-        })
-        this.drawPieChart()
-      })
-    },
-    drawPieChart() {
-      // 基于准备好的dom，初始化echarts实例
-      const myChart = this.$echarts.init(document.getElementById('chart8'))
-      const option = {
-        title: {
-          text: '分区占比',
-          subtext: '视频分区',
-          x: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c}次 ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: this.pieChartData
-        },
-        series: [
-          {
-            name: '时长',
-            type: 'pie',
-            radius: '55%',
-            data: this.pieChartData,
-            roseType: 'angle',
-            itemStyle: {
-              normal: {
-                shadowBlur: 200,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      }
-      myChart.setOption(option)
     }
   }
 }

src/views/chart/PieChart.vue

@@ -35,8 +35,7 @@
 
 <script>
 import * as echarts from 'echarts'
-import { getExamCount } from '@/api/exam'
-import { getUserWatchRegion } from '@/api/analysis'
+import { getUserWatchRegion, getExamCount } from '@/api/chart'
 
 export default {
   name: 'PieChart',
@@ -63,7 +62,7 @@ export default {
     this.getUserWatchRegionWrapper()
   },
   created() {
-    document.title = 'LineChart'
+    document.title = 'PieChart'
   },
   methods: {
     initChart2() {