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

<template>
  <Card title="查获信息展示">
    <div class="content">
      <div class="svgIcon">
        <Svg></Svg>
        <div class="svgContent">
          <div class="value">{{ chartsData.totalSeizeNum }}</div>
          <div class="tips">
            <span>查获总数</span>
            <span>(所有人员)</span>
          </div>
        </div>
      </div>
      <div class="charts">
        <div ref="bar" style="width: 100%; height: 100%;"></div>
      </div>
    </div>
  </Card>
</template>

<script setup>
import { computed } from 'vue';
import Card from './card.vue';
import { useECharts } from '@/hooks/useEcharts.js';
import Svg from './Svg.vue';
const bar = ref(null)
const props = defineProps({
  chartsData: {
    type: Object,
    default: () => ({ totalSeizeNum: 0, itemList: [] })
  }
})

const colors = [
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: '#A674FC'
    }, {
      offset: 1, color: '#2C2B53'
    }],
    global: false
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: '#71A3FC'
    }, {
      offset: 1, color: '#1E2144'
    }],
    global: false
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: '#F462CC'
    }, {
      offset: 1, color: '#2C244B'
    }],
    global: false
  },
]

const setChartsOptionsBar = computed(() => {
  return {
    grid: {
      top: 20,
      bottom: 40,
      left: 45,
      right: 15
    },
    xAxis: {
      type: 'category',
      data: props.chartsData.itemList.map(item => item.name),
      axisLabel: { color: '#fff', fontSize: 14 },
      axisLine: { lineStyle: { color: '#344067' } }
    },
    yAxis: [
      {
        type: 'value',
        position: 'left',
        axisLabel: { color: '#fff', fontSize: 14 },
        axisLine: {  lineStyle: { color: '#fff' } },
        splitLine: { lineStyle: { color: '#344067' }  }
      }
    ],
    series: [
      {
        name: '查获数',
        type: 'bar',
        data: props.chartsData.itemList.map(item => item.seizeNum),
        itemStyle: {
          color: (params) => {
            return colors[params.dataIndex % colors.length]
          },
          borderRadius: [5, 5, 0, 0],
        },
        barWidth: '50%'
      },
    ],
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(13,80,122,1)',
      borderColor: '#70CFE7',
      textStyle: { color: '#fff' }
    }
  }
})

useECharts(bar, setChartsOptionsBar);
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  width: 100%;
  height: 100%;
  column-gap: 20px;
  .svgIcon {
    width: 280px;
    box-sizing: border-box;
    padding: 20px;
    position: relative;
    .svgContent {
      position: absolute;
      width: 175px;
      height: 175px;
      inset: 0;
      margin: auto;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 50%,
        #a19dd2 100%
      );
      color: #fff;
      .value {
        font-size: 48px;
        font-weight: 500;
        text-shadow: 2px 2px 1px #BBA7E2;
        color: #fff;
      }
      .tips {
        display: flex;
        flex-direction: column;
        font-size: 14px;
        font-weight: 500;
        color: #BBA7E2;
      }
    }
  }
  .charts {
    flex: 1;
  }
}
</style>