gaoluyang
18 小时以前 b35039bcd6b21e26bc01d2ad8de328456b272d16
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,15 @@
const rightChartRef = ref<EchartsUIType>();
const { renderEcharts: renderLeftEcharts } = useEcharts(leftChartRef);
const { renderEcharts: renderRightEcharts } = useEcharts(rightChartRef);
/**
 * 两张图始终一排两个(地图也不例外)。
 * 地图大小由容器短边 × 0.92 决定(ECharts 默认只给短边的 80%,加宽容器不会放大图形,
 * 只是多留白),所以地图只能靠加高来放大——700px 是让这一行不至于把页面顶出屏幕的高度。
 * 饼图沿用原来的 300px。
 */
const isAreaTab = computed(() => activeTabName.value === 'area');
const chartHeight = computed(() => (isAreaTab.value ? '700px' : '300px'));
const [QueryForm, formApi] = useVbenForm({
  commonConfig: {
@@ -94,8 +103,16 @@
        />
      </Tabs>
      <div class="mt-5 flex">
        <EchartsUI class="m-4 w-1/2" ref="leftChartRef" />
        <EchartsUI class="m-4 w-1/2" ref="rightChartRef" />
        <EchartsUI
          class="m-4 w-1/2"
          :height="chartHeight"
          ref="leftChartRef"
        />
        <EchartsUI
          class="m-4 w-1/2"
          :height="chartHeight"
          ref="rightChartRef"
        />
      </div>
      <Grid v-show="activeTabName !== 'area'" />
    </ContentWrap>