一、环境准备与基础集成

在 Vue 项目中集成 ECharts 前，需完成环境搭建与依赖安装。推荐使用 npm 或 yarn 进行包管理，执行以下命令安装核心库：

npm install echarts --save
# 或
yarn add echarts

安装完成后，可通过两种方式集成：直接在组件中使用或封装为独立组件。直接集成适用于简单场景，而封装组件更利于维护与复用。

1.1 直接集成方案

在单文件组件中直接操作 ECharts 实例，需处理生命周期与 DOM 操作。以下是一个完整示例：

<template>
  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
const chartContainer = ref(null);
let chartInstance = null;
// 初始化图表
const initChart = () => {
  chartInstance = echarts.init(chartContainer.value);
  const option = {
    title: { text: '销售数据统计' },
    tooltip: { trigger: 'axis' },
    xAxis: { data: ['Q1', 'Q2', 'Q3', 'Q4'] },
    yAxis: {},
    series: [{
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150, 80]
    }]
  };
  chartInstance.setOption(option);
};
onMounted(() => {
  initChart();
  // 窗口大小变化时重绘
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    window.removeEventListener('resize', handleResize);
  }
});
const handleResize = () => {
  chartInstance?.resize();
};
</script>

关键点说明：

• 使用 ref 获取 DOM 引用，确保在 onMounted 后初始化
• 通过 dispose() 释放资源，避免内存泄漏
• 添加 resize 事件监听，实现响应式布局

二、封装可复用图表组件

对于中大型项目，推荐封装独立组件以提高复用性。封装时需考虑动态配置、响应式更新和性能优化。

2.1 基础组件封装

创建 EChartsWrapper.vue 文件，实现配置驱动与动态更新：

<template>
  <div ref="chartRef" :style="{ width, height }"></div>
</template>
<script setup>
import { ref, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
  option: { type: Object, required: true },
  width: { type: String, default: '100%' },
  height: { type: String, default: '400px' }
});
const chartRef = ref(null);
let chartInstance = null;
const initChart = () => {
  if (!chartRef.value) return;
  chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption(props.option);
};
// 深度监听配置变化
watch(
  () => props.option,
  (newOption) => {
    chartInstance?.setOption(newOption);
  },
  { deep: true }
);
onBeforeUnmount(() => {
  chartInstance?.dispose();
});
// 初始化执行
initChart();
</script>

组件特性：

• 通过 props 接收配置对象，支持动态更新
• 使用 watch 深度监听配置变化
• 提供 width/height 属性控制尺寸

2.2 高级功能扩展

主题与样式定制

支持全局主题注册与实例级样式覆盖：

// 注册主题（通常在应用入口）
import * as echarts from 'echarts';
import theme from './theme.json';
echarts.registerTheme('myTheme', theme);
// 组件中使用
const initChart = () => {
  chartInstance = echarts.init(
    chartRef.value,
    'myTheme', // 指定主题
    { renderer: 'canvas' } // 渲染配置
  );
};

性能优化策略

• 按需引入：减少打包体积

  // 替代 import * as echarts
  import * as echarts from 'echarts/core';
  import { BarChart, LineChart } from 'echarts/charts';
  import { GridComponent, TitleComponent } from 'echarts/components';
  echarts.use([BarChart, LineChart, GridComponent, TitleComponent]);

• 防抖处理：高频更新场景
  ```javascript
  import { debounce } from ‘lodash-es’;

const updateChart = debounce((newOption) => {
chartInstance?.setOption(newOption);
}, 300);

# 三、最佳实践与常见问题
## 3.1 响应式设计
实现图表随容器变化的两种方案：
1. **全局监听**：在组件中监听 `resize` 事件
2. **ResizeObserver API**（推荐）：
```javascript
const observeResize = () => {
  const observer = new ResizeObserver(() => {
    chartInstance?.resize();
  });
  if (chartRef.value) observer.observe(chartRef.value);
  onBeforeUnmount(() => observer.disconnect());
};

3.2 动态数据更新

处理异步数据加载的完整流程：

<script setup>
import { ref, onMounted } from 'vue';
const chartOption = ref({});
const fetchData = async () => {
  const res = await fetch('/api/data');
  const data = await res.json();
  chartOption.value = {
    xAxis: { data: data.categories },
    series: [{ data: data.values, type: 'line' }]
  };
};
onMounted(() => {
  fetchData();
});
</script>
<template>
  <EChartsWrapper :option="chartOption" />
</template>

3.3 常见问题解决方案

问题场景	解决方案
图表不显示	检查容器是否有宽高，确认初始化时机
内存泄漏	确保在 unmounted 时调用 dispose()
动态更新失效	使用深度监听或重新初始化实例
移动端触摸失效	配置 touchEventEnabled: true

四、进阶应用场景

4.1 多图表协同

实现联动效果的示例：

<template>
  <div class="chart-group">
    <EChartsWrapper :option="mainOption" ref="mainChart" />
    <EChartsWrapper :option="subOption" ref="subChart" />
  </div>
</template>
<script setup>
import { watch } from 'vue';
const mainChart = ref(null);
const subChart = ref(null);
watch(
  () => mainChart.value?.getOption(),
  (mainOption) => {
    const selectedData = mainOption.series[0].data;
    subChart.value?.setOption({
      series: [{ data: selectedData }]
    });
  },
  { deep: true }
);
</script>

4.2 与状态管理集成

结合 Pinia 实现全局图表状态：

// stores/chart.js
import { defineStore } from 'pinia';
export const useChartStore = defineStore('chart', {
  state: () => ({
    options: {}
  }),
  actions: {
    updateOption(key, option) {
      this.options[key] = option;
    }
  }
});
// 组件中使用
const chartStore = useChartStore();
const option = computed(() => chartStore.options['dashboard']);

通过系统化的封装与实践，开发者可以高效实现复杂的数据可视化需求。建议根据项目规模选择合适方案：小型项目可采用直接集成，中大型项目推荐封装基础组件并配合状态管理。实际开发中还需注意性能监控，可通过浏览器 Performance 工具分析渲染耗时，持续优化用户体验。