Vue2+Three.js+ECharts图表(3D)

字体大小预览速度下载代码编辑器大小

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
	Vue2 + Three.js + 3DECharts图表
</title>

<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>

<script src="https://unpkg.com/three@0.128.0/build/three.min.js"></script>

<script src="https://unpkg.com/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

<script src="https://unpkg.com/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>

<script src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>

<script src="https://unpkg.com/three@0.128.0/examples/js/renderers/CSS2DRenderer.js"></script>

<script src="https://unpkg.com/three@0.128.0/examples/js/loaders/DRACOLoader.js"></script>
<style>
        body {
            background-color: #111;
            color: #e6e6e6;
            min-height: 100vh;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        #app {
            /* Vue应用容器 */
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
        }
        #three-container {
            /* Three.js画布容器 */
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .instructions {
            position: absolute;
            left: 120px;
            transform: translateX(-50%);
            text-align: center;
            color: rgba(255, 255, 255, 1);
            font-size: 0.9rem;
            padding: 10px 20px;
            border-radius: 10px;
            z-index: 10;
        }
        /* CSS2D标签样式 - 图表容器 */
        .css2d-chart-container {
            position: absolute;
            pointer-events: auto;
            background-color: rgba(20, 20, 40, 0.95);
            border-radius: 10px;
            border: 1px solid #333;
            overflow: hidden;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8);
            /* 设置固定大小 */
            width: 400px;
            height: 300px;
            /* 隐藏溢出部分 */
            overflow: hidden;
        }
        .chart-header {
            padding: 12px 15px;
            background-color: rgba(30, 30, 60, 0.95);
            border-bottom: 1px solid #333;
            user-select: none;
        }
        .chart-title {
            margin: 0;
            font-size: 1.1rem;
            color: #4cc9f0;
            font-weight: 600;
            text-align: center;
        }
        .chart-content {
            height: calc(100% - 45px);
            padding: 10px;
        }
        .chart-canvas {
            width: 100%;
            height: 100%;
        }
    </style>
<div id="app">
	
	<div class="scene-container">
		<div class="instructions">
			Vue2 + Three.js + 3D ECharts图表
		</div>

            <canvas id="three-container"></canvas>
	</div>
</div>
<script>
        new Vue({
            el: '#app',
            data() {
                return {
                    // Three.js相关变量
                    scene: null,
                    camera: null,
                    renderer: null,
                    controls: null,
                    loader: null,
                    css2Renderer: null, // CSS2渲染器
                    // 图表标签对象
                    barChartLabel: null,
                    lineChartLabel: null,
                    // ECharts图表实例
                    barChartInstance: null,
                    lineChartInstance: null,
                    // 图表容器元素
                    barChartContainer: null,
                    lineChartContainer: null,
                }
            },
            mounted() {
                // 组件挂载时初始化场景
                this.initThreeScene();
                // 监听窗口大小变化
                window.addEventListener('resize', this.onWindowResize);
                // 加载模型
                this.loadModel();
                // 初始化ECharts图表
                this.initCharts();
            },
            beforeDestroy() {
                // 组件销毁前清理资源
                window.removeEventListener('resize', this.onWindowResize);
                if (this.controls) this.controls.dispose();
                if (this.renderer) this.renderer.dispose();
                if (this.css2Renderer) {
                    document.body.removeChild(this.css2Renderer.domElement);
                }
            },
            methods: {
                // 初始化Three.js场景
                initThreeScene() {
                    // 获取canvas容器
                    const container = document.getElementById('three-container');
                    // 创建场景
                    this.scene = new THREE.Scene();
                    this.scene.background = new THREE.Color(0x0a0a1a);
                    // 创建透视相机
                    this.camera = new THREE.PerspectiveCamera(
                        75, // 视野角度
                        container.clientWidth / container.clientHeight, // 宽高比
                        0.1, // 近裁剪面
                        1000 // 远裁剪面
                    );
                    this.camera.position.set(0, 2, -4); // 设置相机初始位置
                    // 创建WebGL渲染器
                    this.renderer = new THREE.WebGLRenderer({
                        canvas: container,
                        antialias: true,
                        logarithmicDepthBuffer: true, // 启用对数深度缓冲
                    });
                    this.renderer.setSize(container.clientWidth, container.clientHeight); // 设置渲染尺寸
                    // 添加轨道控制器
                    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                    this.controls.enableDamping = true; // 启用阻尼效果，使操作更平滑
                    this.controls.dampingFactor = 0.05; // 阻尼系数
                    // 创建GLTF加载器
                    this.loader = new THREE.GLTFLoader();
                    // 图片URL
                    const baseUrl = 'https://threejs.org/examples/textures/cube/Park2/';
                    // 天空盒6个面的图片文件
                    const skyboxUrls = [
                        "posx.jpg", // 右面
                        "negx.jpg", // 左面
                        "posy.jpg", // 上面
                        "negy.jpg", // 下面
                        "posz.jpg", // 前面
                        "negz.jpg", // 后面
                    ];
                    // 创建立方体贴图加载器
                    const cubeTextureLoader = new THREE.CubeTextureLoader();
                    // 设置图片路径前缀
                    cubeTextureLoader.setPath("https://threejs.org/examples/textures/cube/Park2/");
                    // 加载天空盒图片
                    cubeTextureLoader.load(
                        skyboxUrls, // 6个图片URL的数组
                        // 成功回调
                        (cubeTexture) => {
                            cubeTexture.mapping = THREE.CubeReflectionMapping;// 设置纹理的映射方式
                            this.scene.background = cubeTexture;// 将立方体贴图设置为场景背景
                        },
                    );
                    // 创建CSS2渲染器
                    this.css2Renderer = new THREE.CSS2DRenderer();
                    this.css2Renderer.setSize(container.clientWidth, container.clientHeight);
                    this.css2Renderer.domElement.style.position = 'absolute';
                    this.css2Renderer.domElement.style.top = '0';
                    this.css2Renderer.domElement.style.left = '0';
                    this.css2Renderer.domElement.style.pointerEvents = 'none';
                    document.body.appendChild(this.css2Renderer.domElement);
                    // 创建光源
                    this.createLights();
                    // 创建图表容器
                    this.createChartContainers();
                    // 启动动画循环
                    this.animate();
                },
                // 创建光源
                createLights() {
                    // 环境光
                    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
                    this.scene.add(ambientLight);
                    // 平行光
                    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
                    directionalLight.position.set(5, 10, 7);
                    this.scene.add(directionalLight);
                    // 点光源
                    const pointLight = new THREE.PointLight(0x4cc9f0, 0.8, 10);
                    pointLight.position.set(0, 5, 5);
                    this.scene.add(pointLight);
                },
                // 创建图表容器
                createChartContainers() {
                    // 创建柱状图容器
                    this.barChartContainer = document.createElement('div');
                    this.barChartContainer.className = 'css2d-chart-container';
                    this.barChartContainer.style.width = '300px';
                    this.barChartContainer.style.height = '200px';
                    // 创建柱状图标题
                    const barHeader = document.createElement('div');
                    barHeader.className = 'chart-header';
                    barHeader.innerHTML = '柱状图';
                    this.barChartContainer.appendChild(barHeader);
                    // 创建柱状图内容区域
                    const barContent = document.createElement('div');
                    barContent.className = 'chart-content';
                    barContent.style.height = 'calc(100% - 45px)';
                    this.barChartContainer.appendChild(barContent);
                    // 创建柱状图画布容器
                    const barCanvas = document.createElement('div');
                    barCanvas.className = 'chart-canvas';
                    barContent.appendChild(barCanvas);
                    // 创建柱状图CSS2D对象并添加到场景
                    this.barChartLabel = new THREE.CSS2DObject(this.barChartContainer);
                    this.barChartLabel.position.set(-2, 1, 0);
                    this.scene.add(this.barChartLabel);
                    // 创建折线图容器
                    this.lineChartContainer = document.createElement('div');
                    this.lineChartContainer.className = 'css2d-chart-container';
                    this.lineChartContainer.style.width = '300px';
                    this.lineChartContainer.style.height = '200px';
                    // 创建折线图标题
                    const lineHeader = document.createElement('div');
                    lineHeader.className = 'chart-header';
                    lineHeader.innerHTML = '折线图';
                    this.lineChartContainer.appendChild(lineHeader);
                    // 创建折线图内容区域
                    const lineContent = document.createElement('div');
                    lineContent.className = 'chart-content';
                    lineContent.style.height = 'calc(100% - 45px)';
                    this.lineChartContainer.appendChild(lineContent);
                    // 创建折线图画布容器
                    const lineCanvas = document.createElement('div');
                    lineCanvas.className = 'chart-canvas';
                    lineContent.appendChild(lineCanvas);
                    // 创建折线图CSS2D对象并添加到场景
                    this.lineChartLabel = new THREE.CSS2DObject(this.lineChartContainer);
                    this.lineChartLabel.position.set(2, 1, 0);
                    this.scene.add(this.lineChartLabel);
                },
                // 加载模型
                loadModel() {
                    // 配置DRACOLoader
                    const dracoLoader = new THREE.DRACOLoader();
                    // 设置Draco解码器的路径
                    dracoLoader.setDecoderPath('https://unpkg.com/three@0.128.0/examples/js/libs/draco/');
                    this.loader.setDRACOLoader(dracoLoader);
                    // 加载glb模型
                    this.loader.load('https://threejs.org/examples/models/gltf/ferrari.glb', (gltf) => {
                        // 将模型添加到场景
                        this.scene.add(gltf.scene);
                    }
                    );
                },
                // 初始化ECharts图表
                initCharts() {
                    // 初始化柱状图
                    if (this.barChartContainer) {
                        const barCanvas = this.barChartContainer.querySelector('.chart-canvas');
                        if (barCanvas) {
                            this.barChartInstance = echarts.init(barCanvas);
                            this.renderBarChart();
                        }
                    }
                    // 初始化折线图
                    if (this.lineChartContainer) {
                        const lineCanvas = this.lineChartContainer.querySelector('.chart-canvas');
                        if (lineCanvas) {
                            this.lineChartInstance = echarts.init(lineCanvas);
                            this.renderLineChart();
                        }
                    }
                },
                // 渲染柱状图
                renderBarChart() {
                    const option = {
                        backgroundColor: 'transparent', // 透明背景
                        grid: {
                            left: '5%',
                            right: '5%',
                            top: '10%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: { // X轴配置
                            type: 'category',
                            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
                            axisLabel: {
                                color: '#e6e6e6',
                                fontSize: 11 // 字体大小
                            }
                        },
                        yAxis: { // Y轴配置
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#a0a0e0'
                                }
                            },
                            axisLabel: {
                                color: '#e6e6e6',
                                fontSize: 11
                            },
                        },
                        series: [ // 数据系列配置
                            {
                                name: '登机人数',
                                type: 'bar',
                                data: [320, 432, 501, 634, 590, 730, 820],
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#4361ee' },
                                        { offset: 1, color: '#4cc9f0' }
                                    ])
                                }
                            }
                        ],
                        tooltip: {} // 提示框配置
                    };
                    this.barChartInstance.setOption(option); // 设置柱状图配置
                },
                // 渲染折线图
                renderLineChart() {
                    const option = {
                        backgroundColor: 'transparent',
                        grid: {
                            left: '5%',
                            right: '5%',
                            top: '10%',
                            bottom: '15%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            axisLine: {
                                lineStyle: {
                                    color: '#a0a0e0'
                                }
                            },
                            axisLabel: {
                                color: '#e6e6e6',
                                fontSize: 11
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#a0a0e0'
                                }
                            },
                            axisLabel: {
                                color: '#e6e6e6',
                                fontSize: 11
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(160, 160, 224, 0.2)'
                                }
                            }
                        },
                        series: [
                            {
                                name: '访问量',
                                type: 'line',
                                data: [820, 932, 901, 934, 1290, 1330, 1320],
                                smooth: true,
                                lineStyle: {
                                    width: 3,
                                    color: '#ff6b6b'
                                },
                                itemStyle: {
                                    color: '#ff6b6b'
                                },
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: 'rgba(255, 107, 107, 0.5)' },
                                        { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
                                    ])
                                }
                            }
                        ],
                        tooltip: {}
                    };
                    this.lineChartInstance.setOption(option);
                },
                // 动画循环
                animate() {
                    // console.log(this.camera.position)
                    requestAnimationFrame(this.animate);
                    // 更新控制器
                    this.controls.update();
                    // 渲染WebGL场景
                    this.renderer.render(this.scene, this.camera);
                    // 渲染CSS2D标签
                    this.css2Renderer.render(this.scene, this.camera);
                },
                // 窗口大小变化处理
                onWindowResize() {
                    this.camera.aspect = window.innerWidth / window.innerHeight;
                    this.camera.updateProjectionMatrix();
                    this.renderer.setSize(window.innerWidth, window.innerHeight);
                    // 更新ECharts图表大小
                    if (this.barChartInstance) this.barChartInstance.resize();
                    if (this.lineChartInstance) this.lineChartInstance.resize();
                }
            }
        });
    </script>