fix(crm): 营销管理排行榜数据展示问题

gaoluyang

5 天以前 16c6f56f60a6cc7ae13b5e26e8001e9dfcc28500

 src/views/crm/statistics/portrait/index.vue

@@ -4,7 +4,7 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmStatisticsCustomerApi } from '#/api/crm/statistics/customer';

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

import { ContentWrap, Page } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
@@ -24,6 +24,14 @@
const rightChartRef = ref<EchartsUIType>();
const { renderEcharts: renderLeftEcharts } = useEcharts(leftChartRef);
const { renderEcharts: renderRightEcharts } = useEcharts(rightChartRef);

/**
 * 城市分布分析：两张地图各占一整行。
 * 地图图形的大小由容器高度决定（ECharts 按短边自适应，加宽只多留白），
 * 所以这里把高度给足，配合 chartOptions 里的 layoutSize 撑满。
 */
const isAreaTab = computed(() => activeTabName.value === 'area');
const chartHeight = computed(() => (isAreaTab.value ? '700px' : '300px'));

const [QueryForm, formApi] = useVbenForm({
  commonConfig: {
@@ -93,9 +101,19 @@
          :force-render="true"
        />
      </Tabs>
      <div class="mt-5 flex">
        <EchartsUI class="m-4 w-1/2" ref="leftChartRef" />
        <EchartsUI class="m-4 w-1/2" ref="rightChartRef" />
      <div class="mt-5 flex" :class="{ 'flex-col': isAreaTab }">
        <EchartsUI
          class="m-4"
          :class="isAreaTab ? 'w-full' : 'w-1/2'"
          :height="chartHeight"
          ref="leftChartRef"
        />
        <EchartsUI
          class="m-4"
          :class="isAreaTab ? 'w-full' : 'w-1/2'"
          :height="chartHeight"
          ref="rightChartRef"
        />
      </div>
      <Grid v-show="activeTabName !== 'area'" />
    </ContentWrap>