fix: 完成进销存分析大屏前端页面

spring

20 小时以前 13b020a2a57f2bff06a10abf47ceb2fdc70ccbc0

 src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue

@@ -2,6 +2,8 @@
  <div>
    <PanelHeader title="人员分布" />
    <div class="main-panel panel-item-customers">
      <div class="pie-chart-wrapper">
        <div class="pie-background" :style="{ backgroundImage: `url(${roseBorderImg})` }"></div>
      <Echarts
        ref="echartsRef"
        :chartStyle="chartStyle"
@@ -14,6 +16,7 @@
      />
    </div>
  </div>
  </div>
</template>

<script setup>
@@ -21,6 +24,7 @@
import { deptStaffDistribution } from '@/api/viewIndex.js'
import PanelHeader from '../PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import roseBorderImg from '@/assets/BI/玫瑰图边框.png'

/**
 * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
@@ -110,7 +114,7 @@
    center: ['20%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
      borderWidth:5,
    },
    label: {
      show: false
@@ -162,4 +166,26 @@
  width: 100%;
  height: 370px;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
}


.pie-background {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-113%, -50%);
  width: 360px;
  height: 360px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}
</style>