border_Inspection/web/src/components/EventHotSpots.vue

<template>
  <div class="half-height-chart-container">
    <dv-border-box-10 class="border-box">
      <div class="chart-title">事件高发场景/区域分布</div>
      <div ref="barChart" class="chart"></div>
    </dv-border-box-10>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const barChart = ref(null)

onMounted(() => {
  const barOption = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      backgroundColor: 'rgba(0,0,0,0.8)',
      borderColor: 'rgba(64, 158, 255, 0.8)',
      borderWidth: 1,
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['检测数据1', '检测数据2'],
      bottom: 10, // 距离底部10px
      left: 'center', // 水平居中
      textStyle: { 
        color: '#fff', 
        fontSize: 12 
      },
      itemWidth: 12,
      itemHeight: 8,
      itemGap: 30
    },
    grid: {
      left: '2%',
      right: '4%',
      bottom: '15%', // 增加底部间距给图例留空间
      top: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      min: 0,
      max: 250,
      interval: 50,
      axisLine: { 
        lineStyle: { 
          color: 'rgba(124, 208, 255, 0.5)' 
        } 
      },
      splitLine: { 
        lineStyle: { 
          color: 'rgba(124, 208, 255, 0.1)', 
          type: 'dashed' 
        } 
      },
      axisLabel: { 
        color: 'rgba(124, 208, 255, 0.8)', 
        fontSize: 12 
      }
    },
    yAxis: {
      type: 'category',
      data: [
        '办公走廊/楼道区', 
        '会议室区域', 
        '值班岗亭区', 
        '边检通道区', 
        '港口泊位区'
      ],
      axisLine: { 
        lineStyle: { 
          color: 'rgba(124, 208, 255, 0.5)' 
        } 
      },
      axisLabel: { 
        color: 'rgba(124, 208, 255, 0.8)', 
        fontSize: 12 
      },
      axisTick: { 
        show: false 
      }
    },
    series: [
      {
        name: '检测数据1',
        type: 'bar',
        barWidth: 15,
        label: {
          show: true,
          position: 'right',
          color: '#FFA500',
          fontSize: 12,
          formatter: '{c}'
        },
        itemStyle: {
          color: '#FFA500',
          borderRadius: [0, 4, 4, 0]
        },
        data: [120, 150, 200, 100, 150]
      },
      {
        name: '检测数据2',
        type: 'bar',
        barWidth: 15,
        label: {
          show: true,
          position: 'right',
          color: '#00FFC0',
          fontSize: 12,
          formatter: '{c}'
        },
        itemStyle: {
          color: '#00FFC0',
          borderRadius: [0, 4, 4, 0]
        },
        data: [100, 120, 100, 80, 100]
      }
    ]
  }

  const chartInstance = echarts.init(barChart.value)
  chartInstance.setOption(barOption)

  window.addEventListener('resize', () => {
    chartInstance.resize()
  })
})
</script>

<style scoped>
.half-height-chart-container {
  width: 100%;
  height: 40vh; /* 关键修改：高度设为视口高度的50% */
  padding: 15px 30px;
  box-sizing: border-box;
  margin-top: 20px;
}

.border-box {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  /* padding: 20px; */
  box-sizing: border-box;
}

.chart-title {
  font-size: 16px;
  color: #7cd0ff;
  text-align: center;
  padding-top: 15px;
  font-weight: 500;
  letter-spacing: 1px;
}

.chart {
  width: 100%;
  height: calc(100% - 30px);
  padding: 20px;
}
</style>