chongqing-web/src/views/portraitManagement/components/EventWorkArea.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 labels = props.chartsData.map(item => item.positionName)
  return {
    grid: {
      top: 50,
      bottom: 40,
      left: 60,
      right: 20
    },
    legend: {
      top: '10',
      left: '30',
      // orient: 'vertical',
      textStyle: { color: '#fff' }
    },
    xAxis: {
      type: 'category',
      data: labels,
      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.map(item => item.positionNum),
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
          color: '#6DA6FE',
        },
        label: {
          show: true,
          position: 'top',
          color: '#6DA6FE',
          fontSize: 14,
          fontWeight: 500
        },
        barWidth: '40%'
      },
    ],
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(13,80,122,1)',
      borderColor: '#70CFE7',
      textStyle: { color: '#fff' }
    }
  }
})

useECharts(bar, setChartsOptionsBar);

</script>

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