chongqing-web/src/views/portraitManagement/components/SeizedItems.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(() => {
  return {
    grid: {
      top: 40,
      bottom: 40,
      left: 60,
      right: 20
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(13,80,122,1)',
      borderColor: '#70CFE7',
      textStyle: { color: '#fff' }
    },
    legend: {
      top: 'center',
      left: '0%',
      orient: 'vertical',
      textStyle: { color: '#fff' }
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data: props.chartsData.map(item => {
        return {
          value: item.itemNum,
          name: item.itemName
        }
      }),
      label: { show: true, color: '#fff', fontSize: 16, lineHeight: 20, formatter: '{b}\n{c}'  },
      labelLine: { show: true }
    }],
  }
})

useECharts(bar, setChartsOptionsBar);

</script>

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