<template>
  <div class='ques-lineChart'>
       <BarChart :option="option" />
  </div>
</template>

<script>
import { BarChart } from "dr-vue-echarts";
import { Random } from "mockjs";
export default {
    name:"QueslineChart",
    components: {
    [BarChart.name]: BarChart
  },
   data() {
    return {
      option: {
        title: {
          text: ""
        },
        tooltip: {
          trigger: "item",
          padding: [4, 12],
          backgroundColor: "white",
          textStyle: {
            color: "black",
            fontFamily: "Ariel",
            fontWeight: "bolder"
          },
          formatter: localStorage.getItem('lang')=='tw'?'{b0}: <span class="studyhrs">{c0}</span>人':'PR {b0}%: <span class="studyhrs">{c0} </span> students'
        },
        grid: {
          top: "20%",
          left: "6%",
          right: "12%",
          bottom: "18%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["甲等", "乙等", "丙等", "丁等", "戊等", "己等"],
          splitLine: {
            lineStyle: {
              color: "transparent"
            }
          },
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2
            }
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black"
          }
        },
        yAxis: {
          type: "value",
          show: true,
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "transparent"
            }
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black"
          }
        },
        emphasis: {
          itemStyle: {
            color: "#FA6400" //高亮
          }
        },
        barCategoryGap: "1px",
        series: [
          {
            data: [
              {
                value: Random.natural(1, 20),
                itemStyle: { color: "#00AD6C" }
              },
              {
                value: Random.natural(20, 25),
                itemStyle: { color: "#008352" }
              },
              {
                value: Random.natural(20, 25),
                itemStyle: { color: "#008352" }
              },
              {
                value: Random.natural(25, 30),
                itemStyle: { color: "rgb(0, 62, 39)" }
              },
              {
                value: Random.natural(1, 20),
                itemStyle: { color: "#00AD6C" }
              },
              {
                value: Random.natural(1, 20),
                itemStyle: { color: "#00AD6C" }
              },
              {
                value: Random.natural(1, 20),
                itemStyle: { color: "#00AD6C" }
              }
            ],
            type: "bar"
          }
        ]
      }
    };
  }
}
</script>

<style scoped>
.ques-lineChart{
      margin:auto;
    width: 100%;
    max-width: 500px;
    padding: 15px 40px 0px 40px;
     height: 420px;
}
</style>