chongqing-web/src/views/portraitManagement/components/SeizedNumAll.vue

<template>
  <Card title="每日查获数量(总表)">
    <div ref="bar" style="width: 100%; height: 100%;"></div>
  </Card>
</template>

<script setup>
import { computed } from 'vue';
import Card from './card.vue';
import { useECharts } from '@/hooks/useEcharts.js';
const bar = ref(null)
const props = defineProps({
  chartsData: {
    type: Object,
    default: () => ([])
  }
})
const setChartsOptionsBar = computed(() => {
  const hours = Array.from({length: 24}, (_, i) => `${i.toString().padStart(2, '0')}:00`)
  return {
    grid: {
      top: 40,
      bottom: 30,
      left: 60,
      right: 30
    },
    xAxis: {
      type: 'category',
      axisLabel: { show: false },
      axisLine: { show: false },
      boundaryGap: false
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        axisLabel: { color: '#fff', fontSize: 14 },
        axisLine: {  lineStyle: { color: '#fff' } },
        splitLine: { lineStyle: { color: '#344067' } }
      }
    ],
    series: [
      {
        name: '查获数',
        type: 'line',
        data: props.chartsData.map(item => item.num),
        smooth: true,
        itemStyle: { color: '#71B138' },
        lineStyle: { color: '#71B138' }
      }
    ],
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(13,80,122,1)',
      borderColor: '#70CFE7',
      textStyle: { color: '#fff' }
    }
  }
})

useECharts(bar, setChartsOptionsBar);

</script>

<style lang="scss" scoped></style>