tropsCode/src/views/analysis/components/ropeSkipping.vue

<template>
  <div>
    <div class="column" v-if="details._comments.speed">
      <div class="column-title">成绩曲线</div>
      <div class="column-con">
        <div class="item">
          <div class="item-title">速度
            <i v-if="details._comments.speed.level == 0" class="cha">差</i>
            <i v-if="details._comments.speed.level == 1" class="liang">良</i>
            <i v-if="details._comments.speed.level == 2" class="you">优</i>
          </div>
          <div class="item-con">
            <div class="item-con-li">
              <!--图表开始-->
              <div class="chartBox" id="faliChart"></div>
              <!--图表结束-->
            </div>
            <div class="item-con-li">
              <div class="item-con-li-title">
                节奏点评
              </div>
              <div class="item-con-li-con">
                <div class="item-con-li-con-strong">{{ details._comments.speed.comments }}</div>
                <div v-for="(item,index) in details._comments.speed.recms" :key="index" v-html="item"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="column" v-if="details.video_url">
      <div class="column-title">测评视频</div>
      <div>
        <video :src="details.video_url" :poster="details.video_url.replace('  ','') + '?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0,ar_auto'" :controls="true">
          您的浏览器不支持 video 标签。
        </video>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'ropeSkipping',
  props: {
    details: { type: Object, default: function () { return {} } },
  },
  data() {
    return {
      query: {},
      typeList: [],
      failedList: [],
      fullAvgRateList: [],
      averageScoreList: [],
      lowSpeedList: [],
    };
  },
  created() {
    this.query = this.$route.query;
  },
  mounted() {
    let videoList = this.details.video_url.split("  ").filter((item) => {
      return item;
    });
    this.$set(this.details, 'videoList', videoList);
    let typeList = [];
    let fullAvgRateList = [];
    let averageScoreList = [];
    let lowSpeedList = [];
    let mySum = this.details.count_distribution.reduce((a, b) => {
      return a + b;
    }, 0);
    let num = this.details.count_distribution.length;
    let averageScore = (mySum / num).toFixed(2);
    for (let i = 1; i <= num; i++) {
      typeList.push(i * 10)
      fullAvgRateList.push(this.details.full_avg_rate)
      averageScoreList.push(averageScore)
      lowSpeedList.push(2)
    }
    this.typeList = typeList;
    this.fullAvgRateList = fullAvgRateList;
    this.averageScoreList = averageScoreList;
    this.lowSpeedList = lowSpeedList;
    this.$nextTick(()=>{
      this.faliChart();
    })
  },
  methods: {
    //成绩曲线
    faliChart() {
      let myChart = echarts.init(document.getElementById("faliChart"));
      let option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['速度曲线', '您的平均速度', ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.typeList
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '速度曲线',
            type: 'line',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {
              color: "#e6fafa"
            },
            data: this.details.count_distribution
          },
          {
            name: '您的平均速度',
            type: 'line',
            lineStyle: {
              type: 'dashed'
            },
            data: this.averageScoreList
          },
          // {
          //   name: '满分平均速度',
          //   type: 'line',
          //   lineStyle: {
          //     type: 'dashed'
          //   },
          //   data: this.fullAvgRateList
          // },
          // {
          //   name: '低速区',
          //   type: 'line',
          //   lineStyle: {
          //     type: 'dashed'
          //   },
          //   areaStyle: {
          //     color: "#ffdad1"
          //   },
          //   data: this.lowSpeedList
          // },
        ]
      };
      // 窗口大小自适应方案
      myChart.setOption(option);
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 200);
    },

  },
};
</script>

<style lang="scss" scoped>
.chartBox {
  width: 100%;
  height: 38vh;
}
</style>