<template>
  <div class="lessontest-report-charts">
    <Carousel
      v-model="value2"
      :autoplay="setting.autoplay"
      :dots="setting.dots"
      :radius-dot="setting.radiusDot"
      :trigger="setting.trigger"
      :arrow="setting.arrow"
    >
      <CarouselItem class="demo-carousel"><ScoreBarChart></ScoreBarChart></CarouselItem>
      <CarouselItem class="demo-carousel"><KeyPointPerformChart></KeyPointPerformChart></CarouselItem>
      <CarouselItem class="demo-carousel"><RecognizePerformChart></RecognizePerformChart></CarouselItem>
    </Carousel>
  </div>
</template>

<script>
import ScoreBarChart from './ScoreBarChart'
import KeyPointPerformChart from './KeyPointPerformChart'
import RecognizePerformChart from './RecognizePerformChart'

export default {
  name: "LessonTestReportCharts",
  components:{
       ScoreBarChart,KeyPointPerformChart,RecognizePerformChart
  },
  data() {
    return {
      value2: 0,
      setting: {
        autoplay: false,
        dots: "outside",
        radiusDot: true,
        trigger: "click",
        arrow: "always"
      }
    };
  }
};
</script>

<style scoped>
.lessontest-report-charts .ivu-carousel-dots.ivu-carousel-dots-outside{
   bottom:-40px;
}
</style>