修改成原来能显示图形

src/pages/report/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="d">
+  <div id="report_container">
     <view class="head"></view>
     <img
       class="boy"
@@ -110,7 +110,7 @@
         <van-col span="5">
           <view class="text-center">
             <view class="hight_pie_chart">
-              <mpvue-echartsecharts
+              <mpvue-echarts
                 :echarts="echarts"
                 :onInit="hight_att_charts"
                 canvasId="demo-canvas1"
@@ -118,7 +118,7 @@
             </view>
             <view class="detail">
               <view>
-                <view>{{ record.hight_percent }}%</view>
+                <view>{{ record.height_absorbed }}%</view>
                 <view>高专注力占比</view>
               </view>
             </view>
@@ -337,36 +337,38 @@ export default {
         message: "加载中",
         duration: 0,
       });
-      gameDetail($record_id).then(
-        (res) => {
-          Toast.clear();
-          let $res = res.data;
-          setTimeout(() => {
+      setTimeout(() => {
+        gameDetail($record_id).then(
+          (res) => {
+            Toast.clear();
+            let $res = res.data;
             $this.record = $res.data;
+            console.log("成绩记录参数", $this.record);
             $this.record.play_time = formatSeconds($this.record.play_time);
-            $this.record.hight_percent =
-              ($this.record.height / $this.record.total).toFixed(2) * 100;
+            $this.record.height_absorbed = Math.ceil(
+              $this.record.height / $this.record.total * 100
+            );
             let $options = getHightPieChartOption(
               $this.record.height,
               $this.record.total
             );
             hight_att_pie_charts.setOption($options);
 
-            console.log("游戏记录", $this.record);
             //设置雷达图
             $options = getRadarChartOption([
-              $this.record.att_average,
-              $this.record.att_scope,
-              $this.record.att_burst,
-              $this.record.att_interfere,
-              $this.record.att_start,
-              $this.record.att_height,
+              $this.record.att_average, //平均
+              $this.record.att_scope,   //广度
+              $this.record.att_burst,   //爆发
+              $this.record.att_interfere, //抗干扰
+              $this.record.att_start,  //启动
+              $this.record.att_height,  // 高专注占比
             ]);
             radar_charts.setOption($options);
 
             let $pie_data = filterPieData($this.record.level);
             let $pie_option = getPieChartsOption($pie_data);
             $pie_charts.setOption($pie_option);
+
             //5分钟阶段
             let $five_min = 5 * 60;
             $this.is_cut = $this.record.play_time > $five_min;
@@ -376,12 +378,12 @@ export default {
                 $this.record.play_time / $five_min
               );
             }
-          }, 1500);
-        },
-        (err) => {
-          Toast.fail("错误代码：" + res.code + "，联系客服");
-        }
-      );
+          },
+          (err) => {
+            Toast.fail("错误代码：" + res.code + "，联系客服");
+          }
+        );
+      }, 800);
     },
     get_game_line($record_id) {
       let $params = {

src/utils/index.js

@@ -336,7 +336,8 @@ export function getHightPieChartOption($params, $total) {
   console.log($params,$total);
   let $option = {
     tooltip: {
-      trigger: 'item'
+      // trigger: 'item'
+      show:false
     },
     series: [
       {
@@ -360,6 +361,7 @@ export function getHightPieChartOption($params, $total) {
 
 
 export function getRadarChartOption($params) {
+  console.log( '雷达图参数会打印什么呢？', $params)
   let $option = {
     tooltip: {},
     radar: {
@@ -392,7 +394,8 @@ export function getRadarChartOption($params) {
       data: [
         {
           value: $params,
-          name: '实际开销（Actual Spending）'
+          // name: '实际开销（Actual Spending）'
+          name: '专注力要素分析数据'
         }
       ]
     }]