产品进销存-前端
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
huminmin
3 天以前 b0c3dbefea78b106b7c680597361ea37930eaa0d 
 src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue


@@ -3,8 +3,8 @@


    <PanelHeader title="销售品分布" />


    <div class="main-panel panel-item-customers">


      <CarouselCards :items="cardItems" :visible-count="3" />


      <div class="pie-chart-wrapper">


        <div class="pie-background"></div>


      <div class="pie-chart-wrapper" ref="pieWrapperRef">


        <div class="pie-background" ref="pieBackgroundRef"></div>


        <Echarts


          ref="echartsRef"


          :chartStyle="chartStyle"


@@ -21,11 +21,15 @@


</template>




<script setup>


import { ref, onMounted, computed } from 'vue'


import { ref, onMounted, onBeforeUnmount, computed } from 'vue'


import { productSalesAnalysis } from '@/api/viewIndex.js'


import PanelHeader from './PanelHeader.vue'


import CarouselCards from './CarouselCards.vue'


import Echarts from '@/components/Echarts/echarts.vue'


import { useChartBackground } from '@/hooks/useChartBackground.js'




const pieWrapperRef = ref(null)


const pieBackgroundRef = ref(null)




/**


 * @introduction 把数组中key值相同的那一项提取出来，组成一个对象


@@ -137,6 +141,17 @@




const cardItems = ref([])




// 使用封装的背景位置调整方法（与其他文件保持一致）


const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({


  wrapperRef: pieWrapperRef,


  backgroundRef: pieBackgroundRef,


  left: '25%',       // 图表中心 X 是 25%


  top: '50%',        // 图表中心 Y 是 50%


  offsetX: '-51.5%', // X 轴偏移


  offsetY: '-50%',   // Y 轴偏移


  watchData: pieDatas // 监听数据变化，自动调整位置


})




const fetchData = () => {


  productSalesAnalysis()


    .then((res) => {


@@ -162,6 +177,11 @@




onMounted(() => {


  fetchData()


  initBackground()


})




onBeforeUnmount(() => {


  cleanupBackground()


})


</script>