ln-web/src/views/dashboard/components/AlarmHistoryCard/index.vue

<template>
  <TechCard>
    <div class="card-title">历史告警统计</div>
    <div ref="chartRef" class="chart-container" />
  </TechCard>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { useChartResize } from '@/utils/useChartResize'
import TechCard from '../TechCard/index.vue'
// import { alarmHistoryData } from '@/store/data'

defineOptions({
  name: 'AlarmHistoryCard',
})

const alarmHistoryData = ref({
  dates: ['2024-07-01', '2024-07-02', '2024-07-03', '2024-07-04', '2024-07-05'],
  values: [10, 15, 20, 12, 8],
})
const chartRef = ref<HTMLDivElement | null>(null)

onMounted(() => {
  if (!chartRef.value) return
  const chart = echarts.init(chartRef.value)
  chart.setOption({
    grid: { top: 10, right: 20, bottom: 30, left: 30 },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
    },
    xAxis: {
      type: 'category',
      data: alarmHistoryData.value.dates,
      axisLine: { lineStyle: { color: '#2a3b5a' } },
      axisLabel: { color: '#9cc5e0', fontSize: 12 },
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#2a3b5a' } },
      axisLabel: { color: '#9cc5e0', fontSize: 12 },
      splitLine: { lineStyle: { color: 'rgba(42, 59, 90, 0.3)' } },
    },
    series: [
      {
        name: '告警次数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        data: alarmHistoryData.value.values,
        itemStyle: { color: '#f39c12' },
        lineStyle: {
          width: 3,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#f39c12' },
            { offset: 1, color: '#e74c3c' },
          ]),
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(243, 156, 18, 0.3)' },
            { offset: 1, color: 'rgba(243, 156, 18, 0.1)' },
          ]),
        },
      },
    ],
  })

  useChartResize(chart, chartRef.value)
})
</script>

<style scoped>
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #f39c12;
  margin-bottom: 12px;
  text-align: center;
}
.chart-container {
  width: 100%;
  height: 100%;
  min-height: 280px;
}
</style>