添加循环获取结束和成绩记录后两个看板

src/pages/report/index.vue

@@ -223,12 +223,28 @@
             次
           </view>
         </view>
-        <view class="interfere_echarts">
-          <mpvue-echarts
-            :echarts="echarts"
-            :onInit="interfere_charts"
-            canvasId="demo-canvas-4"
-          />
+        <!-- 表图 -->
+        <view class="interfere_echarts_wrap">
+          <view class="interfere_echarts">
+            <mpvue-echarts
+              :echarts="echarts"
+              :onInit="interfere_charts"
+              canvasId="demo-canvas-4"
+            />
+          </view>
+          <view class="interfere_echarts_bottom">
+            <text>0</text>
+            <text>2</text>
+            <text>4</text>
+            <text>6</text>
+            <text>8</text>
+            <text>10</text>
+            <text>12</text>
+            <text>14</text>
+            <text>16</text>
+            <text>18</text>
+            <text>20</text>
+          </view>
         </view>
         <view class="interfere_footer">
           <title class="interfere_footer_logo"></title>专注力干扰
@@ -245,12 +261,28 @@
           >
           <text>调整能力分析</text>
         </view>
-        <view class="adjustment_echarts">
-          <mpvue-echarts
-            :echarts="echarts"
-            :onInit="adjustment_charts"
-            canvasId="demo-canvas-5"
-          />
+        <!-- 表图 -->
+        <view class="adjustment_echarts_wrap">
+          <view class="adjustment_echarts">
+            <mpvue-echarts
+              :echarts="echarts"
+              :onInit="adjustment_charts"
+              canvasId="demo-canvas-5"
+            />
+          </view>
+          <view class="adjustment_echarts_bottom">
+            <text>0</text>
+            <text>2</text>
+            <text>4</text>
+            <text>6</text>
+            <text>8</text>
+            <text>10</text>
+            <text>12</text>
+            <text>14</text>
+            <text>16</text>
+            <text>18</text>
+            <text>20</text>
+          </view>
         </view>
         <view class="adjustment_footer">
           <view class="adjustment_footer_logo"></view>专注力上升
@@ -440,8 +472,8 @@ export default {
             let $res = res.data;
             $this.record = $res.data;
 
-            console.log("成绩记录数据", $res.data.interfereArr);
-            console.log("数据长度：", $res.data.line);
+            // console.log("成绩记录数据", $res.data.interfereArr);
+            // console.log("数据长度：", $res.data.line);
 
             $this.record.play_time = formatSeconds($this.record.play_time);
             $this.record.start_time = timestampToTimeS($this.record.start_time);
@@ -904,15 +936,31 @@ image.boy {
   font-weight: 900;
 }
 /* 干扰 echarts */
-.interfere_echarts {
-  /* margin: 0 auto; */
+.interfere_echarts_wrap {
   width: 360px;
   height: 193px;
   background: #f3f3f3;
   opacity: 0.6;
-
   box-shadow: 0px 6px 11px #dadada;
 }
+.interfere_echarts {
+  /* margin: 0 auto; */
+  width: 100%;
+  height: 173px;
+  /* background: #f3f3f3;
+  opacity: 0.6;
+  box-shadow: 0px 6px 11px #dadada; */
+}
+.interfere_echarts_bottom {
+  margin: 0 auto;
+  width: 90%;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  font-size: 15px;
+  color: #828282;
+}
 /* 干扰 bottom */
 .interfere_footer {
   width: 100%;
@@ -951,14 +999,30 @@ image.boy {
   height: 19px;
   margin-right: 7px;
 }
-.adjustment_echarts {
+/* 调整能力表图 */
+.adjustment_echarts_wrap {
   margin: 0 auto;
   width: 360px;
   height: 193px;
+
   background: #f3f3f3;
   opacity: 0.6;
   box-shadow: 0px 6px 11px #dadada;
 }
+.adjustment_echarts {
+  width: 100%;
+  height: 173px;
+}
+.adjustment_echarts_bottom {
+  margin: 0 auto;
+  width: 90%;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  font-size: 15px;
+  color: #828282;
+}
 .adjustment_footer {
   width: 100%;
   height: 26px;
@@ -993,4 +1057,7 @@ image.boy {
   font-size: 21px;
   font-weight: 600;
 }
+.test {
+  color: rgb(163, 7, 7);
+}
 </style>

src/requests/game.js

@@ -21,7 +21,7 @@ export function gameEnd($params) {
 export function gameDetail($record_id) {
   let $params = {};
   $params["game_record_id"] = $record_id;
-  // $params["game_record_id"] = "5484";
+  // $params["game_record_id"] = "9389";
   $params["access_token"] = wx.getStorageSync("token");
   return fly.post("game/game-detail", $params);
 }

src/utils/index.js

@@ -378,7 +378,8 @@ export function getHightPieChartOption($params, $total) {
 export function getRadarChartOption($params) {
 
   let $option = {
-    tooltip: {},
+    // tooltip: {},
+    color: "white",
     radar: {
       // shape: 'circle',
       radius: "55%",
@@ -415,18 +416,34 @@ export function getRadarChartOption($params) {
         max: 100
       },
       ],
+      splitArea: {
+        show: true,
+        areaStyle: {
+          // color: ['#d72941', '#f1c35b', '#99c736', '#75813b', '#4e3829',]
+          color: ['rgba(11,89,140,1)',
+            'rgba(11,89,140,0.8)',
+            'rgba(11,89,140,0.6)',
+            'rgba(11,89,140,0.4)',
+            'rgba(11,89,140,0.2)'],
+
+          // 图表背景网格的颜色
+        }
+      },
+
     },
     series: [{
       name: "预算 vs 开销（Budget vs spending）",
       type: "radar",
       // areaStyle: {normal: {}},
       lineStyle: {
-        color: "#D28885",
+        // color: "#D28885",
+        color: "red",
       },
       data: [{
         value: $params,
         // name: '实际开销（Actual Spending）'
         name: "专注力要素分析数据",
+
       },],
     },],
   };
@@ -480,26 +497,6 @@ export function filterPieData(datas) {
   let $this = this;
   let legends = [];
   let $att_region = [
-    // {
-    //   min: 81,
-    //   max: 100
-    // },
-    // {
-    //   min: 61,
-    //   max: 80
-    // },
-    // {
-    //   min: 41,
-    //   max: 60
-    // },
-    // {
-    //   min: 21,
-    //   max: 40
-    // },
-    // {
-    //   min: 0,
-    //   max: 20
-    // },
     {
       min: 0,
       max: 20,
@@ -563,27 +560,31 @@ export function getInterfereChartsOption(interfere_datas) {
       },
       grid: {
         top: 20,
-        bottom: 40
+        bottom: 20
       },
       // x轴数据显示
       xAxis: {
-
         type: 'category',
         boundaryGap: false,
-        data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
-        splitNumber: 10,
+        // data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20'],
+        splitNumber: 11,
       },
       // y轴坐标显示
       yAxis: {
-
+        color: '#23CC92',
         type: "value",
         splitNumber: 5,
         min: -100,
         max: 0,
+        axisLabel: {
+          formatter: '{value}',
+          textStyle: {
+            color: '#23CC92'
+          }
+        }
       },
       //数据配置项
       series: [{
-
         data: interfere_datas,
         type: "line",
         large: true,
@@ -605,8 +606,8 @@ export function getAdjustmentChartsOption(interfere_datas) {
         // left: 1220,
       },
       grid: {
-        top: 10,
-        bottom: 10
+        top: 20,
+        bottom: 20
       },
       // 提示
       tooltip: {
@@ -619,7 +620,6 @@ export function getAdjustmentChartsOption(interfere_datas) {
       xAxis: {
         type: 'category',
         boundaryGap: false,
-        // data: ['a2', '4', '6', '8', '10', '12', '14', '16', '18', '20']
       },
       // y轴坐标显示
       yAxis: {
@@ -628,6 +628,12 @@ export function getAdjustmentChartsOption(interfere_datas) {
         splitNumber: 5,
         min: 0,
         max: 100,
+        axisLabel: {
+          formatter: '{value}',
+          textStyle: {
+            color: '#F3A100'
+          }
+        }
       },
       //数据配置项
       series: [{