<template>
  <div class="stack-bar-chart">
    <BarChart :option="option" />
    <h1 class="chartMonth">{{$t('studentWeb.stackBarChart.chartMon')}}</h1>
  </div>
</template>

<script>
import { BarChart } from "dr-vue-echarts";
export default {
  name: "StackBarChart",
  components: {
    [BarChart.name]: BarChart,
  },
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          padding: [4, 12],
          backgroundColor: "white",
          textStyle: {
            color: "black",
            fontFamily: "Ariel",
            fontWeight: "bolder",
          },
        },
        legend: {
          z: 7,
          bottom: "0%",
         width:'70%',
          textStyle: {
            color: "black",
          },
        },
        grid: {
          left: "0%",
          right: "10%",
          bottom: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          //座標軸線的設置
          splitLine: {
            lineStyle: {
              color: "transparent",
            },
          },
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2,
            },
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black",
          },
        },
        yAxis: {
          type: "category",
          data: this.$t('studentWeb.stackBarChart.yAxisData'),
          splitLine: {
            lineStyle: {
              color: "transparent",
            },
          },
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2,
            },
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black",
          },
        },
        series: [
          {
            name: this.$t(`studentWeb.stackBarChart.stackType[0]`),
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideLeft",
            },
            data: [320, 302, 301, 334],
            itemStyle: { color: "#006841" },
          },
          {
            name: this.$t(`studentWeb.stackBarChart.stackType[1]`),
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideLeft",
            },
            data: [120, 132, 101, 134],
            itemStyle: { color: "#008352" },
          },
          {
            name: this.$t(`studentWeb.stackBarChart.stackType[2]`),
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideLeft",
            },
            data: [220, 182, 191, 234],
            itemStyle: { color: "#00AD6C" },
          },
          {
            name: this.$t(`studentWeb.stackBarChart.stackType[3]`),
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideLeft",
              textStyle: {
                color: "black",
              },
            },
            data: [250, 212, 201, 154],
            itemStyle: { color: "#94DBC1" },
          },
        ],
      },
    };
  },
};
</script>

<style>
</style>