合并前更新

src/pages/report/index.vue

@@ -204,13 +204,13 @@
       </view>
     </view>
     <!-- 专注力变化看板 -->
-    <!-- <view class="absorbed_change">
+    <view class="absorbed_change">
       <view class="interfere_title_wrap">
         <view class="line"></view>
         <view class="title">专注力变化分析</view>
-      </view> -->
-    <!-- 看板一 干扰 -->
-    <!-- <view class="interfere_wrap">
+      </view>
+      <!-- 看板一 干扰 -->
+      <view class="interfere_wrap">
         <view class="interfere">
           <img
             src="http://img.shuimuai.com/program_interfere_log.png"
@@ -223,11 +223,17 @@
             次
           </view>
         </view>
+        <view class="interfere_echarts">
+          <mpvue-echarts
+            :echarts="echarts"
+            :onInit="interfere_charts"
+          />
+        </view>
         <view class="interfere_footer">
           <title class="interfere_footer_logo"></title>专注力干扰
         </view>
       </view>
-    </view> -->
+    </view>
 
     <van-toast id="van-toast" />
 
@@ -244,12 +250,18 @@ import util, {
   getPieChartsOption,
   getRadarChartOption,
   timestampToTimeS,
+  getInterfereChartsOption,
 } from "../../utils/index";
 import { gameDetail, gameLineChart } from "../../requests/game";
 import game_store from "../../store/game";
 import Toast from "../../../static/vant/toast/toast";
 
-var att_charts, hight_att_pie_charts, radar_charts, $pie_charts, $this;
+var att_charts,
+  hight_att_pie_charts,
+  radar_charts,
+  $pie_charts,
+  $interfere_echarts,
+  $this;
 
 // 大脑图表初始化
 function initAttChart(canvas, width, height) {
@@ -310,6 +322,21 @@ function initPieChart(canvas, width, height) {
   return $pie_charts; // 返回 chart 后可以自动绑定触摸操作
 }
 
+// 干扰图表初始化 interfere_echarts
+function interfereChart(canvas, width, height) {
+  $interfere_echarts = echarts.init(canvas, null, {
+    width: width,
+    height: height,
+  });
+  canvas.setChart($interfere_echarts);
+
+  var option = getInterfereChartsOption(true); // ECharts 配置项
+
+  $interfere_echarts.setOption(option);
+
+  return $interfere_echarts; // 返回 chart 后可以自动绑定触摸操作
+}
+
 export default {
   name: "index_container",
   components: {
@@ -318,11 +345,12 @@ export default {
   data() {
     return {
       // 0:未选择 1：时间 2：次数
-      // 折线图
+      // 折线图 表格数据
       attCharts: initAttChart,
       hight_att_charts: initHightPieChart,
       radar_charts: initRadarChart,
       pie_charts: initPieChart,
+      interfere_charts: interfereChart,
 
       echarts,
       record: {},
@@ -802,6 +830,15 @@ image.boy {
   font-weight: 900;
 }
 /* 干扰 echarts */
+.interfere_echarts {
+  margin: 0 auto;
+  width: 360px;
+  height: 193px;
+  background: #f3f3f3;
+  opacity: 0.6;
+
+  box-shadow: 0px 6px 11px #dadada;
+}
 /* 干扰 bottom */
 .interfere_footer {
   width: 100%;

src/utils/index.js

@@ -553,7 +553,7 @@ export function getInterfereChartsOption(interfere_datas) {
 
         type: "category",
         //  data: [1,2,3,4,5,6,7,8,9],
-        // splitNumber: 10,
+        splitNumber: 10,
         silent: false,
         splitLine: {
           show: false,
@@ -572,7 +572,8 @@ export function getInterfereChartsOption(interfere_datas) {
       series: [
         {
           type: "bar",
-          data: [1,2,3,4,5,6,7,8,9],
+          // type: "line",
+          data: [1,2,3,4,5,6,7,8,9,99],
           large: true,
         },
       ],