<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-06 13:42:45
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-08 15:04:49
 * @FilePath: /danger-manage-web/src/views/indexComponents/leftComponents/deviceYx.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="first-wrapper flex">
    <Title text="报警走势" />

    <div class="two"><Chars :options="options" /></div>
  </div>
</template>

<script>
import Title from "@/views/indexComponents/allComponents/Title";
import Chars from "@/components/allCharsCom/Chars";

export default {
  name: "",
  components: {
    Title,
    Chars,
  },
  data() {
    return {
      options: {
        xAxis: {
          type: "category",
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(19, 135, 167, 1)",
            },
          },
          axisLabel: {
            color: "#ffffff",
          },
          boundaryGap: false,
          data: ["8-18", "8-19", "8-20", "8-21", "8-22", "8-23", "8-24"],
        },
        yAxis: {
          type: "value",
          min:0,
          max:60,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(19, 135, 167, 1)",
            },
          },
          axisLabel: {
            color: "#ffffff",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(19, 135, 167, .5)",
              type: "dashed",
            },
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          top: "5%",
          bottom: "12%",
        },
        series: [
          {
            data: [33, 45, 28, 42, 35, 50, 43, 39],
            type: "line",
            smooth: true,
            symbol: "none",
            itemStyle: {
              color: "rgba(222, 66, 66, 1)",
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.1,
                  color: "rgba(223, 77, 26, 0.57)",
                },
                {
                  offset: 0.1,
                  color: "rgba(223, 77, 26, 0.57)",
                },
                {
                  offset: 1,
                  color: "rgba(244,61,70,0)",
                },
              ]),
            },
          },
        ],
      },
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.first-wrapper {
  width: 100%;
  height: 33.86%;
  // background: blue;
  flex-direction: column;
  > div {
    // width: 100%;
  }
  .two {
    flex: 1;
    // background: wheat;
  }
}
</style>