在 Vue 项目中使用 ECharts

1. 安装 ECharts

使用 npm 或 yarn 安装 ECharts：

npm install echarts --save
# 或
yarn add echarts

---

2. 在组件中引入 ECharts

方式一：完整引入（适合快速上手）

import * as echarts from 'echarts';

方式二：按需引入（减少打包体积）

import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';

// 按需注册组件
echarts.use([BarChart, LineChart, GridComponent, TooltipComponent]);

---

3. 创建图表容器

在 Vue 模板中添加一个具有明确宽高的容器：

<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"></div>
</template>

---

4. 初始化图表

在 mounted 生命周期中初始化图表：

export default {
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chartDom;
      this.chartInstance = echarts.init(chartDom);
      
      // 配置选项（示例：柱状图）
      const option = {
        xAxis: { data: ['A', 'B', 'C'] },
        yAxis: {},
        series: [{ type: 'bar', data: [10, 20, 30] }]
      };
      
      this.chartInstance.setOption(option);
    }
  }
};

---

5. 销毁图表

在组件销毁前销毁 ECharts 实例，避免内存泄漏：

beforeDestroy() {
  if (this.chartInstance) {
    this.chartInstance.dispose();
    this.chartInstance = null;
  }
}

---

6. 响应窗口变化（可选）

监听窗口大小变化并调整图表：

mounted() {
  this.initChart();
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    if (this.chartInstance) {
      this.chartInstance.resize();
    }
  }
}

---

7. Vue 3 的注意事项

• 使用 ref 和 onMounted：

  import { ref, onMounted, onBeforeUnmount } from 'vue';
  
  export default {
    setup() {
      const chartDom = ref(null);
      let chartInstance = null;
  
      onMounted(() => {
        chartInstance = echarts.init(chartDom.value);
        // 设置配置项...
      });
  
      onBeforeUnmount(() => {
        if (chartInstance) chartInstance.dispose();
      });
  
      return { chartDom };
    }
  };
  

---

8. 动态更新数据

当数据变化时，调用 setOption 更新图表：

watch: {
  data(newData) {
    if (this.chartInstance) {
      const newOption = { ...this.option, series: [{ data: newData }] };
      this.chartInstance.setOption(newOption);
    }
  }
}

---

完整示例代码

<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chartInstance: null
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chartDom);
      const option = {
        xAxis: { data: ['A', 'B', 'C'] },
        yAxis: {},
        series: [{ type: 'bar', data: [10, 20, 30] }]
      };
      this.chartInstance.setOption(option);
    },
    handleResize() {
      this.chartInstance?.resize();
    }
  }
};
</script>

---

常见问题

• 容器未设置宽高：图表可能不显示，需确保容器有有效尺寸。
• 按需引入报错：检查是否遗漏了必要的组件注册。
• SSR 兼容性：在服务端渲染中需避免直接操作 DOM。