| | |
| | | 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'; |
| | |
| | | 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: { |
| | |
| | | /> |
| | | </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> |