由于原代码较长，我们可以提供一个简化的核心函数示例，展示如何使用Three.js和ECharts创建一个3D立体图表：

// 引入Three.js和ECharts
import * as THREE from 'three';
import * as echarts from 'echarts';
 
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建3D图表的几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建ECharts图表
const chartDom = document.createElement('div');
chartDom.style.width = '400px';
chartDom.style.height = '400px';
document.body.appendChild(chartDom);
const chart = echarts.init(chartDom);
const option = {
    series: [
        {
            type: 'pie',
            data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ]
        }
    ]
};
chart.setOption(option);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    // 旋转立方体和更新ECharts图表数据
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    chart.setOption({
        series: [{
            data: [
                { value: Math.random() * 1000, name: '直接访问' },
                { value: Math.random() * 1000, name: '邮件营销' },
                { value: Math.random() * 1000, name: '联盟广告' },
                { value: Math.random() * 1000, name: '视频广告' },
                { value: Math.random() * 1000, name: '搜索引擎' }
            ]
        }]
    });
    renderer.render(scene, camera);
}
 
animate();

这段代码展示了如何创建一个Three.js的3D场景，其中包含一个旋转的3D立方体，以及如何在页面上展示一个ECharts图表。动画函数animate负责更新立方体的旋转和图表数据，并且每一帧都通过Three.js的渲染器renderer进行渲染显示。

根据您的需求，我将为您提供一个使用Vue 3、TypeScript和Echarts开发疫情统计页面的详细步骤。

1. 项目初始化

首先，您需要使用Vue CLI来初始化一个新的Vue 3项目。确保您已经安装了最新版本的Vue CLI。

vue create my-project

在创建过程中，您可以选择手动选择特性，以确保项目使用Vue 3和TypeScript。

2. 安装Echarts

接下来，您需要在项目中安装Echarts库。

npm install echarts --save

3. 创建疫情统计页面

在src/views目录下创建一个新的Vue组件，例如EpidemicStats.vue。

4. 设计页面布局

在EpidemicStats.vue中，您可以开始设计页面的布局和样式。使用Element-Plus提供的组件来构建一个美观且易于使用的界面。

5. 集成Echarts图表

在页面中集成Echarts图表来显示疫情数据。您可以在mounted生命周期钩子中初始化图表，并在updated钩子中更新图表数据。

6. 获取疫情数据

您可以通过API调用或其他方式获取实时疫情数据。确保数据格式与Echarts所需的数据格式相匹配。

7. 响应式设计

确保您的页面在不同屏幕尺寸下都能良好地显示和工作。可以使用CSS媒体查询来实现响应式设计。

8. 调试和优化

使用Chrome开发者工具或其他调试工具进行调试和优化，确保页面的性能和用户体验达到最佳状态。

9. 部署

最后，将您的项目部署到Web服务器上，供其他人访问和使用。

示例代码（部分）

以下是一个简化的示例代码，展示了如何在Vue组件中集成Echarts图表。

EpidemicStats.vue

<template>
  <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script lang="ts">
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'EpidemicStats',
  setup() {
    const chartRef = ref(null);
    let chartInstance = null;
    const fetchData = async () => { /* 获取疫情数据的逻辑 */ };
    const initChart = () => { /* 初始化图表的逻辑 */ };
    onMounted(() => {
      initChart();
      watch(fetchData, (newData) => { /* 当数据变化时更新图表的逻辑 */ }, { deep: true });
    });
    return { /* 暴露给模板的属性和方法 */ };
  },
};
</script>

请注意，这只是一个基本的框架和示例代码，您需要根据实际需求进行扩展和完善。希望这些信息对您有所帮助！如果您有任何其他问题或需要进一步的帮助，请随时告诉我。