<!-- 各单位预警时间分析 -->
<script lang="ts" setup>
import type { Ref } from 'vue'
import { onMounted, ref } from 'vue'
const dangerTimeLineXData: any = ref([]) // 各单位预警时间分析X轴
const dangerTimeLineData = ref() // 各单位预警时间分析Y轴
const alarmLineLoading = ref(false) // loading
// 单位时间报警曲线
function getDangerTimeLine() {
  alarmLineLoading.value = true
  dangerTimeLineXData.value = ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01', '2022-06-01', '2022-07-01', '2022-08-01', '2022-09-01', '2022-10-01', '2022-11-01', '2022-12-01']
  const value = ['1', '2', '12', '122', '42', '15', '82', '20', '20', '20', '20', '20']
  const value1 = [52, 96, 78, 5, 96, 88, 2, 88, 452, 25, 96, 2]
  dangerTimeLineData.value = [{ name: '203', data: value }, { name: '706', data: value1 }]
  alarmLineLoading.value = false
}
onMounted(() => {
  getDangerTimeLine()
})
</script>

<template>
  <div style="width: 100%;height: 100%;">
    <line-chart
      :x-axis-data="dangerTimeLineXData"
      :data="dangerTimeLineData"
      unit=""
      :legend="{
        textStyle: {
          color: '#acdddf',
          fontSize: 12,
        },
        show: true,
        orient: 'horizontal',
        icon: 'circle',
        itemWidth: 12,
        itemHeight: 12,
        y: 'top',
        x: 'center',
        type: 'scroll', // 显示分页
      }"
      :grid="{
        top: 50,
        left: 10,
        right: 10,
        bottom: 0,
        containLabel: true, // 是否包含坐标轴的刻度标签
      }"
      axis-line-color="#acdddf"
      font-color="#acdddf"
      :is-automatic-carousel="true"
      :Xrotate="45"
      tooltipTextColor="#fff"
      tooltipBackgroundColor="rgba(3, 53, 139, .9)"
    />
  </div>
</template>