Vue2 + Three.js 中集成 ECharts 基础教程

ECharts 官方网站

1. 引入 ECharts 资源

首先需要在项目中引入 ECharts 库，示例中使用 CDN 方式引入：

<!-- 在 head 标签中引入 ECharts -->
<script src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>

如果是 Vue 工程化项目，也可以通过 npm 安装：

npm install echarts

然后在组件中导入：

import echarts from 'echarts'

2. 创建图表容器 DOM

在模板中定义图表容器，通常使用 div 元素，并通过 ref 属性方便 Vue 实例获取该元素：

<!-- 图表容器 -->
<div class="charts-container">
    <!-- 柱状图 -->
    <div class="chart-box">
        <div class="chart-header">
            <h4 class="chart-title">柱状图</h4>
        </div>
        <div class="chart-content">
            <div class="chart-canvas" ref="barChart"></div>
        </div>
    </div>

    <!-- 折线图 -->
    <div class="chart-box">
        <div class="chart-header">
            <h4 class="chart-title">折线图</h4>
        </div>
        <div class="chart-content">
            <div class="chart-canvas" ref="lineChart"></div>
        </div>
    </div>
</div>

3. 初始化 ECharts 实例

在 Vue 实例的 mounted 钩子中初始化图表，确保 DOM 已加载完成：

mounted() {
    this.initCharts(); // 初始化 ECharts 图表
},
methods: {
    initCharts() {
        // 初始化柱状图实例
        if (this.$refs.barChart) {
            this.barChartInstance = echarts.init(this.$refs.barChart);
            this.renderBarChart(); // 渲染图表
        }
        // 初始化折线图
        if (this.$refs.lineChart) {
            this.lineChartInstance = echarts.init(this.$refs.lineChart);
            this.renderLineChart();
        }
    }
}

4. 配置并渲染图表

每个图表类型需要定义对应的配置项（option），然后通过 setOption 方法渲染：

柱状图配置示例

renderBarChart() {
    const option = {
        backgroundColor: 'transparent', // 透明背景，适应 Three.js 场景
        grid: { // 图表网格边距
            left: '5%',
            right: '2%',
            top: '10%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: { // X轴配置
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
            axisLabel: {
                color: '#e6e6e6', // 文字颜色（适应深色背景）
                fontSize: 11
            }
        },
        yAxis: { // Y轴配置
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#a0a0e0'
                }
            }
        },
        series: [ // 数据系列
            {
                name: '销售额',
                type: 'bar',
                data: [320, 432, 501, 634, 590, 730, 820]
            }
        ]
    };
    this.barChartInstance.setOption(option);
}

5. 响应式处理

确保窗口大小变化时图表自适应：

onWindowResize() {
    // Three.js 相机和渲染器调整...
    
    // 同步更新图表大小
    if (this.barChartInstance) this.barChartInstance.resize();
    if (this.lineChartInstance) this.lineChartInstance.resize();
}

6. 资源清理

在组件销毁前释放 ECharts 资源，避免内存泄漏：

beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', this.onWindowResize);
    
    // 销毁图表实例
    if (this.barChartInstance) this.barChartInstance.dispose();
    if (this.lineChartInstance) this.lineChartInstance.dispose();
}