gaoluyang
4 天以前 84d7be872e96547becfbd1647ec77ed56f9f2dde
src/views/reportAnalysis/PSIDataAnalysis/components/left-top.vue
@@ -13,7 +13,7 @@
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
          style="height: 100%"
        />
      </div>
    </div>
@@ -67,9 +67,9 @@
  }))
  return {
    orient: 'vertical',
    top: 'center',
    left: '52%',
    orient: 'horizontal',
    bottom: 0,
    left: 'center',
    itemGap: 30,
    data: data,
    formatter: function (name) {
@@ -116,7 +116,7 @@
    name: '产品销售金额分析',
    type: 'pie',
    radius: '60%',
    center: ['25%', '50%'],
    center: ['50%', '45%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
@@ -145,8 +145,8 @@
const { init: initBackground, cleanup: cleanupBackground } = useChartBackground({
  wrapperRef: pieWrapperRef,
  backgroundRef: pieBackgroundRef,
  left: '25%',       // 图表中心 X 是 25%
  top: '50%',        // 图表中心 Y 是 50%
  left: '50%',       // 图表中心 X 是 50%
  top: '45%',        // 图表中心 Y 是 45%(下面留出图例的位置)
  offsetX: '-51.5%', // X 轴偏移
  offsetY: '-50%',   // Y 轴偏移
  watchData: pieDatas // 监听数据变化,自动调整位置
@@ -199,21 +199,24 @@
  gap: 20px;
}
/* 左栏只剩这一块面板,高度撑满整栏,图表跟着把剩余空间占掉 */
.panel-item-customers {
  border: 1px solid #1a58b0;
  padding: 18px;
  width: 100%;
  height: 449px;
  flex: 1;
  min-height: 0;
}
.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  flex: 1;
  min-height: 0;
}
.pie-background {
  position: absolute;
  left: 25%;
  top: 50%;
  left: 50%;
  top: 45%;
  transform: translate(-51.5%, -50%);
  width: 310px;
  height: 310px;