<template>
  <div class='event-type-not-finished-chart'>
       <BarChart :option="option" />
  </div>
</template>

<script>
import { BarChart } from "dr-vue-echarts";
export default {
    name:'EventTypeNotFinishedChart',
     components: {
    [BarChart.name]: BarChart
  },
    data() {
    return {
      option: {
        title: {
          text: "各類任務未完成數概覽"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          padding: [4, 12],
          backgroundColor: "white",
          textStyle: {
            color: "black",
            fontFamily: "Ariel",
            fontWeight: "bolder"
          }
        },
        legend: {
          z: 7,
          bottom: "10px",
          textStyle: {
            color: "black"
          }
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "20%",
          containLabel: true
        },
        yAxis: {
          type: "value",
          //座標軸線的設置
          splitLine: {
            lineStyle: {
              color: "transparent"
            }
          },
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2
            }
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black"
          }
        },
        xAxis: {
          type: "category",
          data: ["課前預習", "評量", "作業", "投票"],
          splitLine: {
            lineStyle: {
              color: "transparent"
            }
          },
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2
            }
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black"
          }
        },
        series: [
          {
            name: "完成",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideLeft"
            },
            data: [32, 30, 42, 36],
            itemStyle: { color: "rgb(20, 139, 99)" }
          },
          {
            name: "未完成",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideLeft"
            },
            data: [12, 13, 10, 5],
            itemStyle: { color: "rgb(147, 146, 145)" }
          },
         
        ]
      }
    };
  }
}
</script>

<style scoped>
.event-type-not-finished-chart{
    width: 100%;
    height: 320px;
    margin-bottom:20px;
}
</style>