fix: 大屏初始化样式自适应问题

spring

3 天以前 a3828ee89b866f9b4857883cf6eee34170c5d87e

 src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue

@@ -2,7 +2,8 @@
  <div>
    <PanelHeader title="产品大类" />
    <div class="panel-item-customers">
      <div style="height: 70%">
      <div class="pie-chart-wrapper" ref="pieWrapperRef">
        <div class="pie-background" ref="pieBackgroundRef"></div>
        <Echarts
          ref="chart"
          :chartStyle="chartStyle"
@@ -10,7 +11,7 @@
          :series="landSeries"
          :tooltip="landTooltip"
          :color="landColors"
          :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
          :options="pieOptions"
          style="height: 100%"
          class="land-chart"
        />
@@ -20,10 +21,15 @@
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Echarts from '@/components/Echarts/echarts.vue'
import PanelHeader from '../PanelHeader.vue'
import { productCategoryDistribution } from '@/api/viewIndex.js'
import { useChartBackground } from '@/hooks/useChartBackground.js'

const pieWrapperRef = ref(null)
const pieBackgroundRef = ref(null)
const chart = ref(null)

// 数据列表（来自接口）
const dataList = ref([])
@@ -82,17 +88,20 @@

// 提示框
const landTooltip = {
  triggerOn: 'click',
  // triggerOn: 'hover',
  alwaysShowContent: true,
  position: function (pt) {
    return [pt[0], 130]
  },
  formatter: function (params) {
    return `${params.name} (${params.value}类)`
  },
}

// 双层环形饼图
const landSeries = ref([
  {
    name: '外圈',
    name: '产品大类',
    type: 'pie',
    radius: ['35%', '55%'],
    center: ['50%', '50%'],
@@ -104,27 +113,28 @@
      lineHeight: 18,
      rich: {
        ...dotRich,
        parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
        parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
        child: { fontSize: 12, color: '#fff', lineHeight: 18 },
      },
      formatter: function (params) {
        const children = params?.data?.children || []
        const parentName = params?.data?.name || ''
        const parentValue = params?.data?.value ?? 0
        const rawVal = params?.data?.value
        const parentValue = typeof rawVal === 'number' && !Number.isNaN(rawVal) ? rawVal : (Number(rawVal) || 0)
        const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
        const dot = `{${dotKey}|} `
        if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
        // 用 marker 显示与扇区同色的小圆点，再显示父级名称，后面列出 children 的 name + value
        return [
          `${dot}{parent|${parentName} ${parentValue}}`,
          ...children.map((c) => `{child|${c.name} ${c.value || 0}}`),
        ].join('\n')
        const parentLine = `${dot}{parent|${parentName} (${parentValue}类)}`
        if (!children.length) return parentLine
        // 父级全部显示；子级最多 5 个，超出显示省略号
        const displayed = children.slice(0, 5).map((c) => `{child|${c.name}}`)
        if (children.length > 5) displayed.push('{child|…}')
        return [parentLine, ...displayed].join('\n')
      },
    },
    labelLine: {
      show: true,
      length: 40,
      length2: 40,
      length: 20,
      length2: 20,
      lineStyle: {
        color: '#B8C8E0',
      },
@@ -134,7 +144,6 @@
        return landColors[params.dataIndex % landColors.length]
      },
    },
    // 初始绑定为响应式数据源，后续通过接口填充
    data: dataList.value,
  },
  {
@@ -158,8 +167,22 @@

const chartStyle = {
  width: '100%',
  height: '150%',
  height: '126%',
}

const pieOptions = {
  backgroundColor: 'transparent',
  textStyle: { color: '#B8C8E0' },
}

// 使用封装的背景位置调整方法，可自定义偏移值
const { adjustBackgroundPosition, init: initBackground, cleanup: cleanupBackground } = useChartBackground({
  wrapperRef: pieWrapperRef,
  backgroundRef: pieBackgroundRef,
  offsetX: '-51.5%', // X 轴偏移，可动态调整
  offsetY: '-39%',   // Y 轴偏移，可动态调整
  watchData: dataList // 监听数据变化，自动调整位置
})

const loadData = async () => {
  try {
@@ -173,6 +196,8 @@
    }))
    landLegend.data = dataList.value.map((d) => d.name)
    landSeries.value[0].data = dataList.value
    // 数据加载完成后调整背景位置
    adjustBackgroundPosition()
  } catch (e) {
    console.error('获取产品大类分布失败:', e)
    dataList.value = []
@@ -181,8 +206,14 @@
  }
}


onMounted(() => {
  loadData()
  initBackground()
})

onBeforeUnmount(() => {
  cleanupBackground()
})
</script>

@@ -194,45 +225,26 @@
  height: 420px;
}

.quality-cards {
  display: flex;
  gap: 12px;
.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 54px;
  justify-content: space-between;
  align-items: center;
  height: 320px;
  background: transparent;
}

.quality-cardSec {
  display: flex;
}

.quality-cardTitle {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.quality-card {
  width: 80px;
  height: 60px;
  background-size: cover;
.pie-background {
  position: absolute;
  width: 360px;
  height: 360px;
  background-image: url('@/assets/BI/玫瑰图边框.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.quality-card.one {
  background-image: url('@/assets/BI/yuancailiaoyijianicon@2x.png');
}

.quality-card.two {
  background-image: url('@/assets/BI/guochengyijianicon@2x.png');
}

.quality-card.three {
  background-image: url('@/assets/BI/chuchangyijianicon@2x.png');
  z-index: 1;
  pointer-events: none;
  /* 默认居中，会在 JS 中动态调整 */
  left: 50%;
  top: 50%;
  transform: translate(-51.5%, -39%);
}
</style>