<template>
  <div ref="testLine" id="testLine" style="width: 600px; height: 300px"></div>
</template>

<script>
import moment from "moment";

let date = new Date();
const dateDelta = new Date(1000);
let data = [];
const getDateString = (date) => {
  return `${date.getFullYear()}-${
    date.getMonth() + 1
  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
};
for (let i = 1; i < 30; i++) {
  const singleDate = new Date(date - dateDelta * i);
  data.unshift({
    name: singleDate.toString(),
    value: [getDateString(singleDate), 3+0.5*Math.random(1)],
  });
}

const type = "disk";
const unit = "m/s";

export default {
  name: "DisplayDraw",
  data() {
    return {
      path: "url", //修改地址
      ws: {}, //保存websocket对象
      data: data,
      i: 31,
      oneDay: 24 * 3600 * 1000,
      myChart: null,
      date: date,
      dateDelta: dateDelta,
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          backgroundColor: "#fff",
          padding: 10,
          textStyle: {
            fontSize: 12,
            color: "#152934",
            lineHeight: 24,
          },
          extraCssText:
            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
          formatter: (params) => {
            var result = `电机电流${params[0].data[0]} <br/>`;
            params.map((item) => {
              result += `${
                isNaN(item.value[1]) ? "-" : item.value[1]
              } m/s</br>`;
            });
            return result;
          },
        },
        yAxis: [
          {
            boundaryGap: [0, "100%"],
            name: "m/s",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dotted",
                color: "rgba(155, 155, 155, 0.5)",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#5A6872",
              fontSize: 11,
            },
            axisTick: { show: false },
            type: "value",
          },
        ],
        xAxis: [
          {
            type: "time", // x轴为 时间轴
            splitLine: { show: false },
            axisLine: {
              lineStyle: { width: 0 },
            },
            axisLabel: {
              color: "#5A6872",
              fontSize: 11,
              rotate: 30,
            },
            axisTick: { show: false },
            boundaryGap: false,
            data: data.map(function (item) {
              return item[0];
            }),
          },
        ],
        title: {
          text: "皮带电机电流曲线",
          padding: [5, 230],
        },
        color: ["#41D6C3", "#5AAAFA"],
        series: [
          {
            name: "m/s",
            type: "line",
            symbol: "none",
            markPoint: {
              label: {
                normal: {
                  show: true,
                  backgroundColor: "#fff",
                  position: "top",
                  color: "#5AAAFA",
                  borderColor: "rgba(90,170,250,0.3)",
                  borderWidth: 1,
                  padding: 8,
                  formatter: `{b}: {c} ${unit}`,
                },
              },
              symbol: "circle",
              itemStyle: {
                normal: {
                  borderColor: "rgba(90,170,250,0.3)",
                  borderWidth: 15,
                },
              },
              symbolSize: 7,
              data: [{ type: "max", name: "Max" }],
            },
            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
            // connectNulls: true,
            data: data,
          },
        ],
      },
    };
  },
  methods: {
    extendXaxis() {
      let ydata = null;
      this.date = moment(this.date).add(1, "s").toDate();
      let tmp = this.data;
      tmp.shift();
      tmp.push({
        name: this.date.toString(),
        value: [this.getDateString(this.date), ydata],
      });
      this.myChart.setOption({
        series: [
          {
            data: tmp,
          },
        ],
      });
      this.data = tmp;
      console.log(11);
    },
    addData(date, value) {
      let tmp = this.data;
      tmp.shift();
      tmp.push({
        name: date,
        value: [date, value],
      });
      this.myChart.setOption({
        series: [
          {
            data: tmp,
          },
        ],
      });
      this.data = tmp;
    },
    getDateString(date) {
      return `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
    },
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.testLine);
    this.myChart.setOption(this.option);
    console.log(data);
    // setInterval(this.extendXaxis, 1000);
  },
};
</script>

<style>
</style>

