ln-web/src/views/dashboard/components/DeviceLocationCard/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'

defineOptions({
  name: 'DeviceLocationCard',
})

const chartRef = ref<HTMLDivElement | null>(null)

onMounted(() => {
  if (!chartRef.value) return
  const chart = echarts.init(chartRef.value)

  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: '{b}: {c} 台',
    },
    grid: {
      left: 60,
      right: 20,
      top: 20,
      bottom: 20,
    },
    xAxis: {
      type: 'value',
      axisLabel: { color: '#9cc5e0' },
      splitLine: { show: false },
    },
    yAxis: {
      type: 'category',
      data: ['卫生间', '卧室', '客厅', '餐厅'],
      axisLabel: { color: '#9cc5e0' },
      axisTick: { show: false },
      axisLine: { show: false },
    },
    series: [
      {
        type: 'bar',
        data: [12, 8, 6, 4],
        barWidth: 14,
        itemStyle: {
          color: (params: { dataIndex: number }) => {
            const colors = ['#4dc9e6', '#6de4ff', '#2572ed', '#1a57c9']
            return colors[params.dataIndex]
          },
        },
        label: {
          show: true,
          position: 'right',
          color: '#00f0ff',
          fontSize: 12,
        },
      },
    ],
  })

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

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