<template>
  <div class="wrapper">
    <div class="title">
      <div class="icon"></div>
      <p>30天全区城市眼告警指数走势</p>
    </div>
    <div id="warnTrend" class="charts"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "WarnTrend",
  props: {
    data: {
      type: Array,
      default: () => {
        [];
      },
    },
  },
  watch: {
    data: function () {
      const xData = this.data.map((item) => {
        return item.date.slice(5);
      });
      const yValue = this.data.map((item) => {
        return item.total;
      });
      this.initLine(xData, yValue);
    },
  },
  methods: {
    initLine(xData, yValue) {
      let myChart = echarts.init(document.getElementById("warnTrend"));
      // 绘制图表
      myChart.clear();
      myChart.setOption({
        animation: true,
        grid: {
          left: 20,
          top: 20,
          right: 20,
          bottom: 20,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: xData,
          type: "category",
          axisLabel: {
            interval: "auto",
            color: "#fff",
            fontSize: 13,
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              opacity: 0.3,
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: yValue,
            type: "line",
            smooth: true,
            symbol: "none",
            symbolSize: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(69, 88, 246, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(24, 255, 214, 1)",
                },
              ]),
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(69, 88, 246, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(24, 255, 214, 0)",
                },
              ]),
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.wrapper {
  width: 530px;
  height: 248px;
  background: linear-gradient(180deg, rgba(10, 29, 72, 0.51) 0%, #0F152E 100%);
  border-radius: 4px;
  border: 2px solid #00356D;

  .title {
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    background: linear-gradient(270deg, #072B4D 0%, #134778 100%);

    .icon {
      width: 2px;
      height: 20px;
      background: #5CE3FB;
      border-radius: 2px;
    }

    p {
      margin-left: 10px;
      font-size: 20px;
      font-weight: 400;
      color: #5CE3FB;

      span {
        font-weight: 500;
        color: #FC672C;
      }
    }
  }

  .charts {
    width: 100%;
    height: 200px;
    margin: auto;
  }
}

.WT_main {
  width: 420px;
}
</style>
