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

<template>
  <TechCard>
    <div class="card-title">历史跌倒统计</div>
    <BaseChart :option="chartOption" :height="175" />
  </TechCard>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import * as echarts from 'echarts'
import TechCard from '../TechCard/index.vue'

defineOptions({ name: 'FallingHistoryCard' })

const fallingHistoryData = ref({
  dates: ['2024-07-01', '2024-07-02', '2024-07-03', '2024-07-04', '2024-07-05'],
  values: [5, 8, 6, 10, 7],
})

const chartOption = computed(() => ({
  grid: { top: 10, right: 20, bottom: 30, left: 30 },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  },
  xAxis: {
    type: 'category',
    data: fallingHistoryData.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: fallingHistoryData.value.values,
      itemStyle: { color: '#e74c3c' },
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#e74c3c' },
          { offset: 1, color: '#c0392b' },
        ]),
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(231, 76, 60, 0.3)' },
          { offset: 1, color: 'rgba(231, 76, 60, 0.1)' },
        ]),
      },
    },
  ],
}))
</script>

<style scoped lang="less">
.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 12px;
  text-align: center;
}
</style>