<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-06 13:42:45
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-10-07 17:39:34
 * @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: {
          show: true,
          type: "value",
          lineStyle: {
            color: "#ffffff",
            type: "dashed",
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(19, 135, 167, 1)",
            },
          },
          // 是否显示刻度延长线
          splitLine: {
            show: false,
          },
          min: 0,
          max: 40,
          // 文字样式
          axisLabel: {
            show: true,
            color: "#ffffff",
          },
        },
        yAxis: [
          {
            type: "category",
            data: [
              "工业探测器",
              "压力探测器",
              "液位探测器",
              "温度变送器",
              "视频监控",
            ].reverse(),
            // 轴线样式
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(19, 135, 167, 1)",
              },
            },
            // 文字样式
            axisLabel: {
              color: "#ffffff",
            },
            // 刻度延长线样式
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(19, 135, 167, .5)",
                type: "dashed",
              },
            },
            //刻度
            axisTick: {
              show: false,
            },
          },
          // 最右边的y轴
          // {
          //   type: "category",
          //   name: "right",
          //   data: [70, 108, 65, 93, 105].reverse(),
          //   position: "right",
          //   show: true,
          //   axisLabel: {
          //     formatter: "{value} 次",
          //   },
          //   axisLine: {
          //     show: false,
          //     lineStyle: {
          //       color: "#ffffff",
          //     },
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          // },
        ],
        // 位置与大小
        grid: {
          left: "20%",
          right: "10%",
          top: "2%",
          bottom: "10%",
        },
        series: [
          {
            // realtimeSort: true,
            // 是否显示底黑
            showBackground: true,
            backgroundStyle: {
              color: "rgba(0, 0, 0, 1)",
              borderRadius: [0, 3, 3, 0],
            },
            barWidth: 15,
            name: "X",
            type: "bar",
            data: [28, 7, 7, 7, 9].reverse(),
            // data: [20, 7, 7, 7, 9],
            // 柱形样式
            itemStyle: {
              color: "rgba(45, 207, 255, 1)",
              borderRadius: [0, 3, 3, 0],
            },
            // 跟随文字
            label: {
              show: true,
              position: "right",
              color: "#ffffff",
              valueAnimation: true,
              formatter: "{c} 个",
            },
          },
        ],
      },
    };
  },
  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>