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

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

        },
       
      ],

      chartOptions: {
        chart: {
          height: 500,
          type: "radar",
          toolbar: {
            show: false
          }
        },
        plotOptions: {
          radar: {
            polygons: {
              strokeColor: "#e8e8e8",
              strokeWidth: 2,
              fill: {
                colors: ["#f8f8f8", "#fff"]
              }
            }
          }
        },
        fill: {
          opacity: 0.5,
          colors: ["rgba(0, 145, 255, 0.8)", "rgba(0, 0, 0, 0.25)"]
        },
        stroke: {
          show: false,
          width: 2,
          colors: ["rgba(0, 145, 255, 0.8)", "rgba(0, 0, 0, 0.25)"],
          dashArray: 0
        },
        markers: {
          size: 2,
          colors: ["rgba(0, 145, 255, 0.8)", "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'?["內積空間", "向量", "矩陣", "行列式", "線性轉換"]:["Inner product space", "vector", "matrix", "determinant", "linear transformation"],
            categories: ["知识点1", "知识点2", "知识点3", "知识点4", "知识点5"],
          labels: {
            style: {
              colors: ["#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, 145, 255, 0.8)", "rgba(0, 0, 0, 0.25)"],
            radius: 4,
            customHTML: undefined,
            onClick: undefined,
            offsetX: 0,
            offsetY: 0
          }
        },
        title: {
          text: ""
        }
      }
    };
  },
  
};
</script>

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