<template>
  <div class="recognize-perform-chart">
    <h4>{{$t('studentWeb.exam.chart.recognizePerformance')}}</h4>
    <apexchart height="380" type="radar" :options="chartOptions" :series="series2"></apexchart>
  </div>
</template>

<script>
import ApexCharts from "vue-apexcharts";
export default {
  name: "RecognizePerformChart",
  components: {
    apexchart: ApexCharts
  },
  data() {
    return {
      series2: [
        {
          name:this.$t('studentWeb.exam.chart.me'),
              //data: [80, 50, 30, 40, 100, 70]
            data: [0,0,0,0,0,0]
        },
        {
          name: this.$t('studentWeb.exam.chart.participantClass'),
          //data: [20, 30, 40, 80, 42, 80]
            data:[0,0,0,0,0,0]
        }
      ],

      chartOptions: {
        chart: {
          height: 480,
          type: "radar",
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          radar: {
            polygons: {
              strokeColor: "#e8e8e8",
              strokeWidth: 2,
              fill: {
                colors: ["#f8f8f8", "#fff"]
              }
            }
          }
        },
        fill: {
          opacity: 0.5,
          colors: ["rgba(0, 173, 108, 0.82)", "rgba(0, 0, 0, 0.25)"]
        },
        stroke: {
          show: false,
          width: 2,
          colors: ["rgba(0, 173, 108, 0.82)", "rgba(0, 0, 0, 0.25)"],
          dashArray: 0
        },
        markers: {
          size: 2,
          colors: ["rgba(0, 173, 108, 0.82)", "rgba(0, 0, 0, 0.25)"],
          hover: {
            size: 2
          }
        },

        tooltip: {
          custom: function({ series, seriesIndex, dataPointIndex }) {
            return (
              '<div class="arrow_box"><span>' +
              series[seriesIndex][dataPointIndex] +
              " point</span>" +
              "</div>"
            );
          }
        },
        style: {
          fontSize: "16px",
          fontFamily: undefined
        },
        xaxis: {
          type: "category",
          //categories: localStorage.getItem('lang')=='tw'?["知識", "理解", "應用", "分析", "綜合", "評鑑"]:["Knowledge", "Understanding", "Application", "Analysis", "Integration", "Evaluation"],
          // categories: ["知识", "理解", "应用", "分析", "综合", "评鉴"],
          categories: ["记忆", "理解", "应用", "分析", "评价", "创造"],
          labels: {
            style: {
              colors: ["#000", "#000", "#000", "#000", "#000", "#000"],
              fontSize: "12px",
              fontFamily: "Helvetica, Arial, sans-serif",
              fontWeight: 500
            }
          }
        },
        dataLabels: {
          enabled: false
        },
        legend: {
          markers: {
            width: 20,
            height: 12,
            strokeWidth: 0,
            strokeColor: "#fff",
            fillColors: ["rgba(0, 173, 108, 0.82)", "rgba(0, 0, 0, 0.25)"],
            radius: 4,
            customHTML: undefined,
            onClick: undefined,
            offsetX: 0,
            offsetY: 0
          }
        },
        title: {
          text: ""
        }
      }
    };
  }
};
</script>

<style scoped>
.recognize-perform-chart {
  width: 100%;
  margin: auto;
  margin-bottom: 50px;
  padding: 15px 40px 0px 40px;
  height: 420px;
  color: rgba(0, 0, 0, 0.726);
}
</style>