<template>
  <div style="width: 1300px; height: 600px">
    <div id="chart" style="width: 100%; height: 100%; min-width: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      countDownTime: 60,
      timer: null,
    };
  },

  mounted() {
    let base = +new Date(1968, 9, 3);
    let oneDay = 24 * 3600 * 1000;
    let date = [];
    let data = [Math.random() * 300];
    for (let i = 1; i < 20000; i++) {
      var now = new Date((base += oneDay));
      date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"));
      data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    }

    // 添加 10 个空数据在前后
    for (let i = 0; i < 100; i++) {
      date.unshift(null);
      data.unshift(null);
    }
    for (let i = 0; i < 100; i++) {
      date.push(null);
      data.push(null);
    }

    var option = {
      tooltip: {
        trigger: "axis",
        position: function (pt) {
          return [pt[0], "10%"];
        },
      },
      title: {
        left: "center",
        text: "Large Area Chart",
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          restore: {},
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        // boundaryGap: [0.5, 0.5],
        data: date,
      },
      yAxis: [
        {
          type: "value",
          boundaryGap: [0, "100%"],
          axisLine: {
            show: true, // 显示 Y 轴线条
          },
        },
        {
          position: "right",
          type: "value",
          boundaryGap: [0, "100%"],
        },
      ],
      dataZoom: [
        {
          type: "inside",
          start: 0,
          end: 10,
        },
        {
          start: 0,
          end: 10,
        },
      ],
      series: [
        {
          name: "Fake Data",
          type: "line",
          symbol: "none",
          sampling: "lttb",
          itemStyle: {
            color: "rgb(255, 70, 131)",
          },
          data: data,
        },
      ],
    };
    this.myChart = echarts.init(document.getElementById("chart"));
    this.myChart.setOption(option);
    window.addEventListener(
      "resize", () => {
        if (this.myChart) this.myChart.resize();
      }
    );
  },
  methods: {
    //初始化图表
    inCharts() {
      if (this.myChart == null) {
        this.myChart = echarts.init(document.getElementById("chart"));
      }

      this.option.series[0].name = this.$t(`home.computingPower`);
      this.option.series[1].name = this.$t(`home.currencyPrice`);

      this.myChart.setOption(this.option);
      // 回调函数，在渲染完成后执行
      this.myChart.on("finished", () => {
        // 在这里执行显示给用户的操作
        // console.log('图表渲染完成，显示给用户');
        this.minerChartLoading = false;
      });
      // window.addEventListener("resize", () => {
      //     if (this.myChart) this.myChart.resize();
      // });

      window.addEventListener(
        "resize",
        throttle(() => {
          if (this.myChart) this.myChart.resize();
        }, 200)
      );
    },
    startCountDown() {
      this.timer = setInterval(() => {
        if (this.countDownTime <= 0) {
          //当监测到countDownTime为0时,清除计数器并且移除sessionStorage,然后执行提交试卷逻辑
          clearInterval(this.timer);
          sessionStorage.removeItem("exam_time");
          alert("提交试卷");
        } else if (this.countDownTime > 0) {
          //每秒让countDownTime -1秒,并设置到sessionStorage中
          this.countDownTime--;
          window.sessionStorage.setItem("exam_time", this.countDownTime);
        }
      }, 1000);
    },
  },
};
</script>