<!--今日開課數量變化圖-->
<template>
  <div id="classnum-lineAreaChart"></div>
</template>

<script>
export default {
  name: "ClassNumLineAreaChart",
  data() {
    return {
      mockdata: {
        yAxisNum: [],
         yAxisNum2: [],
        xAxisLabel: [],
      },
    };
  },

  created() {
    let yAxisNum = [], yAxisNum2 = [],
      xAxisLabel = [];
    for (let i = 0; i < 24; i++) {
      if (i < 8 || i > 18) {
        yAxisNum.push(0);
      } else yAxisNum.push(Math.floor(Math.random() * 10));
      xAxisLabel.push(i.toString());
    }
    for (let i = 0; i < 24; i++) {
      if (i < 7 || i > 18) {
        yAxisNum2.push(0);
      } else yAxisNum2.push(Math.floor(Math.random() * 9));

    }
    this.mockdata.yAxisNum = yAxisNum;
     this.mockdata.yAxisNum2 = yAxisNum2;
    this.mockdata.xAxisLabel = xAxisLabel;
    console.log(this.mockdata);
  },
  mounted() {
    this.drawLine(this.mockdata);
  },
  methods: {
    drawLine(mockdata) {
        //自適應必須把圖全部抓再一起，一起自適應
      let myAreaChart = this.$echarts.init(
        document.getElementById("classnum-lineAreaChart")
      );
      let myChart = this.$echarts.init(
        document.getElementById("student-source-ringpie")
      );
       let myHeatMap = this.$echarts.init(
        document.getElementById("month-course-heatMap")
      );
      let myHiVersionPie = this.$echarts.init(
        document.getElementById("hiteach-version-pie")
      );
       let myOSVersionPie = this.$echarts.init(
        document.getElementById("os-version-pie")
      );
      
      
      myAreaChart.setOption({
        tooltip: {
          trigger: "axis",
          formatter: "<div>今日 {b0} 點: <span class='tooltip-num'>{c0}</span> 堂</div><div>昨日 {b1} 點: <span class='tooltip-numYesterday'>{c1}</span> 堂</div>",
          textStyle:{
            fontWeight:'bolder'
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: mockdata.xAxisLabel,
         
          axisLine: {
            lineStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#979797",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#979797",
            },
          },
        },
        grid: {
          left: "3%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            //處理線上的點點
            symbol: "none",

            itemStyle: {
              color: "#00FFA0",
            },
            data: mockdata.yAxisNum2,
            smooth: 0.5,
            type: "line",
            lineStyle: {
              color: "#00FFA0",
              width: 2,
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              lineStyle: {
                type: "solid",
                color: "#979797",
                opacity: 0.3,
              },
              data: [
                { xAxis: 4 },
                { xAxis: 8 },
                { xAxis: 12 },
                { xAxis: 16 },
                { xAxis: 20 },
                 { xAxis: 23 },
              ],
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#00F492", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 250, 196, 0.29)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
           {
            //處理線上的點點
            symbol: "none",

            itemStyle: {
              color: "#00FFA0",
            },
            data: mockdata.yAxisNum,
            smooth: 0.5,
            type: "line",
            lineStyle: {
              color: "rgb(30,211,256)",
              width: 2,
            },
            markLine: {
              symbol: ["none", "none"],
              label: { show: false },
              lineStyle: {
                type: "solid",
                color: "#979797",
                opacity: 0.3,
              },
              data: [
                { xAxis: 4 },
                { xAxis: 8 },
                { xAxis: 12 },
                { xAxis: 16 },
                { xAxis: 20 },
                 { xAxis: 23 },
              ],
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(30,211,255)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(30,211,255,0.1)" // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      });
    //自適應必須把圖全部抓再一起，一起自適應
      setTimeout(function () {
        window.onresize = function () {
          myAreaChart.resize();
          myChart.resize();
          myHeatMap.resize();
          myHiVersionPie.resize();
          myOSVersionPie.resize();
        };
      }, 200);
    },
  },
};
</script>

<style>
 .tooltip-num{
    color:#00FFA0 !important;
    font-size:20px;
  }
  .tooltip-numYesterday{
    color:aqua !important;
    font-size:20px;
  }
</style>