<template>
  <div>
    <div :id="myChart" class="myChartDiv" style=" width: 80%; height: 600px;"></div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
//引入uuid文件
import uuidv1 from "uuid/v1";

// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  name: "hello",
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
    // 接收父组件传递过来的信息
  },
  created() {
    this.myChart = uuidv1(); //获取随机id
  },
  data() {
    return {
      chartDataINfo: [],
      total: "",
      subject: "",
      myChart: "",
      dataAxis: [
        "0h",
        "1h",
        "2h",
        "3h",
        "4h",
        "5h",
        "6h",
        "7h",
        "8h",
        "9h",
        "10h",
        "11h",
        "12h",
        "13h",
        "14h",
        "15h",
        "16h",
        "17h",
        "18h",
        "19h",
        "20h",
        "21h",
        "22h",
        "23h",
        "24h"
      ],
      yMax: 500,
      dataShadow: [],
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted() {
    const vm = this;
    vm.$nextTick(() => {
      vm.drawLine();
    });
  },
  watch: {
    chartData: {
      handler: function(val, oldVal) {
        this.chartDataINfo = val.series;
        this.subject = val.subject;
        this.total = val.total;
        this.drawLine();
      },
      deep: true
    }
  },
  methods: {
    dataSet() {
      const dataShadow = [];
      for (var i = 0; i < this.data.length; i++) {
        dataShadow.push(this.yMax);
        this.dataShadow = dataShadow;
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(this.myChart));
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.subject,
          subtext: "作业总张数:" + this.total + "张",
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          //在这里设置
          formatter: "{b0}时{a0}{c0}张",
          extraCssText: "width:100px;height:40px;"
        },
        xAxis: {
          type: "category",
          data: this.dataAxis,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: "value",
          name: "（张）",
          // scale: true,
          min: 0,
          minInterval: 1,
          splitNumber: 5,
          boundaryGap: [0.2, 0.2],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#999"
            },
            formatter: "{value}"
          }
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              normal: { color: "rgba(0,0,0,0.05)" }
            },
            barGap: "-100%",
            barCategoryGap: "30%",
            data: this.dataShadow,
            animation: true
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FF3377" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#00B9FF" }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" }
                ])
              }
            },
            data: this.chartDataINfo
          }
        ]
      });
      window.onresize = function() {
        myChart.resize();
      };
    }
  },
  computed: {
    ...mapGetters(["FindSubjectCharts"])
  }
};
</script>

<style scoped>
.myChartDiv {
  width: 70%;
  height: 500px;
  margin: 0 auto;
  text-align: center;
  color: brown;
}
</style>
