| | |
|---|
| | | const { renderEcharts: renderRightEcharts } = useEcharts(rightChartRef); |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * 城市分布分析：两张地图各占一整行。 |
|---|
| | | * 地图图形的大小由容器高度决定（ECharts 按短边自适应，加宽只多留白）， |
|---|
| | | * 所以这里把高度给足，配合 chartOptions 里的 layoutSize 撑满。 |
|---|
| | | * 两张图始终一排两个（地图也不例外）。 |
|---|
| | | * 地图大小由容器短边 × 0.92 决定（ECharts 默认只给短边的 80%，加宽容器不会放大图形， |
|---|
| | | * 只是多留白），所以地图只能靠加高来放大——700px 是让这一行不至于把页面顶出屏幕的高度。 |
|---|
| | | * 饼图沿用原来的 300px。 |
|---|
| | | */ |
|---|
| | | const isAreaTab = computed(() => activeTabName.value === 'area'); |
|---|
| | | const chartHeight = computed(() => (isAreaTab.value ? '700px' : '300px')); |
|---|
| | |
|---|
| | | :force-render="true" |
|---|
| | | /> |
|---|
| | | </Tabs> |
|---|
| | | <div class="mt-5 flex" :class="{ 'flex-col': isAreaTab }"> |
|---|
| | | <div class="mt-5 flex"> |
|---|
| | | <EchartsUI |
|---|
| | | class="m-4" |
|---|
| | | :class="isAreaTab ? 'w-full' : 'w-1/2'" |
|---|
| | | class="m-4 w-1/2" |
|---|
| | | :height="chartHeight" |
|---|
| | | ref="leftChartRef" |
|---|
| | | /> |
|---|
| | | <EchartsUI |
|---|
| | | class="m-4" |
|---|
| | | :class="isAreaTab ? 'w-full' : 'w-1/2'" |
|---|
| | | class="m-4 w-1/2" |
|---|
| | | :height="chartHeight" |
|---|
| | | ref="rightChartRef" |
|---|
| | | /> |
|---|
